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!