[WordPress] – Usare stili CSS diversi in Pagine e Articoli

In questo articolo andremo a vedere come poter utilizzare uno o più fogli di stile CSS, diversi da quello principale, da poter assegnare a pagine e articoli di WordPress a nostra scelta, attraverso l’uso dei “Campi Personalizzati”.

Per spiegarvi meglio come poterlo fare, ci serviremo di un esempio pratico: supponiamo di voler assegnare 3 CSS diversi da quello principale a 3 pagine ben precise. Per semplicità, nei 3 CSS aggiuntivi, andremo a modificare solo il colore di sfondo del menù di navigazione, ma capite bene che le modifiche attuabili allo stile della pagina attraverso questa modalità ci permetterebbe di fare modifiche ben più importanti di questa in esempio. Partiamo dalla nostra Home, dove abbiamo un menù di navigazione che si presenta con il seguente colore di sfondo:

Ora supponiamo di avere 3 pagine a nostra scelta in cui vogliamo modificare lo sfondo del menù, dovremo andarci a creare 3 CSS separati, uno per ogni pagina, dove andremo a riportare le modifiche da effettuare allo stile di ogni singola pagina, nel nostro caso modificheremo solo il colore di sfondo del menù di navigazione. Supponiamo di voler fare una pagina con il menù giallo, una con il menù azzurro ed una con il menù rosa, il contenuto dei 3 file CSS da creare sarà il seguente:

stile-giallo.css

.main-navigation {
clear: both;
display: block;
float: left;
text-transform: uppercase;
width: 100%;
min-height: 40px;
border-radius: 20px 0 0 0;
background: #FFE100; /* COLORE GIALLO */
position: relative;
}

stile-azzurro.css

.main-navigation {
clear: both;
display: block;
float: left;
text-transform: uppercase;
width: 100%;
min-height: 40px;
border-radius: 20px 0 0 0;
background: #00FFC8; /* COLORE AZZURRO */
position: relative; }

stile-rosa.css

.main-navigation {
clear: both;
display: block;
float: left;
text-transform: uppercase;
width: 100%;
min-height: 40px;
border-radius: 20px 0 0 0;
background: #FF00F5; /* COLORE ROSA */
position: relative; }

A questo punto dobbiamo fare in modo che il nostro tema WordPress gestisca una variabile PHP, che chiameremo $stylesheet, in cui andremo ad inserire l’url dei nostri stili CSS aggiuntivi attraverso la creazione di un apposito “Campo Personalizzato“. Andiamo per gradi iniziando con l’aggiungere un semplice codice PHP nei tag del file header.php del nostro tema in uso. Il codice è il seguente:

ID, 'stylesheet', false);
if ($stylesheets) {
    foreach($stylesheets as $stylesheet) {
    echo(
        "" .
        "\n"
    );
    }
}
?>

Come si intuisce dal codice, volendo, potremmo addirittura inserire più di un CSS per ogni singola pagina o articolo, in ogni caso, il codice inserito nell’head del file header.php si presenterà in questo modo:

A questo punto non ci resta che: salvare le modifiche a header.php, caricare i file CSS aggiuntivi sul nostro spazio web, andare nell’editor delle pagine in cui ci interessa inserire rispettivamente uno dei 3 CSS aggiuntivi e creare un Campo Personalizzato dal nome stylesheet. Come si vede nella figura che segue, basterà inserire l’url del nostro CSS aggiuntivo nel Campo Personalizzato, salvare la pagina, ed il gioco è fatto!

Ripetiamo l’operazione per le altre due pagine restanti in cui andremo ad inserire il link ai file stile-azzurro.css e stile-rosa.css, il risultato che otterrò navigando nelle tre pagine in cui ho aggiunto i 3 CSS aggiuntivi sarà il seguente: