Come inserire CSS aggiuntivo in WordPress

Tra i diversi metodi che si possono utilizzare per inserire codice personalizzato CSS in  WordPress, quello che preferisco è quello di creare un tema child ed inserire le regole CSS nel file style.css. Vediamo come fare.

Due parole sui file CSS usati da WordPress

Quando si è in visualizzazione di una pagina WordPress, la sua formattazione è affidata 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 “Twenty Seventeen”, il file style.css sarà contenuto nel percorso: /wp-content/themes/twentyseventeen/.

Quando si è in modifica di una pagina, invece, la sua formattazione è demandata al foglio di stile editor-style.css che nel tema “Twenty Seventeen” è collocato nel percorso: wp-content/themes/twentyseventeen/assets/css/.

Se si desidera aggiungere il proprio codice CSS in WordPress, in linea teorica si potrebbero modificare direttamente questi due file. In pratica, però, ad ogni 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, che permette la creazione un ulteriore file style.css.

---

Metodo 1: utilizzare il 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 figlio 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:

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

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 utilizzando il theme editor di WordPress

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

• accedere alla bacheca dell’amministratore e selezionare dal menu laterale le voci:  Aspetto > Editor

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

• selezionare il proprio tema child nel menu a tendina della opzione Selezionare il tema da modificare: in alto a destra nella pagina e cliccare sull’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.

Integrare il file style.css del tema child nell’editor Gutenberg

Per vedere applicate le regole CSS personalizzate mentre si è in modifica della pagina, si deve aggiungere il file style.css ai fogli di stile utilizzati dall’editor Gutenberg di WordPress. A tal fine inserire il seguente codice nel file functions.php del tema child:

function my_gutenberg_css(){
	 add_theme_support( 'editor-styles' ); 
	 add_editor_style( 'style.css' );
 }
 add_action( 'after_setup_theme', 'my_gutenberg_css' );

Pagine utili del Codex WordPress

Per un approfondimento sulle funzioni add_theme_support() e add_editor_style() fare riferimento alle seguenti pagine del Codex:

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/
generatore di snippet per le theme features	https://generatewp.com/theme-support/

Pro e contro del metodo 1

• pro:
  • l’utilizzo del tema child è una best practice per la personalizzazione dei temi di WordPress;
  • è possibile vedere le regole CSS personalizzate non solo in visualizzazione, ma anche in modifica della pagina (editor Gutenberg).
• contro:
  • per vedere l’effetto delle modifiche si deve salvare il file style.css e ricaricare la pagina interessata.

---

Metodo 2: Utilizzare l’editor CSS incorporato in WordPress

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:

• aprire il Theme Customizer di WordPress selezionando dal menu laterale della bacheca dell’amministrazione le voci:   Aspetto > Personalizza;

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

• 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’attributo id="wp-custom-css"), subito prima del tag di chiusura dell’elemento HTML head.

Pro e contro del metodo 2

• pro:
  • le modifiche applicate vengono visualizzate in tempo reale nell’anteprima visualizzata nella parte destra dello schermo; in questo modo è possibile controllare l’effetto delle modifiche prima di renderle definitive;
  • possibile salvare una bozza delle modifiche o pianificarne la pubblicazione;
• contro:
  • Le modifiche vengono salvate nel database, con un appesantimento dei tempi di visualizzazione della pagina;
  • all’interno dell’editor Gutenberg le modifiche non saranno visibili;
  • le modifiche sono legate la tema.

---

Metodo 3: utilizzo del blocco html personalizzato di Gutenberg

Se si deve aggiungere codice CSS personalizzato solo su una singola pagina costruita con l’editor Gutenberg, è possibile inserire inserire un blocco html personalizzato e collocare il codice CSS nel blocco, all’interno dei tag <style></style>.

Il codice CSS viene inserito come CSS incorporato, nel punto in cui è stato inserito il blocco di HTML personalizzato.

Pro e contro del metodo 3

• pro:
  • il codice CSS viene incorporato solo nella pagina in cui serve;
• contro:
  • il metodo “sporca” l’HTML, in quanto il codice CSS viene inserito nella sezione <body> della pagina, anziché nella sezione <head>.

---

Metodo 4: utilizzo di un plugin

In WordPress sono disponibili diversi plugin che permettono di inserire CSS personalizzato. Tra questi cito 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.

Integrare il foglio di stile generato dal plugin nell’editor Gutenberg

Per integrare il file generato dal plugin SiteOrigin CSS nell’editor Gutenberg, inserire il seguente codice nel file functions.php (facendo riferimento al tema Twenty Seventeen):

function my_gutenberg_css(){
    add_theme_support( 'editor-styles' ); 
    add_editor_style( 
        array( 
           'style.css', 
           '../../uploads/so-css/so-css-twentyseventeen.css'
        )
    );
 }
 add_action( 'after_setup_theme', 'my_gutenberg_css' );

Pro e contro del metodo 4

• pro:
  • le modifiche applicate vengono visualizzate in tempo reale (come l’editor CSS incorporato del metodo 2);
  • il plugin offre funzionalità aggiuntive;
  • il CSS Personalizzato viene mantenuto anche se si cambia tema;
• contro:
  • appesantimento dei tempi di visualizzazione della pagina (come per ogni plugin installato)