Personalizzare stili Editor WordPress

Se anche tu usi WordPress per il tuo blog, sicuramente ti sarai accorto della differenza di stili tra l’editor interno e le pagine esterne. Questo è normale se pensi che WordPress ti permette di personalizzare la grafica esterna attraverso i template grafici. Ognuno di questi template infatti può avere stili anche molto diversi dall’editor interno ed è difficile scrivere un post senza sapere come apparirà al lettore. Allora come fare per personalizzare stili nell’editor in modo che rispecchino il template? Te lo spiego subito.

Gli stili dell’editor vengono trascurati dalla maggior parte degli utilizzatori, perché per abitudine o pigrizia, preferiscono modificare i testi come se si trovassero davanti ad un programma di videoscrittura. Ma questa importantissima caratteristica introdotta dalla versione 3.0 aiuta a scrivere post ordinati con poco sforzo mantenendo un layout grafico ordinato e ben integrato con l’aspetto generale del template.

Prima della versione 3.0, dove sono stati introdotti gli stili nell’editor, era necessario aggiornare la pagina esterna per vedere come appariva l’articolo dopo le modifiche. Questo perché gli stili del front-side sono contenuti nel file styles.css del tema, mentre gli stili dell editor sono contenuti nel core di WordPress.

Come puoi vedere dall’immagine qui sotto, l’editor di WordPress utilizza i font della famiglia Serif, mentre il front-side utilizza caratteri Sans Serif.

Dalla versione 3.0 in poi WordPress ti permette di personalizzare stili nell’editor per farli combaciare con quelli del tema in uso. Ecco come.

Aggiungere la funzione Editor Styles

Gli stili dell’editor possono essere aggiunti con la funzione add_editor_style (). È necessario creare un foglio di stile separato per l’editor diverso dal foglio di stile predefinito. Se chiamiamo questo stile editor-style.css, il comando da aggiungere al file functions.php del tema è questo.

add_editor_style('editor-style.css');

Questo foglio di stile dovrà contenere solo gli stili degli elementi da utilizzare nel post come paragrafi, intestazioni, link e immagini. Per evitare di doverlo scrivere da zero andando alla ricerca dei nomi delle classi css utilizzare dall’editor, ti consiglio di copiare uno stile già pronto (ad esempio l’editor.style.css del template Twenty-Fourteen) e modificare le parti che ti interessano:

html .mceContentBody {
max-width: 640px;
padding: 10px;
}

Come puoi vedere nell’immagine ora l’articolo nell’editor ha lo stesso stile dell’articolo in  front-side, e risulta decisamente più comodo impaginare il contenuto.

Personalizzare stili nei Post Types

Dalla versione 3.0 WordPress ti permette di creare Post Types diversi da quelli di default, da utilizzare per particolari tipi di contenuti. Come sai sicuramente i tipi predefiniti in WordPress sono Articoli e Pagine. Utilizzando i nuovi Post Types, puoi crearne nuovi come ad esempio Prodotti o Portfolio  e puoi aggiungere uno stile per l’editor aggiungendo al file functions.php del tuo template il seguente codice.

function aggiungi_stile_editor_mio_tmplate() {
global $post;
$post_type = get_post_type( $post->ID );
$editor_style = 'editor-style-' . $post_type . '.css';
add_editor_style( $editor_style );
}
add_action( 'pre_get_posts', 'aggiungi_stile_editor_mio_template' );

Ora nella cartella del template, crea il foglio di stile mantenendo la seguente convenzione per il nome editor-style-{post_type}.css. In questo modo verrà caricato automaticamente nell’editor del tuo nuovo Post Type il foglio di stile di riferimento. Per una descrizione dettagliata di questa utilissima caratteristica dell’editor ti consiglio di dare un’occhiata al sito di riferimento WordPress.org Codex.