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
si, l’avevo letto, grazie!!
adesso provo a scaricare questi plugin….
grazie ancora…
Prego, di nulla!
Fammi sapere l’esito dei tuoi lavori di webmastering…
Buon fine settimana
PS
in caso di necessità, puoi utilizzare anche il forum.
ciao, il sito è: http://www.villasomelli.org
sono plugin gratuiti o a pagamento??
grazie!
Ciao catia,
grazie per la tua risposta.
I plugin sono gratuiti e li puoi scaricare direttamente dalle pagine di WordPress.org che ti ho indicato nel mio precedente commento.
Volendo, potresti utilizzare per le header il plugin NextGEN Gallery.
Leggi questo mio articolo per vedere come fare: NextGEN Gallery header (vedi qui un esempio di integrazione)
Fammi sapere…
Gianni
Salve catia,
un link al tuo sito?
Hai mai provato con questi plugin?
Dynamic Headers
Cimy Header Image Rotator
Vedi anche qui nel WP Codex: Designing Headers
Mentre questo è l’header.php
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="; charset=” />
<script type="text/javascript" src="/script.js”>
<link rel="stylesheet" href="” type=”text/css” media=”screen” />
<link rel="alternate" type="application/rss+xml" title="” href=”" />
<link rel="alternate" type="application/atom+xml" title="” href=”" />
<link rel="pingback" href="” />
<a href="/”>
Ho visto che i commenti sono molto vecchi, spero che qualcuo possa aiutarmi
salve, la parte riguardante l’header del mio sito nell’editing style.ccs appare così:
/* begin Header */
div.art-Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 753px;
height: 251px;
}
div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 753px;
height: 251px;
background-image: url(‘images/Header.jpg’);
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */
cosa devo andare a modificare??
(voglio inserire 3 foto a rotazione)
grazie
Prego ciemme
I risultati inquietanti occorrono per fare esperienza: mai come in questo caso: sbagliando si impara!!!
WordPress non é affatto una piattaforma semplice semplice… non hai idea dei guai che riesco ancora oggi a combinare
La buona volontà e la passione sono ottimi ingredienti
Grazie,
mi metto subito all’opera con le dita incrociate.
E si, per quanto siano mesi che lo “maneggio”, ho difficoltà . Però penso che la mia difficoltà maggiore sia non conoscere lo style css.
Buona volontà , tanta… ma con risultati a volte inquietanti
Ciao ciemme,
credimi: non hai nulla di cui vergognarti: non é che sia una passeggiata creare una random header per il nostro tema!!!
Prima di andarti a rispondere nel forum, ti invito a sostituire via FTP il foglio di stile del tema (file style.css) con quello originale poiché hai il footer del tema e la header con il mal di testa…
Sono certo che tu abbia letto e compreso questo articolo, probabilmente ti manca un po’ di esperienza su WordPress…
Practice makes perfect
Gianni
ciao, sono arrivata stamattina su questo blog. Piacere.
Ho seguito con molto entusiasmo le tue istruzioni e ho toppato.
Ho scritto, allora, nel forum, se vorrai rispondermi, sarei molto felice.
Grazie tante.
Ps: e pensare che hai dato delle istruzioni cosi precise da vergognarmi per la toppa.
Ciao ciccioz,
il tema da te indicato ha il richiamo alla immagine header nel file
sidebar.php. Con questa snippet non si può fare nulla! Mi spiace.Grazie per la tua visita e per il commento
Ottima guida, vorrei però chiederti un aiuto. Dato che non conosco nessun linguaggio(html, php, ecc…), si può utilizzare l’ immagine random in un template come questo?
Mi saresti di grande aiuto…Ciao!
@kit…
Grande Andrea!
Chuck Norris ne sarà ben lieto!!! evviva le testate rotanti
In sostanza, sto scrivendo (quasi) esclusivamente su WordPress… pi๠vicino di così
@max…
grazie a te per la visita Max!
Prima di sperimentare, ricordati di effettuare il backup del tuo tema così potrai spippolare in tutta allegria
Happy blogging
Ciao Gidi e grazie della dritta,
come sempre preciso e aggiornatissimo.
Buona serata.
finalmente un gidi un po’ pi๠vicino a noi wordpressiani….
… appena scelgo un nuovo tema vedo se ਠpossibile mettere in atto una “testata rotante”….