CSS in WordPress: come aggiungere il proprio codice

Questo articolo descrive come  inserire codice personalizzato CSS in  WordPress. Presuppone che il lettore sia già in possesso delle nozioni di base su WordPress (compresi i concetti di theme e plugin) ed i fogli di stile CSS.

Gestione di base dei fogli di stile CSS in WordPress

Quando si è in visualizzazione di un post di WordPress, il layout della pagina  è affidato al foglio di stile “style.css” presente nella cartella principale del tema in uso. Ad esempio, in una installazione di WordPress che utilizza il tema predefinito “Twenty Seventeen”, il file style.css sarà contenuto nel percorso: /wp-content/themes/twentyseventeen/

Quando si è in modifica di un post, invece, la sua formattazione è demandata al foglio di stile editor-style.css che nel tema predefinito è collocato nel percorso: wp-content/themes/twentyseventeen/assets/css/

Se si desidera aggiungere il proprio codice CSS ad una pagina WordPress, in linea teorica si potrebbero modificare direttamente questi file. In pratica, però, ad ogni eventuale aggiornamento del tema, le modifiche apportate ai suoi file verrebbero sovrascritte dalla nuova versione. Per ovviare a questo problema, WordPress mette a disposizione il meccanismo del tema “child”: usando questo tema personalizzato, è possibile aggiungere i propri file CSS alla cascata dei fogli di stile.

Creare un tema “child”

La guida ufficiale di WordPress per gli sviluppatori (il “Codex”) contiene una pagina in lingua italiana che descrive come creare un tema child . Al termine di questa procedura nella cartella principale del tema personalizzato saranno disponibili i file functions.php e style.css.

Tra questi due file c’è una differenza: mentre il primo viene anteposto al corrispondente file del tema principale (“tema parent”), il secondo viene caricato da WordPress al posto di quello principale. Per evitare di dover riscrivere nel foglio di stile child tutte o quasi le regole del foglio di stile parent, quest’ultimo dev’essere inglobato nella cascata. WordPress sconsiglia di inserire nel foglio di stile “child” una regola CSS @import che richiami il foglio di stile “parent” e indica invece di inserire nel file functions.php il seguente codice:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

In questo modo, WordPress caricherà entrambi i fogli di stile: prima quello del tema parent e poi quello del tema child, in modo che le regole inserite in quest’ultimo possano eventualmente sovrascrivere quelle presenti nel file originale.

Modificare il file style.css del tema child

Per modificare il file style.css del tema child, si deve:

1. accedere alla pagina di amministrazione e selezionare dal menu laterale le voci:  Aspetto > Editor

   

2. se si utilizza WordPress multisite si dovranno invece selezionare dal menu superiore le voci: I miei siti > Gestione network > Bacheca e poi le voci Aspetto > Editor nel menu laterale

   

3. selezionare il proprio tema child nel menu a tendina della opzione Selezionare il tema da modificare: in alto a destra nella pagina e cliccare sul’adiacente bottone Seleziona.

A questo punto è possibile inserire le regole CSS e salvare le modifiche cliccando sul bottone Aggiorna file in basso a sinistra nella pagina.

Utilizzare l’editor CSS incorporato

In alternativa al foglio di stile del tema child, è possibile inserire codice CSS personalizzato tramite l’editor CSS incorporato di WordPress. Per accedere all’editor si deve:

1. aprire il Theme Customizer di WordPress selezionando dal menu laterale della pagina di amministrazione le voci:  Aspetto > Personalizza


   

2. sul menu laterale del pannello Personalizza aprire l’editor CSS selezionando la voce CSS aggiuntivo ed inserire le regole CSS direttamente nell’editor

   

3. Salvare le modifiche cliccando sul bottone Pubblica in alto.  Cliccando sull’icona   a fianco del bottone Pubblica (icona che compare solo dopo aver fatto almeno una modifica al CSS) è possibile salvare una bozza delle modifiche o pianificarne la pubblicazione.

L’editor incorporato introduce il CSS personalizzato direttamente nella pagina HTML, come foglio di stile incorporato (con l’attributoid="wp-custom-css"), subito prima del tag di chiusura dell’elemento HTML head.

Vantaggi e svantaggi dei due metodi

I due metodi illustrati offrono vantaggi e svantaggi:

Metodo	Vantaggi	Svantaggi
style.css nel tema child	Il file style.css può essere richiamato anche in modifica dell’articolo (oltre che in visualizzazione), in modo da ottenere una corretta anteprima dell’articolo.	Per vedere l’effetto della modifica bisogna spostarsi sulla pagina interessata e ricaricarla.
editor CSS incorporato di WordpPress	Le modifiche applicate vengono visualizzate immediatamente nella pagina che occupa la parte destra dello schermo.	Se in modifica dell’articolo si vuole ottenere una esatta anteprima dello stile CSS, le variazioni devono essere duplicate nel file editor-style.css

Un buon compromesso tra i due metodi può essere quello di testare il CSS personalizzato utilizzando l’editor incorporato e, una volta raggiunto l’effetto desiderato, tagliare il codice CSS e incollarlo nel file style.css del tema child.

Il plugin SiteOrigin CSS

In WordPress sono disponibili dei plugin che permettono di inserire CSS personalizzato. Tra questi si distingue, con oltre 200.000 installazioni attive, il plugin di SiteOrigin SiteOrigin CSS . Questo plugin permette la visualizzazione in tempo reale delle modifiche inserite (come l’editor CSS incorporato) e fornisce altre comode funzioni, come la possibilità di cliccare sul punto della pagina che si vuole personalizzare ed ottenere in automatico il selettore della regola CSS. Le modifiche vengono salvate nel file
wp-content/uploads/so-cc/so-css-nome_del_tema.css che viene aggiunto automaticamente alle pagine di WordPress come foglio di stile esterno.

Anche in questo caso è possibile tagliare il codice CSS stabile e incollarlo nel file style.css del tema child.

Come integrare style.css nell’editor TinyMCE

Per aggiungere il file style.css ai fogli di stile utilizzati dall’editor TinyMCE di WordPress si deve inserire la seguente riga di codice nel file functions.php (del tema child):

add_editor_style( 'style.css' );

Se si vuole aggiungere anche l’eventuale file generato dal plugin SiteOrigin CSS il codice diventa (nel caso del tema Twenty Seventeen):

add_editor_style( 
    array( 
      'style.css', 
       '../../uploads/so-css/so-css-twentyseventeen.css'
    )
);

Per gli sviluppatori di temi (parent) WordPress, l’aggiunta di file CSS all’editor TinyMCE è un po’ più complessa, perché bisogna prevedere che l’utilizzatore del tema sviluppi un tema child. Per approfondimenti vedere i link alle pagine del Codex nel prossimo paragrafo.

Pagine utili del Codex WordPress

Argomento	Pagina del Codex
cosa sono le theme features	https://codex.wordpress.org/Theme_Features
la theme feature Editor Style	https://codex.wordpress.org/Editor_Style
funzione add_editor_style	https://developer.wordpress.org/reference/functions/add_editor_style/
funzione apply_filters( 'mce_css', string $stylesheets )	https://developer.wordpress.org/reference/hooks/mce_css/ https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_css (in questa pagina vedere anche i paragrafi “See also” e “Related”)
generatore di snippet per le theme features	https://generatewp.com/theme-support/