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.

You can add images to your comment by clicking here.