WordPress LogoNel precedente post ho spiegato (anche approfonditamente) come sia possibile “estrarre” un file casuale tramite Php, proponendo anche un esempio riguardante proprio un’immagine.
Vediamo ora come modificare opportunamente quel codice per estrarre casualmente un’immagine da utilizzare per l’header del nostro tema di WordPress. Il mio stesso blog può esservi di esempio: aggiornate questa pagina (F5 sulla tastiera) e noterete che l’immagine dell’header cambia ad ogni aggiornamento [in futuro potrei tornare a un’immagine “statica”, per cui se state leggendo a una certa distanza di tempo dalla data di pubblicazione di questo post, è perché ho deciso di fare diversamente…].

Innanzitutto è necessario creare una cartella (che in questo caso chiameremo header) nella cartella del nostro tema (cioè dentro a wp-content/themes/nome_del_tema), impostare i permessi della cartella e inserire nella cartella le immagini che vogliamo utilizzare. Un esempio (nel mio caso il tema si chiama “multichrome”):

Schema WordPress

Rispetto al codice mostrato nel precedente post, qui non è necessario indicare la path completa della cartella, in quanto potremo prima recuperarla con la funzione dirname (passandole la costante magica __FILE__) e successivamente recuperare l’indirizzo del nostro tema tramite la funzione get_bloginfo messa a disposizione da WordPress. Inoltre, per comodità, chiameremo $header la variabile che conterrà il nome del file estratto casualmente (nell’esempio era invece $file).

Il codice già visto diventarà dunque così:

<?php

$dir = 'header';

if ($handle = opendir(dirname(__FILE__).'/'.$dir)) {
   while (false !== ($filetmp = readdir($handle))) {
      if ($filetmp != "." && $filetmp != "..")
         $files[]=$filetmp;
   }
   closedir($handle);
   $header = get_bloginfo('template_directory').'/'.$dir.'/'.$files[rand(0, count($files)-1)];
}

?>

Questo codice dovrà essere inserito in alto nel file header.php, prima di tutto il codice già presente. Alla riga #3 dobbiamo modificare il nome della cartella che conterrà i file “da pescare”, se abbiamo scelto un nome diverso da header. Ovviamente dovremmo preoccuparci personalmente che i file “da pescare” siano “a posto”, ad esempio per quanto riguarda le dimensioni (dovrebbero essere uguali per tutti i file in questione).

Ovviamente non abbiamo ancora finito. A questo punto la variabile $header conterrà l’indirizzo della nostra immagine, indirizzo che possiamo “stampare” semplicemente così:

<?php print($header); ?>

Dobbiamo fare in modo che l’indirizzo venga stampato là dove vogliamo che l’immagine dell’header venga appunto visualizzata. Qui le possibilità sono due, a seconda di come è stato realizzato il tema che avere attualmente in uso:

  1. tramite (x)Html e quindi tramite il tag img;
  2. tramite Css e quindi tramite la regola background o background-image.

Tramite (x)Html

Se il nostro tema visualizza l’immagine dell’header tramite (x)Html e quindi tramite il tag img, nello stesso header.php dovremmo trovare qualcosa più o meno simile a questo (ma può variare anche di molto):

<div id="header">
    <img src="header.jpg" />
</div>

Che diventerà quindi:

<div id="header">
    <img src="<?php print($header); ?>" />
</div>

In sostanza, è necessario sostituire il contenuto dell’attributo src, che dovrà essere interamente sostituito dal codice visto precedentemente.

Tramite Css

Se invece il nostro tema visualizza l’immagine dell’header tramite Css e quindi tramite la regola background o background-image, allora nel file style.css dovremmo tramite qualcosa più o meno simile a questo (anche qui, può variare anche di molto):

#header {
   background:#fff url('header.jpg');
}

oppure:

#header {
   background-image:url('header.jpg');
 }

Qui però la situazione è un po’ più complicata: non possiamo inserire del codice Php all’interno di un foglio di stile, altrimenti non verrebbe interpretato (e creerebbe problemi nell’interpretazione dello stesso foglio di stile).
Quindi rimuoviamo dal file style.css solo e soltanto la riga con la regola background o background-image, lasciando inalterato tutto il resto (nei precedenti due esempi, ad esempio, dovremmo rimuovere solo la riga #2) e reinseriamo la regola all’interno del file header.php. In questo caso, però, dobbiamo riportare l’identificatore (nei casi precedenti #header) all’interno degli appositi tag style (che permettono di inserire regole css in una pagina (x)Html), che a loro volta dovranno essere all’interno dei tag head.

Cerchiamo quindi in header.php il tag:

</head>

e subito prima dovremmo aggiungere qualcosa così:

<style type="text/css">
   #header {
      background-image:url('<?php print($header); ?>');
   }
</style>
Espandi/comprimi Commenti

[…] This post was mentioned on Twitter by Mirko Pagliai, Mirko Pagliai. Mirko Pagliai said: Header casuale per WordPress: Nel precedente post ho spiegato (anche approfonditamente) come sia possibile “estrar… http://bit.ly/9Zu05x […]

XHTML - Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>