Tutti i temi per WordPress, salvo forse qualche rara eccezione, permettono di inserire del proprio codice CSS nella schermata Personalizza o, a volte, in altre pagine di amministrazione. Più raramente si trova la possibilità di scrivere del codice CSS da applicare non a tutto il sito ma, ad esempio, solo a delle specifiche pagine, solo agli articoli, a custom post type, ecc. Eppure potremmo avere questa esigenza, soprattutto se si vuole stilizzare le pagine istituzionali (es. Chi siamo, Servizi, Contatti, ecc.) in modo differente dagli articoli di un blog. Come possiamo fare?
In questo articolo vengono spiegate 3 modalità: la prima consiste nell’installare un plugin, le altre due prevedono di usare codice Php, sfruttando le API di WordPress.
Installare il plugin Header Footer Code Manager
Header Footer Code Manager (d’ora in poi HFCM) è un plugin che permette di creare degli snippet HTML, CSS, JavaScript da stampare in tutto il sito, in specifici post o in determinati tipi di contenuto.
La procedura di installazione è la solita poiché il plugin è presente nel repository di WordPress.
Una volta attivato, nella barra nera a sinistra dell’area di amministrazione, sarà presente la voce HFCM; cliccandoci sopra verrà caricata la schermata con tutti gli snippet creati (va da sé che la prima volta non ce ne saranno). Per crearne uno nuovo basta cliccare su Add new snippet (vedi screenshot).
Anzitutto bisogna settare una serie di parametri:
- Snippet Name → Nome dello snippet; può essere dato a piacimento, naturalmente è consigliato scegliere una denominazione che faccia capire dove viene applicato (per esempio CSS Articoli o qualcosa del genere).
- Snippet Type → Tipo di snippet, può essere HTML, CSS o JavaScript; qui ho scelto HTML per poter inserire qualsiasi tipo di codice.
- Site Display → Stabilisce per quali tipi di contenuti servirà lo snippet. Per stamparlo in ogni articolo va selezionato Specific Post Types (Archive & Posts).
- Post types → Questa voce compare perché Site display è stato valorizzato con Specific Post Types (Archive & Posts). Bisogna selezionare su quali tipi di post verrà applicato lo snippet, in questo caso post (articoli).
- Location → È stata selzionata Header, quindi l’output dello snippet avverrà nella parte head della pagina HTML.
- Device Display → Si può scegliere su tutti i dispositivi, oppure solo su desktop o solo su mobile; in questo caso è stato selezionato Show on All Devices.
- Status → Inactive o Active. Quando è Inactive lo snippet non viene stampato.
Sotto la sezione dei parametri compare l’editor in cui scrivere il codice; dal momento che Snippet Type è settato ad HTML, per inserire il codice CSS inline si userà il tag <style>. Naturalmente è possibile integrare un foglio di stile separato usando il tag <link>.
Una volta salvate tutte le impostazioni le regole di stile verranno applicate solo per gli articoli. Il codice CSS usato in questo articolo lo trovi nel paragrafo dove si parla dell’hook wp_head.
Qualora le stesse regole venissero applicate anche alle pagine di archivio, mentre si vuole stilizzare solo il singolo articolo, utilizzare i selettori CSS. Nella pagina del singolo articolo il <body> ha la classe single, mentre nella pagina di archivio il <body> ha la classe archive.
Una bella funzione di questo plugin è la possibilità di esportare e importare gli snippet: è disponibile cliccando la voce Tools nel menù HFCM nella barra nera a sinistra.
Soluzioni via codice
Se non si ha voglia di installare un plugin si può ottenere lo stesso risultato via codice. Qui vengono illustrate due modalità in cui si sfruttano gli action hook di WordPress mediante la funzione add_action().
Per far eseguire a WordPress del codice Php ci sono due modi:
- scriverlo nel file functions.php di un tema child;
- creare un plugin custom.
Hook wp_head
wp_head permette di aggiungere del codice HTML all’interno della sezione head della pagina. Nell’esempio di questo articolo è stato usato così:
add_action('wp_head','articles_css_inline');
articles_css_inline è il nome della funzione che produce l’output del nostro snippet.
function articles_css_inline(){ //is_single() verifica che viene caricato un singolo post //get_post_type restituisce il tipo del post corrente //nell’if si verifica che il loop stia caricando un singolo post e che sia di tipo post (articolo) if( is_single() && get_post_type() == 'post' ){ ?> <!-- css solo per articoli --> <style> h1 { font-weight: bold; font-size: 30px; } h2 { font-size: 20px; font-weight: 600; } h3 { font-size: 18px; font-weight: 600; } blockquote { font-size: 1em; } </style> <?php } }
La condizione verificata nell’if assicura che il codice sia stampato in un singolo post di tipo articolo.
Nel codice HTML è presente un commento: sarà utile per cercare questo snippet nel sorgente pagina del browser.
Ovviamente è possibile mettere il codice CSS in un foglio di stile separato e collegarlo col tag <link> ma per questa opzione è meglio usare il metodo che segue.
Hook wp_enqueue_scripts
WordPress, in genere, non stampa immediatamente i tag <link> e <script> per allegare alle pagine fogli di stile e codice JavaScript, bensì prima accoda tutti gli assets e solo in un secondo momento produce l’output dei tag necessari. In questo modo è possibile allegare uno script dopo un’altro specifico (ad esempio un JavaScript che necessita di JQuery per essere eseguito può essere fatto precedere da JQuery, in genere già fatto accodare dal tema in uso).
Con wp_enqueue_scripts è possibile inserire un proprio foglio di stile tra questi script, mentre non è possibile stampare CSS inline.
add_action('wp_enqueue_scripts','articles_css');
Anche qui articles_css è la funzione che WordPress chiama quando esegue questo gancio.
function articles_css_inline(){ //is_single() verifica che viene caricato un singolo post //get_post_type restituisce il tipo del post corrente //nell’if si verifica che il loop stia caricando un singolo post e che sia di tipo post (articolo) if( is_single() && get_post_type() == 'post' ){ wp_enqueue_style('articles-css' , plugins_url('assets/css/articles.css', __FILE__)); } }
Anche in questo caso ci si assicura che WordPress stia caricando un singolo post di tipo articolo: se è così viene chiamata la funzione wp_enqueue_style(), la quale si occupa di accodare, tra gli script, il foglio artciles.css, assegnandoli un id passato nel primo parametro (questo valore è utile quando si vuole far accodare un altro script dopo questo specifico).
Qui il file sarà presente in assets/css/ dentro la cartella di un plugin creato appositamente.
Cosa fare se le regole CSS non hanno effetto sulla renderizzazione
Purtroppo può capitare che le proprie regole CSS siano presenti nel sorgente pagina ma l’aspetto di uno o di più elementi interessati non cambia. Questo problema dipende, quasi sempre, dal tema attivo e può essere legato a uno o più fattori, tra cui:
- Il proprio codice CSS viene stampato prima di quello del tema: in questo caso le regole di quest’ultimo “avranno la meglio”.
- Gli elementi in questione, nel CSS del tema, sono selezionati con dei selettori più forti. Spesso, usando la console per sviluppatori, si notano selettori tipo #id_di_un_elemento .classe_di_child .classe_di_un_child_di_un_child .classe_elemento. Le regole così scritte vincono su quelle applicate allo stesso elemento selezionato, ad esempio, con .classe_elemento.
Il secondo caso è quello più critico; quel tipo di regole sono difficili da sovrascrivere anche inserendone altre successivamente. Bisogna trovare un selettore ancora più forte o si può ricorrere all’istruzione !important (sperando che non sia presente nelle dichiarazioni da sovrascrivere e, comunque, va usata con parsimonia). È necessario fare diversi tentativi usando la console.
Invece nel primo caso la soluzione è più semplice, bisogna fare in modo che il codice custom sia stampato dopo quello del tema.
Se è stato usato il plugin HFCM non si può fare molto perché è impossibile decidere in quale punto lo snippet verrà stampato. Rimane quindi l’opzione del codice.
add_action accetta un terzo parametro, un intero con cui definire se la funzione agganciata deve essere eseguita prima o dopo. Più il numero è alto più tardi la funzione verrà chiamata; quindi per far arrivare il proprio CSS dopo quello del tema si può mettere un numero altissimo. Qui sono riportati gli esempi con wp_head e wp_enqueue_scripts.
add_action('wp_head','articles_css_inline',100000); add_action('wp_enqueue_scripts','articles_css',100000);
Se nulla è cambiato nella renderizzazione a video, nonostante tutte le regole arrivino con la giusta successione, potrebbe verificarsi il problema dei selettori CSS usati dal tema. Se, invece, il proprio CSS viene ancora stampato troppo presto, è possibile alzare ulteriormente il valore del terzo parametro.