Aggiungere stili personalizzati all’editor di WordPress

Hai presente la tendina “Formati” che vedi nella barra dei comandi avanzati dell’editor visuale di WordPress? Ops, forse non la vedi più e ti starai chiedendo dov’è finita? Facciamo un passo alla volta.  Premetto che la breve guida seguente va seguita in assenza di plugin installati come Ultimate TinyMCE, in quanto sarebbe piuttosto insensato 🙂

Innanzitutto la prima cosa da fare è andare nel file functions.php e dire a WordPress di mostrare la tendina incriminata con la quale mostrare gli stili personalizzati. Per farlo copiamo pari pari quanto segue:

// Aggiungiamo il Menu a Tendina degli stili nella seconda riga dell'editor visuale
function my_mce_buttons_2($buttons){
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

A questo punto però ci vorranno mostrate esclusivamente le classi di stile predefinite. Andiamo quindi a vedere come fare per creare gli stili personalizzati. A livello di codice è piuttosto semplice. Copiamo ed incolliamo quanto segue (sostituendo l’elenco delle classi con quelle che vogliamo):

function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(  
        // Each array child is a format with it's own settings
        array(  
            'title' => 'Highlight',  
            'inline' => 'span',  
            'classes' => 'highlight',
            'wrapper' => true
        ),
        array(  
            'title' => 'View More',  
            'inline' => 'span',  
            'classes' => 'view-more',
            'wrapper' => true
        )
    );  
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  
    
    return $init_array;  
  
}

Nella nostra tendina appariranno le classi “Bottone1 e Bottone2”. Ora dobbiamo creare un file .css apposta che permetterà di vedere in anteprima nell’editor visuale (ed anche nella tendina) lo stile desiderato.  Aggiungiamo, sempre al file functions.php, la seguente riga:

add_editor_style('custom-editor-style.css');

E salviamo un file nominato custom-editor-style.css dentro alla root del nostro tema (dove si trova style.css per intenderci). Dentro a questo files andiamo a definire le due classi “bottone-1 e bottone-2”, per esempio assegnando due colori differenti.

A questo punto, ricopiamo le regole scritte dentro a style.css (per poter vedere realmente sul sito lo stile), ed il gioco è fatto!