WP: CSS nel visual editor

Se volete tentare di usare WordPress come un editor WYSIWYGwhat you see is what you get – potete associare un foglio di stile css all’editor visuale, ovvero al modulo che serve per modificare e pubblicare articoli e pagine.

In questo modo potere dare forma e colore agli elementi di articoli e pagine, e visualizzarli come saranno anche nella pagina finita.

Farlo è basilare e semplice; basta aggiungere una riga di codice al file functions.php:

add_editor_style('style.css');

Questa sola riga farà in modo che, durante la creazione/modifica di una pagina/post, venga caricato il foglio stile di base del tema attualmente in uso.

Ovviamente, siccome le classi e gli stili all’interno dell’editor visuale sono molte e diverse, non tutto potrebbe filare liscio al primo colpo.

Io devo ancora cimentarmi in questo, ma per prima cosa suggerirei di creare uno stile ad hoc per l’editor, e di richiamare questo anziché il file css principale del tema.
Ovviamente nel file css per l’editor andremo a mettere solo le regole che ci servono in quell’ambito.

Bisogna tener presente però che WP già di suo ha un css per l’editor degli articoli, che – a seconda delle vostre necessità – sarà il caso di manomettere.

Il file in questione si chiama content.css e trova in /wp-includes/js/tinymce/themes/advanced/skins/wp_theme/

Quindi se per esempio volete applicare un ‘css reset’ sarà buona cosa disattivare completamente il file css di WP.

fonti: codex.wordpress.org , jleuze.com

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.