Tutorial, Risorse e Notizie Per WebMaster e WebDesigner - Risorse, script, tutorial e guide per webmaster e web designer

In questo tutorial vedremo come estrarre la prima immagine da ogni post wordpress.
Questa è cosa molto facile grazie all’uso del php.

Inizio col dire che lo spunto è preso da questo articolo.
Effettivamente il processo è lo stesso, solo che nel link non viene effettuato il richiamo all’interno degli appositi tag ( oppure viene omessa questa parte fiduciosi di utenti esperti ).

La prima cosa da fare è creare una funzione da inserire nell’apposito file function.php della nostra template. Possiamo inserire il seguente codice prima dell’ultimo ?>

[sourcecode language='php']
function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘//i’, $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
$first_img = “/images/default.jpg”;
}
return $first_img;
}
[/sourcecode]

Fatto questo andiamo dobbiamo aprire la pagina php dove ci interessa inserire l’immagine. Noi abbiamo optato per la pagina delle categorie, facendo uscire un immagine ad ogni post.

Il codice da inserire per effettuare il richiamo all’immagine è il seguente

[sourcecode language='php']

[/sourcecode]

E’ stato racchiuso in un contenitore, ma non è necessario.

Stabilire una grandezza fissa per l’immagine estratta

L’aggiunta da fare sul codice è molto semplice.
Infatti basta sostituire questo codice :

[sourcecode language='php']

[/sourcecode]

con il seguente :
[sourcecode language='php']

[/sourcecode]

In poche parole aggiungiamo una classe css che ci permette di gestire altezza e larghezza dell’immagine estratta.

Vediamo il codice css :

[sourcecode language='css']
.thumb {
margin: 5px 0 10px;
padding: 4px;
border: 1px solid #eee;
line-height: 0;
}
.thumb:hover {
background: #1891D1;
border: 1px solid #1891D1;
}
.thumb img {
width: 260px;
height: 110px;
}

[/sourcecode]

Spero di esservi stato utile.

Articolo Scritto Da admin Il 05.31.09

Sezioni : tutorial wordpress

Tags: CSS, tutorial css, tutorial wordpress, wordpress tutorial