Random header images per WordPress

Nella gran parte dei temi disponibili per WordPress é presente una funzione che permette l’inserimento di una immagine statica nella header del template. L’impatto visivo offerto da una immagine posizionata nella home page é di particolare rilevanza poiché essa può essere utilizzata (a ragion veduta oppure no) per rappresentare il contenuto di un blog. La header é in sostanza il nostro biglietto da visita: mai come in questo caso é la copertina a fare il libro!

I Pokémon sono animaletti simpatici e divertenti ma non hanno nulla a che vedere con gli articoli pubblicati in questo sito! Domanda: “Quali contenuti si aspetterebbe di leggere un utente alla sua prima visita al gidibao’s Cafe? Pikachu oppure WordPress?”

Posto il quanto sia necessario accordare l’immagine della header con le tematiche del blog, potrebbe in un secondo tempo nascere l’esigenza di proporre ai propri visitatori un nuovo e più accurato messaggio di benvenuto: ossia il fare scorrere una serie di immagini random (a caso) nella header del blog. Posso assicurare che l’approccio alla pagina sarà più gradevole e che, tutto sommato, il webmaster farà anche la sua bella figura… L’operazione é semplicissima ma, come al solito, non si sa mai da dove iniziare!

Attenzione: prima di procedere, effettuare il backup del tema.

Ecco come inserire un x* numero di immagini random nella header del tema:

I file interessati all’intera operazione sono il foglio di stile CSS ed header.php

Il primo passo é quello di verificare se nella directory che contiene tutti i file del tema esiste una sotto-cartella dove sono allocate le immagini. Generalmente il percorso é /wp-content/themes/NomeDelTema/images/

Una volta individuata l’immagine preposta alla header, annotarne le dimensioni e l’estensione con la quale il file é stato salvato e rinominarla header_1.

Immaginiamo ora di voler aggiungere altre 2 immagini random che per comodità chiameremo header_2 e header_3 facendo altresì molta attenzione che tutti e tre i file immagine abbiano la stessa dimensione nonché la medesima estensione della immagine statica in uso. Ad esempio: header_1.jpg, header_2.jpg, etc.

Effettuamo ora via ftp l’upload delle immagini allocandole nella sotto-cartella /images del nostro tema.

(Non tutti i temi WP hanno una cartella dedicata alle immagini, ma questo non sarà un problema: creiamo una nuova cartella, nominiamola images, inseriamo in essa i file immagine che abbiamo realizzato e, in questo caso, carichiamo la sotto-cartella images all’interno della cartella principale del nostro tema.)

Ora che le immagini sono sul server, possiamo dedicarci all’aggiornamento dei codici:

• header.php

Generalmente, la snippet di richiamo della immagine nella header ha una struttura di base simile a questa:

laddove immagine.jpg é il nome del file immagine (unico) per la header del tema mentre nelle righe più sotto é indicato il percorso (URL) al file.

Dovremo ora aggiungere al codice ancora un po’ di php per ottenere la funzione random, cioé: facendo bene attenzione che la “x” rappresenta il numero delle immagini che avremo caricato nella sotto-cartella /images.

laddove header_.jpg é il nome di base del file immagine (random) per la header del tema, (rand(1,3)) il numero dei file immagine caricati in accordo con l’esempio mentre nelle righe più sotto é indicato il percorso (URL) ai file comprensivo di altezza, larghezza ed attributo alt delle immagini (valori indicativi per la demo).

• style.css

Per quanto concerne il foglio di stile, l’identificatore (ID) per l’immagine della header ha una rappresentazione generalmente simile alla seguente:

laddove l’ID #header regola il file immagine (unico) per la header del tema mentre nella riga più sotto sono indicate le proprietà.

Dovremo ora modificare il foglio di stile per accordare il nostro CSS con la funzione random applicata al codice di cui sopra facendo bene attenzione nell’inserire correttamente i valori attribuiti in precedenza (nome file immagine, dimensione, etc.).

Salviamo in ultimo le modifiche apportate al foglio di stile e verifichiamo se l’operazione é andata oppure no a buon fine. E’ doveroso ricordare che tutti gli esempi citati in questo articolo vanno considerati come punto di partenza piuttosto che una soluzione ottimale applicabile a tutti i temi; con altre parole, essere fedeli al codice del proprio tema e lavorare in accordo con esso quando verranno apportate le modifiche é già di per sé un ottimo inizio. Practice makes perfect!

Nota: per ovvie ragioni pratiche e di utilità, rimando la discussione di questo articolo nel forum dedicato: non fornirò assistenza tecnica nei commenti al post.

*sì, volendo anche 50 e più…

articolo di riferimento | Simple Random Header Images for Your Blog

tools | Blog Header Generator