Mostrare una thumbnail per ogni articolo scritto su WordPress
Scritto da Erriko in Wordpress il 10 luglio 2009
Molti di voi avranno notato sia in home page che nelle pagine di archivio (categorie, mese, archivio generale) la presenza delle famose thumbnails vicino ad ogni articolo.
Potete comunque già farvi una idea guardando alla fine di questo articolo gli “articoli correlati”, che saranno – dietro richiesta del “collega blogger” (forse nel mio caso e’ una parola grossa 
) Luca Mercatanti – oggetto della prossima guida.
In questa guida vorrei spiegare meglio come ho ottenuto questo risultato senza ricorrere a particolari plugin o classi php e utilizzando al più 2 righe di codice php all’interno dei file del tema nei quali ho voluto aggiungere questa funzionalità (nel mio caso praticamente ovunque! 
).
Inoltre, a differenza dei metodi “alternativi” che ho notato spadroneggiare sugli altri blog/siti, questa soluzione è completamente indipendente dal fatto o meno che si inseriscano immagini nell’articolo (cosa che sarebbe sempre opportuna ma non sempre si rivela necessaria o consona a ricoprire il ruolo di immagine-chiave).
Obiettivo
L’obiettivo che ci prefissiamo qui, e che è il fulcro della guida, è quello di poter assegnare a nostro piacimento una immagine ad ogni articolo che pubblichiamo, per poi visuallizzarla vicino ad esso (sopra, sotto, di lato è uguale ) in home page o dove riteniamo idoneo.
Come funziona l’inserimento dell’immagine
Niente di più semplice. Basta inserire nei nostri post un campo personalizzato a cui metteremo come nome Immagine (ma possiamo scegliere diversamente) e come valore l’url dell’immagine da usare come thumbnail. Questo risulta particolarmente utile perchè non saremo vincolati a sprecare spazio prezioso sul nostro hosting per ospitare l’immagine 
Il codice da inserire nelle pagine del tema
Anche in questo caso niente di cosi’ complicato: basta inserire nel punto nel quale vogliamo visualizzare la thumbnail, il seguente codice:
<img src="<?php echo get_post_meta($post->ID, "Immagine", true);?>" width="50" height="50" >
dove ovviamente larghezza ed altezza verranno assegnate in base alle esigenze.
Esempio concreto: visualizzare le thumbnail come nella home di Erriko.it
Nel mio caso ho voluto visualizzare l’immagine incastonata nel testo dell’estratto dell’articolo e precisamente nella parte in alto a sinistra dello stesso.
Il codice che ho utilizzato (non esattamente, perche’ varia leggermente in base alla posizione del loop) e’ grossomodo questo:
<?php while (have_posts()) : the_post(); ?> <div class="loop"><h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Vai a: <?php the_title(); ?>"><?php the_title(); ?></a></h2> <img src="<?php echo get_post_meta($post->ID, "Image", true);?>" width="50" height="50" > <p><?php the_excerpt();?></p> </div> <?php endwhile; ?>
per visualizzare l’immagine incastonata in quel modo e’ poi bastato aggiungere al file css (style.css) questa parte:
.loop img{
float : left;
margin : 2px 5px 5px;
padding : 4px;
}
Questo e’ tutto. Il risultato (spero) e’ molto gradevole e permette di scegliere l’immagine che piu’ descrive un post.
Ritornero’ presto su questo argomento nella guida alla realizzazione delle immagini correlate con thumbnail, senza ricorrere ai due plugin che ho visto in circolazione e che estraggono la prima immagine dell’articolo (mentre come, ho detto qui, preferisco specificare manualmente quella piu’ esemplificativa).
A presto e…
Happy Blogging! 
Grazie mille Erriko.it! Mi hai fatto davvero un grandissimo piacere con questo post!
Finirà sicuramente nella prossima rubrica “Il meglio del Web!”
Un salutone dal tuo “collega”
Grazie a te dello spunto!
Ciao l’ho installata ieri e funziona perfettamente se si visualizza il sito con Firefox, con IE invece sbarella. Quale può essere il problema?
Dipende da come hai impostato il foglio di stile. Devi controllare il tuo codice css ed accertarti che sia scritto in modo da essere cross-browser…
Grazie per larticolo che mi è stato molto utile. Volevo chiederti si potrebbe allineare limmagine con larticolo? Vedi il mio sito per capire meglio cosa intendo
http://barbara.hellospace.net/
Anch’io utilizzo questo metodo in alcuni blog, solo che consuma troppe query.
Probabilmente hai ragione, ma personalmente non ho notato differenza in termini prestazionali. E’ anche vero che se si usano hosting poco performanti è bene tenere sotto controllo praticamente tutto…