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.
Indice dei contenuti
- 1 Gestione di base dei fogli di stile CSS in WordPress
- 2 Creare un tema “child”
- 3 Modificare il file style.css del tema child
- 4 Utilizzare l’editor CSS incorporato
- 5 Vantaggi e svantaggi dei due metodi
- 6 Il plugin SiteOrigin CSS
- 7 Come integrare style.css nell’editor TinyMCE
- 8 Pagine utili del Codex WordPress
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:
- accedere alla pagina di amministrazione 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 vociAspetto > Editor
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 sul’adiacente bottoneSeleziona
.
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:
- aprire il Theme Customizer di WordPress selezionando dal menu laterale della pagina di 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 bottonePubblica
(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 |
generatore di snippet per le theme features | https://generatewp.com/theme-support/ |