Personalizzare stili Editor WordPress

4 minuti di lettura

Se anche tu usi WordPress per il tuo blog, sicuramente ti sarai accorto che quello che vedi mentre scrivi nell’editor non sempre corrisponde a ciò che appare poi online. Ti sarà capitato di sistemare i paragrafi o le immagini con cura, pubblicare l’articolo… e accorgerti che sul sito tutto sembra diverso. Font, spazi, titoli, colori: a volte sembra quasi di guardare due mondi paralleli. Ma tranquillo, non è un bug — è semplicemente il modo in cui WordPress gestisce gli stili interni ed esterni. In questo articolo ti spiego come personalizzare gli stili dell’editor per farli combaciare con il tema del tuo sito, così da scrivere sapendo esattamente come apparirà il tuo post ai lettori.

Perché dovresti personalizzare gli stili dell’editor

Molti utenti di WordPress ignorano completamente la possibilità di personalizzare gli stili dell’editor. È comprensibile: per abitudine o pigrizia, si scrive il testo come se si fosse su Word o Google Docs, senza preoccuparsi troppo dell’aspetto visivo. Ma in realtà questa funzione, introdotta fin dalla versione 3.0 di WordPress, è un’arma segreta per chi vuole scrivere in modo più professionale e coerente con il design del proprio sito.

Immagina di poter vedere nell’editor gli stessi caratteri, colori e spazi che vedranno i tuoi lettori. Niente più anteprime continue o pagine aggiornate ogni due minuti: puoi impaginare il tuo post direttamente dentro l’editor, mantenendo uno stile ordinato e fedele al front-end.

personalizzare stili nell'Editor WordPress

Un po’ di storia: prima e dopo la versione 3.0

Fino a qualche anno fa, quando l’editor di WordPress era più “rigido”, l’unico modo per capire come appariva davvero un articolo era salvare e aggiornare la pagina pubblicata. Gli stili visivi del front-end si trovano infatti nel file style.css del tema, mentre l’editor usa i suoi stili interni, contenuti nel core di WordPress. Risultato: due mondi separati, spesso molto diversi tra loro.

Guarda questo esempio. Nell’immagine qui sotto, l’editor di WordPress utilizza caratteri della famiglia Serif, mentre il front-end del tema usa font Sans Serif. Il contrasto è evidente e può rendere più difficile impaginare i contenuti in modo preciso.

differenze stili editor e front-end WordPress

Per fortuna, dalla versione 3.0 in poi, WordPress ha introdotto la possibilità di personalizzare gli stili dell’editor, rendendo finalmente possibile uniformare ciò che scrivi a ciò che pubblichi.

Come aggiungere la funzione Editor Styles

Il cuore di tutto è la funzione add_editor_style(). Serve a dire a WordPress quale foglio di stile usare dentro l’editor. In pratica, puoi creare un file CSS dedicato solo all’editor — ad esempio editor-style.css — e poi “attivarlo” aggiungendo una riga di codice al file functions.php del tuo tema.

add_editor_style('editor-style.css');

Nel file editor-style.css andrai a inserire solo le regole base per testi, titoli, link e immagini. Non serve ricreare tutto da zero: puoi partire da uno stile già pronto, come quello del tema Twenty-Fourteen, e modificare le parti che ti interessano. Ecco un esempio di regola utile per limitare la larghezza dell’area di scrittura:

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

Una volta salvato, noterai subito la differenza: l’articolo apparirà nell’editor esattamente come sul sito. Potrai allineare le immagini, controllare le spaziature e avere un’anteprima realistica senza dover mai uscire dall’editor.

confronto stili editor WordPress

Personalizzare stili per i Post Types

Un’altra chicca che pochi conoscono riguarda i Post Types. Oltre ai classici “Articoli” e “Pagine”, WordPress ti permette di creare tipi di contenuto personalizzati, come “Prodotti”, “Eventi” o “Portfolio”. E anche per questi puoi avere stili dedicati nell’editor!

Il trucco sta nel dire a WordPress di caricare un foglio di stile diverso a seconda del tipo di post che stai modificando. Ecco come farlo aggiungendo questo codice nel tuo functions.php:

function aggiungi_stile_editor_mio_template() {
  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' );

A questo punto, nella cartella del tema crea un file per ogni tipo di post, rispettando la convenzione editor-style-{post_type}.css. Ad esempio:

editor-style-post.css per gli articoli classici
editor-style-page.css per le pagine statiche
editor-style-portfolio.css per un custom post “Portfolio”

Così, ogni tipo di contenuto avrà un aspetto coerente nell’editor, in base al layout previsto dal tuo tema. È una soluzione perfetta per i siti complessi o per chi vuole avere il pieno controllo dell’esperienza di scrittura.

Per ulteriori dettagli tecnici puoi consultare la documentazione ufficiale di WordPress: WordPress.org Codex. Anche se l’interfaccia dell’editor è molto cambiata con Gutenberg e l’Editor a blocchi, il principio resta lo stesso: controllare come i tuoi contenuti appaiono già mentre li scrivi.

Bonus: usare gli stili personalizzati con l’Editor a blocchi

Con l’arrivo dell’editor a blocchi (Gutenberg), WordPress ha fatto un grande salto in avanti. Oggi puoi applicare stili personalizzati anche ai blocchi, in modo che le anteprime e l’editor riflettano davvero il design del tuo tema.

Per farlo, puoi ancora usare add_editor_style(), ma molti temi moderni includono già un file come editor-style-blocks.css. In alternativa, puoi registrare manualmente gli stili con il comando:

add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style-blocks.css' );

Questo approccio è perfetto se vuoi che i blocchi “Paragrafo”, “Titolo”, “Immagine” o “Lista” abbiano lo stesso aspetto nel backend e nel front-end. Ti evita un sacco di prove e anteprime, e rende l’esperienza di scrittura molto più fluida e realistica.

Conclusioni

Personalizzare gli stili dell’editor di WordPress è un piccolo passo tecnico che può migliorare enormemente la tua produttività e la coerenza del tuo blog. Ti permette di scrivere sapendo già come apparirà ogni dettaglio, di evitare anteprime inutili e di mantenere un aspetto professionale in tutte le pagine.

Che tu gestisca un semplice blog o un sito complesso con diversi tipi di contenuti, dedicare qualche minuto alla creazione di un editor-style.css su misura ti farà risparmiare tempo e frustrazione a lungo termine. E se vuoi spingerti oltre, prova anche a integrare gli stili personalizzati per Gutenberg: vedrai che scrivere su WordPress diventerà finalmente un’esperienza coerente, elegante e piacevole.