on Temi Wordpress, WordPress

Articoli correlati con miniature e tag usando WordPress e jQuery

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.

articoli-correlati-miniatureRequisiti

I requisiti iniziali per poter cominciare sono:

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.

yarpp

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.

scrivi un commento

Commento

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

  1. mi chiedevo una cosa ma io che non sono esperto di jquery e altri dettagli non lo istallo il plugin…sto impazzendo, qualcuno fa assistenza!!!!!

  2. Non riesco a visualizzare le icone delle foto inserite negli articoli. C’entra qualcosa che utilizzo il tema lifestyle di studiopress?? Grazie

  3. A me il jquery non va 🙁 sarà che va in conflitto con qualche altro js…
    Ad ogni modo grazie dello spunto. Io ho realizzato qualcosa di simile, ma al posto della classe per le immagini ho utilizzato i campi personalizzati che uso per assegnare una thumbnail ad ogni articolo…

  4. a dire il vero avrei una domanda: come faccio ad inserire un elemento di javascript della libreria jquery all’interno di un post?

  5. Ottimo tutorial 🙂
    Mi chiedevo lo stesso procedimento vale anche per questi (css-tricks.com/downloads), che sono carini.. ma non sapevo come implementarli in un semplice template WP..!?

    Grazie e ancora complimenti