Se anche a voi capita molto spesso di utilizare delle formattazioni di testo particolari, o dei pulsanti all’interno dei vostri articoli allora questa guida fa al caso vostro! Oggi infatti vedremo come aggiungere stili personalizzati all’editor di WordPress.
Qualcuno potrebbe dirmi: “Dario, esiste già un plugin per aggiungere stili e formati personalizzati all’editor wordpress!”
Vero, ma perchè installare un altro plugin quando in 5 minuti e 10 righe di codice possiamo ottenere lo stesso risultato?
In precedenza abbiamo visto come creare un plugin wordpress all’interno del quale inserire tutte le funzioni per personalizzare il nostro sito evitanto che queste vengano perse cambiando tema e evitando al tempo stesso di appesantire il file functions.php. Ed è proprio all’interno del nostro plugin che andremo ad inserire il codice per aggiungere degli stili personalizzati all’editor.
AGGIUNGERE STILI PERSONALIZZATI ALL’EDITOR DI WORDPRESS
Apriamo quindi il file php del plugin creato per il nostro sito o portiamoci in Plugin->Editor per modificarlo direttamente dal pannello di amministrazione di WordPress.
La prima porzione di codice che andremo ad inserire sarà la seguente:
//Aggiungo la funzione per rivelare il pulsante styleselect sulla seconda riga dell'editor
function reveal_styleselect_button($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'reveal_styleselect_button');Analizziamo il codice per cercare di capire a cosa serve:
reveal_styleselect_button -> è il nome della funzione che verrà eseguita e che ci permetterà di mostrare un pulsante nascosto ma già definito nell’editor di wordpress. Passiamo alla funzione l’array contenente tutti i pulsanti dell’editor e aggiungiamo il pulsante nascosto styleselect affinchè venga rivelato.
A questo punto dobbiamo aggiungere i vari stili che saranno disponibili nel menu a tendina cliccando sul pulsante:
//Aggiungo le voci da mostrare nel menu a tendina
function insert_custom_styles( $init_array ) {
// Define the style_formats array
$style_formats = array(
// Each array child is a format with it's own settings
array(
'title' => 'Pulsante Nero',
'block' => 'span',
'classes' => 'pulsante-nero',
'wrapper' => true,
),
array(
'title' => 'Pulsante Verde',
'block' => 'span',
'classes' => 'pulsante-verde',
'wrapper' => true,
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'insert_custom_styles' );In questo esempio ho inserito due stili. Il primo mi permette di inserire un pulsante nero, il secondo un pulsante verde.
Pulsante Nero
Pulsante Verde
Naturalmente potremo sbizzarrirci a creare tutti gli stili di cui abbiamo bisogno. A questo indirizzo trovate la lista di tutti i parametri che potete definire nella creazione degli stili personalizzati.
Infine non ci resta che aggiungere il codice CSS.
/*PULSANTI INSERITI NELL'EDITOR*/
.pulsante-nero {
background-color:#333;
display:inline-block;
cursor:pointer;
color:#ffffff;
padding:6px 24px;
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
}
.pulsante-verde {
background-color:#689200;
display:inline-block;
cursor:pointer;
color:#ffffff;
padding:6px 24px;
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
}Questo codice CSS va aggiunto sia al foglio di stile del tema o del child-theme che stiamo utilizzando sia al file editor-style.css. Quest’ultimo file potrebbe essere presente nella cartella del nostro tema ma nel caso in cui non ci fosse possiamo provvedere alla sua creazione e caricamento nella cartella principale del tema. In quest’ultimo caso però dovremo aggiungere una nuova funzione che avrà il compito di caricare questo foglio di stile:
//Carico il file CSS contentente il codice per lo stile delle voci aggiunte all'editor
function my_theme_add_editor_styles() {
add_editor_style( 'stili-personalizzati-editor.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );Come potrete notare non è obbligatorio chiamare il file editor-style.php, nel mio caso ho scelto di chiamarlo stili-personalizzati-editor.css.
Per qualsiasi dubbio lasciate pure un commento.
