Vista l’elevato numero di richieste, pubblico un piccolo tutorial che illustra i passi da seguire per poter implementare la sezione “Articoli correlati” che trovate sotto ad ogni articolo di Dynamick.
Requisiti
I requisiti iniziali per poter cominciare sono:
- Aver installato il plugin “Yet Another Related Posts Plugin“, che seleziona automaticamente gli articoli correlati
- Aver inserito jQuery all’interno dell’header del proprio template
- Aver inserito la funzione CleverThumb nel file functions.php del proprio tema (vd. il mio precedente articolo su CleverThumb)
Per questioni di prestazioni preferisco inserire jQuery attraverso la libreria di Google Ajax Library API, come spiegato in un mio precedente post.
L’implementazione
Per prima cosa è necessario posizionare un nuovo file, che ho chiamato yarpp-template-list.php, all’interno della cartella del tema attualmente utilizzato.
[code lang=”php”]<?php /*
List template Dynamick
This template returns the related posts as a comma-separated list, with tags and thumbnails
Author: 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="col1">
<h3>Articoli Correlati</h3>
<? }
if ($count==5) {?>
</div>
<div class="col2">
<h3>Altri articoli…</h3>
<? } ?>
<div class="slider">
<div class="th fl"><a href="<?php echo get_permalink(); ?>" title="<?php echo strip_tags(get_the_tag_list(”,’, ‘,”)) ?>">
<?php echo cleverThumb(get_the_ID(), $width=50, $height=50, $alt=strip_tags(get_the_tag_list(”,’, ‘,”)) ) ?>
</a></div>
<h4><a href="<?php echo get_permalink(); ?>" title="<?php echo strip_tags(get_the_tag_list(”,’, ‘,”)) ?>"><?php echo get_the_title() ?></a></h4>
<p><?php echo strip_tags(get_the_excerpt(),"<strong><em>"); ?><br/><?php the_tags(”) ?></p>
</div>
<div class="hl2"></div>
<?php
$count++;
endwhile;
?>
</div>
<?php
else:?>
<p>Nessun articolo correlato.</p>
<?php endif; ?>[/code]
Dal pannello di gestione del plugin “Yet Another Related Posts Plugin” dovreste ora vedere questo nuovo file, yarpp-template-list.php, e dovreste selezionarlo e poi salvarne le impostazioni.
L’ultimo passo consiste nell’aprire il file single.php che trovate sempre nella cartella del vostro tema e, in fondo all’articolo, prima dei commenti, inserite la funzione che richiama il plugin YARPP.
[code lang=”php”]<?php related_posts() ?>[/code]
Ora dovreste vedere sul vostro blog gli articoli correlati.
L’animazione jQuery
Per poter applicare l’effetto dissolvenza che vedete in funzione anche sotto questo articolo, occorre procedere con l’ultima operazione. Create un file main.js nella cartella del vostro tema e includetelo nell’header.php con questo comando:
[code lang=”html”]<script type="text/javascript" src="<?php bloginfo(‘template_directory’); ?>/main.js"></script>[/code]
Il file main.js conterrà questo semplice codice javascript:
[code lang=”javascript”]
$(document).ready(function(){
$(".slider").hover(
function () {
$(this).find("p").fadeIn();
},
function () {
$(this).find("p").fadeOut();
}
);
});[/code]
Aggiungete infine nel foglio di stile style.css la seguente regola
[code lang=”css”].slider p {display:none}[/code]
Conclusioni
Il lavoro è concluso. Ora mancano gli aggiustamenti sul foglio di stile per poterlo adattare al vostro template.
Tutta l’implementazione è stata fatta alla luce delle direttive SEO: ci sono innumerevoli link a tema (i tag dei post correlati), le immagini sono linkate e dispongono di attributi alt e title. E’ quindi una mia personalissima idea che questo sistema sia utile ai visitatori ma anche possa essere gradito ai motori di ricerca.
Se avete domande o dubbi, non esitate a scrivere un commento.