Formattazione personalizzata dell’editor TinyMCE in WordPress

A volte quando si scrive un blocco di testo utilizzando l’editor di WordPress, è necessario che appaia in un certo modo, di solito lo facciamo aggiungendo stili a parti di testo, ma non vogliamo che i nostri clienti debbano sempre aprire l’editor di testo e farlo manualmente.

In questo esempio creeremo un piccolo filtro che puoi aggiungere al tuo functions.phpfile per offrire all’utente alcune opzioni di formattazione extra, per aggiungere uno stile di paragrafo "Lead" personalizzato.

Utilizzo della formattazione TinyMCE personalizzata

Ecco un esempio super veloce del filtro in azione. Ti mostra:

• Come attivare o disattivare la barra degli strumenti in modo da poter vedere il menu Formati
• Come applicare la formattazione utilizzando il menu Formati
• Come cancellare gli stili

TinyMCE Formattazione in azione

Il codice

Il codice è davvero semplice, basta collegarsi tiny_mce_before_inite aggiungere il tuo stile personalizzato style_formatsall’array. Assicurati di includere un titolo, il tipo di elemento che desideri utilizzare e, soprattutto, la classe.

function wholesomecode_tinymce_formatting( $settings) {
    $style_formats = array(
        array(
            'title'   => 'Lead Paragraph',
            'block'   => 'p',
            'classes' => 'lead',
            'wrapper' => false,
        ),
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'wholesomecode_tinymce_formatting' );

Stili

Naturalmente, nulla accadrà senza un po’ di stile. Assicurati di aggiungere gli stili a entrambi i tuoi WordPress principali styles.cssin modo che il tuo Lead venga visualizzato nel Front End e assicurati anche di registrare un foglio di stile dell’editor in modo che il codice venga visualizzato nell’editor (puoi usarlo add_editor_style()per farlo).

.lead {
    font-size: 120%;
}