WordPress trick: articoli correlati con thumbnail

In una precedente guida abbiamo visto come visualizzare insieme ad ogni post una thumbnail. Con questa guida riutilizzeremo lo stesso metodo per mostrare in ogni post gli “articoli correlati” con thumbnail.

Prima di iniziare và detto che esistono gia due plugins che svolgono questo compito con buoni risultati. Si tratta di WordPress Related Post with Thumb e di Related Post with Thumbnail.

In entrambi i casi, pero’ i plugins visualizzano accanto all’articolo correlato la prima immagine presente nell’articolo stesso.
Questo sistema, come ho scritto nella guida citata prima, nel mio caso non va bene. Per vari motivi:

• Innanzitutto non mi permette di scegliere l’immagine che ritengo piu’ opportuna a descrivere il post
• Se il post non contiene immagini (almeno nel mio caso) la formattazione va a farsi friggere posizionando in maniera errata gli articoli correlati
• La scelta degli articoli correlati non mi sembra molto accurata

Ora, dando per scontato che abbiate seguito la mia precedente guida per assegnare ad ogni post la propria thumbnail, vediamo come ottenere il risultato che potete vedere in fondo a questo stesso articolo.

Prerequisiti

Installiamo ed attiviamo il plugin YARPP per aggiungere la funzionalita’ “post correlati”. Credo per altro che questo plugin sia molto piu’ accurato degli altri nell’associare gli articoli tra loro, inoltre mostra gli articoli correlati anche durante la stesura dei nuovi, cosi’ da facilitarci la vita nel constatare se abbiamo gia’ parlato in passato di qualcosa.

Tra l’altro questo plugin ci permette di utilizzare dei template personali cosi’ da personalizzare la visualizzazione dei post correlati.

Creiamo il template adeguato

Per creare il template mi sono basato sull’ottima guida scritta da Mick di Dynamick a questo indirizzo ed alla quale rimando nel caso voleste aggiungere un estratto del post sotto il titolo con un gradevole effetto a scomparsa.
Tra l’altro mi e’ sembrato giusto lasciare nel template la sua paternita’. Spero faccia piacere a Mick .

Il template che dobbiamo creare dovra’ contenere il seguente codice (ovviamente e’ possibile modificarlo a piacere se si sa cosa si sta facendo )

<?php /*
List template
This template returns the related posts as a comma-separated list, with tags and thumbnails
Author:  Enrico Deleo a.k.a. Erriko (http://www.erriko.it) ~ based on the work of Michele Gobbi (http://www.dynamick.it)
*/
?>
<?php if ($related_query->have_posts()):
$postsArray = array();
$count=0;
while ($related_query->have_posts()) : $related_query->the_post();
if ($count==0) {?>
<div class="post-rel">
<div class="col1" >
<h3>Articoli Correlati</h3>
<? }
if ($count==5) {?>
</div>
<div class="col2">
<h3>Altri articoli...</h3>
<? } ?>
<div class="post-rel-entry">
<a href="<?php echo get_permalink(); ?>" title="<?php echo strip_tags(get_the_tag_list('',', ','')) ?>">
<img style="background:#fff;" src="<?php echo get_post_meta($post->ID, "Image", true);?>" width="50" height="50"  ></a>
<h3><a href="<?php echo get_permalink(); ?>"  title="<?php echo strip_tags(get_the_tag_list('',', ','')) ?>"><?php echo get_the_title() ?></a></h3>

</div>
<div class="clear"></div>
<?php
$count++;
endwhile;
?>
</div>
<?php
else:?>
<p>Nessun articolo correlato.</p>
<?php endif; ?>
</div>

Una volta incollato (o modificato quanto necessario) il template, basta salvarlo come yarpp-template-list.php e caricarlo nella cartella del tema in uso.

Adesso accedendo alle impostazioni, alla voce relativa a YARPP impostiamo i seguenti settaggi:

• deselezioniamo “Desideri mostrare in automatico gli articoli correlati?“
• sotto “Opzioni di visualizzazione nel tuo sito” scegliamo come numero massimo di articoli da visualizzare 10
• selezioniamo “Mostra utilizzando un file template personalizzato” e scegliamo nel menu a tendina il template appena creato

Il CSS

Per ottenere il risultato che ho ottenuto io, e’ necessario aggiungere in style.css il seguente codice:

/*- Related Posts with thumbnail by erriko -*/

.post-rel {
border:1px solid #ccc;
padding:10px;
height:360px;
}
.col1, .col2 {
float: left;
width: 285px;
}
.col1 h3, .col2 h3{
margin-bottom:20px;
font-size:16px;
}
.col2 {
float: right;
}

.post-rel-entry {
height:52px;
margin-bottom:15px;
display:block;
}
.post-rel-entry h3{
font-size:12px;
}
.post-rel-entry a:hover{
color:#403f6d;
text-decoration:underline;
}
.post-rel-entry img{
width:50px;
height:50px;
border:1px solid #ddd;
margin-right:5px;
float:left;

}
.post-rel-up{
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
background-color:#eee;
padding:10px;
}

Visualizziamo gli articoli correlati in ogni post

Per fare cio’ non ci rimane che aggiungere nel punto piu’ appropriato del file single.php:

<?php related_posts() ?>

Questo e’ tutto. Se avete problemi o escogitate qualcosa di nuovo a riguardo fatelo sapere!

E come sempre…

Happy Blogging