L’enorme sviluppo e diffusione di WordPress è legato in parte anche all’ampia flessibilità che il sistema permette, sia per quanto riguarda il comportamento sul codice, sia per l’estetica.

Uno dei problemi per cui mi è stato chiesto aiuto riguarda la possibilità di modificare l’header di un tema WordPress di modo che risultasse differente per ogni pagina o particolare sezione.
La questione può sembrare complessa, ma in realtà è estremamente semplice se si ha un po’ di pazienza e la giusta documentazione a disposizione.

Per prima cosa dobbiamo capire cosa andremo a modificare e come estrapolarlo dal comportamento standard del tema; per fare questo dobbiamo semplicemente segnarci gli ID con cui vengono identificate le pagine di cui vogliamo cambiare l’header.
Quindi andate sul link di riferimento alla pagina e visionate sul browser, in basso a sinistra, il numero che la identifica.

ID della PaginaCome si può intuire facilmente ogni pagina e categoria avrà un suo “numero identificativo”, e noi andremo a sfruttare proprio questa caratteristica per abbinare ad ogni pagina uno specifico CSS che controllerà l’header e quindi di conseguenza anche l’immagine contenuta.

Dobbiamo quindi creare all’interno della directory del nostro tema una bella cartella denominata CSS e al suo interno salveremo tutti i fogli di stile che vogliamo, giusto per avere un maggiore ordine.

Ora passiamo a lavorare sull’header; in quasi la totalità dei temi per WordPress il file header.php contiene le porzioni di codice necessarie per controllarne il comportamento, quindi andremo ad aprire il file header.php con il nostro editor.

All’interno di questo file andiamo ad incollare le porzioni di codice che utilizzano i Tag Condizionali per selezionare i vari CSS, una cosa simile a questa:

<!-- Cambio header in base alla pagina -->
<!--?php if (is_page('4')) { ?-->
	<link href="<?php bloginfo('template_directory'); ?>/css/about.css" rel="stylesheet" type="text/css" />
<!--?php } else if (is_page('6')) { ?-->
	<link href="<?php bloginfo('template_directory'); ?>/css/servizi.css" rel="stylesheet" type="text/css" />
<!--?php } else if (is_page('8')) { ?-->
	<link href="<?php bloginfo('template_directory'); ?>/css/tariffe.css" rel="stylesheet" type="text/css" />
<!--?php } else if (is_page('10')) { ?-->
	<link href="<?php bloginfo('template_directory'); ?>/css/contatti.css" rel="stylesheet" type="text/css" />
<!--?php } else if (is_archive()) { ?-->
	<link href="<?php bloginfo('template_directory'); ?>/css/archivi.css" rel="stylesheet" type="text/css" />
<!--?php } else { ?-->
<!--?php get_header(); ?--><!--?php } ?-->

Ovviamente il tutto deve essere posizionato prima della chiusura del tag HTML </head>

Cosa sono i Tag Condizionali?

I Tag Condizionali possono venir utilizzati nei file di Template per modificare quale contenuto viene visualizzato e come il contenuto viene visualizzato su una pagina specifica in funzione di determinate condizioni a cui la pagina risponde.

Quindi in soldoni: se la pagina ha ID = 2 allora utilizza questo CSS, se invece ha ID=3 utilizza questa caratteristica, e così via.

Esiste un’ottima documentazione a riguardo proprio sul sito di WordPress Italia, andate a leggerla. Se ci sono dubbi non esitate a chiedere.

Il CSS

Adesso che abbiamo capito come funzionano i Tag Condizionali, passiamo al reale utilizzo, cioè quello di abbinarli con l’impiego dei fogli di stile e fargli cambiare l’immagine dell’header.
Ora ad ogni categoria oppure pagina corrisponderà un particolare CSS e perciò dobbiamo creare tanti fogli di stile quanti ne andremo ad adoperare; le proprietà qui contenute non saranno molto diverse da quelle impiegate normalmente, ma sapremo sin dall’inizio che le impostazioni ricadranno solamente sulla pagina specificata.

/* CSS solo per la pagina 'Chi siamo' */
#header {
  width: 900px;
  height: 260px;
  background: url('../img/header-about.jpg') no-repeat top;
}
#content img { border: none;}
#content a:hover img { border: none;}

Ovviamente le impostazioni possono essere sull’header ma anche su tutte le caratteristiche che vogliamo, andando a sovrastare per importanza il foglio di stile principale del tema.

Esistono altre soluzioni, magari più semplici, per riuscire ad ottenere lo stesso risultato? Qualche plug-in, ma non credo che funzionino perfettamente su tutti i temi; voi conoscete qualche altra maniera?

Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.