Cambiare l’header di WordPress con i Tag Condizionali
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.
Come 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 rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/about.css" />
<?php } else if (is_page('6')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/servizi.css" />
<?php } else if (is_page('8')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/tariffe.css" />
<?php } else if (is_page('10')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/contatti.css" />
<?php } else if (is_archive()) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/archivi.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?
Ciao, questo metodo non funziona se pubblico lo stesso post in più categorie!
Nel sito in esame http://www.piovedisaccouno.it ho pubblicato lo stesso post per tre categorie e come vedi mantiene header e stili della prima categoria, come si può ovviare a tale problema? GRAZIE
Ciao, il metodo viene utilizzato per gestire le pagine e le categorie; non i singoli post. Penso che il problema che tu riscontri sia legato al fatto che lo stesso post è condizionato alla prima categoria e/o pagina in cui lo collochi, e di conseguenza anche lo sfondo dell’header. In realtà non è un problema, Wordpress funziona così
Ciao Egidio! bell’articolo!!
Comunque volevo togliermi una curiosità:
per modificare lo sfondo tra pagina e pagina posso assegnare valori al tag body del css creato appositamente per ognuna di queste?
Ciao la proprietà body di ogni css andrà a sovrastare quella del css principale del mio tema?
Grazie!
@Jack Certo che puoi farlo; una cosa sola: controlla bene le dipendenze e interazioni dei valori tra i CSS.
Grazie per i complimenti
Ciao Egidio,
ho una pagina con l’archivio degli articoli chiamata news ma non riesco a far visualizzare l’header…
Ho provato con
e con
ma non riesco a far visualizzare l’header….
Qualche suggerimento?
Grazie!
@Enrico mi puoi scrivere cosa provavi, senza l’utilizzo di codice, semplicemente come testo. Grazie
@Egidio allora con: is_page(’news’) o in alternativa con is_archive() … Grazie!
@Enrico Non funziona così; nell’articolo è indicato che il sistema si basa sull’ID con cui WordPress registra la pagina.
Quindi controlla bene il numero ID a cui è abbinata la tua pagina ‘News’ oppure ‘Archivio’.
@Egidio Si, ho provato con l’ID ma non funziona. Mi chiedevo se essendo che non è una pagina “standard” ma l’archivio degli articoli inseriti devo usare una sintassi del tipo is_archive()
Infatti le altre pagine home, chi siamo, contatti funzionano con is_page(’home’), è solamente news che mi da problemi…
Grazie mille
@Enrico Sai cosa stavo pensando? Hai provato a lasciare il tag vuoto? Tipo: is_archive() e basta.
Perchè guarda qui: http://codex.wordpress.org/Conditional_Tags#Any_Archive_Page
Altrimenti non sò che dirti…
Si, ma come allungare l’immagine dell’header?
sono rimasto bloccato mi sa che inizio tutto da capo è meglio….
@Vincenzo cosa intendi per “allungare l’immagine”?
Se questa è un’immagine devi utilizzare un software di grafica e la devi tagliare dell’esatta dimensione che serve a te; considera che devi anche rendere coerente il CSS che utilizzi con le modifiche che hai apportato.