WordPress e il CSS non sempre vanno d’amore e d’accordo.
Pochi giorni fa mi è capitato di dover affrontare un problema all’apparenza banale su un blog che gestisco: volevo assegnare una classe CSS differente ad ognuna delle categorie dei post, in modo da ottenere background di colori diversi.
Una scelta puramente estetica, che però influenza positivamente la user experience dando modo al visitatore di associare in mezzo secondo un dato colore alla categoria corrispondente.
L’intestazione si presentava così:
E volevo che Attualità e Cultura avessero ognuna un proprio sfondo, a mo’ di etichetta, per renderle più riconoscibili e far sì che la riga di informazioni sull’articolo risultasse meno “piatta”.
Quando però ho ispezionato il codice HTML generato dalla pagina, l’elenco delle categorie aveva questa struttura:
<a href="link alla categoria" rel="category tag">Attualità</a>
<a href="link alla categoria" rel="category tag">Cultura</a>
Morale della favola: purtroppo WordPress non differenzia tra loro le categorie. Lo shortcode che viene utilizzato di solito per richiamarle, ovvero
<?php the_category()?>
si limita a restituire in HTML un elenco con l’attributo a e un generico rel=”category tag”. Nessuna differenziazione tra le diverse voci. Insomma, niente di utile allo scopo.
L’unica soluzione è quella di mettere mano proprio allo shortcode e fare in modo che generi un elenco in cui ogni voce ha una classe a sé stante.
Modificare il codice PHP
Non essendo un’esperta di PHP non è stato affatto facile trovare una soluzione al mio problema.
Dopo aver a lungo googlato senza successo, ho portato alla luce un thread di qualche anno fa dal forum di supporto di WordPress in cui viene fornita una soluzione al problema.
Primo passo: aprite l’editor del vostro tema (dal menù di sinistra Aspetto -> Editor) e trovate una qualsiasi pagina in cui compaia lo shortcode che richiama le categorie (solitamente nella pagina in cui vengono elencati i post e in single.php).
Per stilizzare le categorie occorre fare in modo che l’HTML generato dal codice PHP rispetti i seguenti requisiti:
– essere un elenco, quindi avere gli attributi <ul> e <li>
– richiamare ogni voce dell’elenco singolarmente
– avere una classe CSS generata dinamicamente tramite lo slug (abbreviazione) della categoria
Il codice che dovrete incollare al posto dello shortcode standard è il seguente:
<ul class="post-categories">
<?php
foreach((get_the_category()) as $category) {
echo '<li class="'.$category->slug . '"><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "Leggi tutti gli articoli in %s" ), $category->name ) . '" ' . '>' . $category->name . '</a></li>';
}
?>
</ul>
Salvate le modifiche e aprite la pagina che avete appena modificato. L’aspetto sarà identico a prima, ma ispezionando l’HTML ora dovreste trovare questa sintassi:
<ul class="post-categories">
<li class="attualita"><a href="link alla categoria" title="Leggi tutti gli articoli in Attualità">Attualità</a></li>
<li class="cultura"><a href="link alla categoria" title="Leggi tutti gli articoli in Cultura">Cultura</a></li>
</ul>
Il nuovo codice PHP ha richiamato una classe CSS per ogni punto dell’elenco, e tale classe ha lo stesso nome dello slug della categoria. Ora non ci resta che passare alla modifica del CSS!
Assegnare gli stili
Tornate sull’editor e aprite il file style.css.
Non dovrete fare altro che richiamare la classe li.nomecategoria a e stilizzarla a vostro piacere.
Per alcuni temi potrebbe essere necessario specificare anche altre classi, specie se le categorie sono raggruppate all’interno di diversi div e i loro attributi potrebbero sovrascrivere i vostri in quanto meno specifici. In quel caso basterà far precedere i nomi dei div genitori, ad esempio .post-data ul.post-categories li.nomecategoria a.
Ecco il mio CSS per realizzare le etichette che avevo in mente:
ul.post-categories li.cultura a {
background-color: #00CC66;
color: white;
padding: 0.3em;
}
Et voilà. Salvate, ricaricate la pagina, ed ecco il risultato:
La soluzione è semplice, veloce e molto scenografica.
Ricordate di sostituire lo shortcode in tutte le pagine in cui è presente per ottenere lo stesso effetto sull’intero sito web.
Il color power non tarda a far sentire i suoi effetti: in pochi giorni ho già registrato un aumento dei click sui link alle categorie.
La cromoterapia funziona anche online!
