In questo breve tutorial vi mostrerò come aggiungere un carosello di articoli correlati (c.d. related posts) con l’immagine in evidenza e il titolo in fondo ad ogni pagina/articolo del vostro blog. Il tutto senza utilizzo di plugin nel caso utilizziate wordpress o altri CMS. Il risultato atteso è molto simile a quanto presente in questo blog.
Prima di partire occorre avere un minimo di dimestichezza con i file del tema in uso e soprattutto conoscere dove sono collocati e quali andare a modificare. Come al solito consiglio, soprattutto a chi utilizza wordpress, la predisposizione di un tema child con un duplicato del foglio di stile (di solito denominato style.css).
Primo passo definiamo gli stili css quindi una volta individuato il vostro stilesheet file incollate il codice di seguito:
@media only screen
and (min-device-width : 480px){
.relatedconteiner {
width: 33%;
padding-left: 10px;
float: left;
padding-top: 10px;
}
.relatedcontent a:link{
font-size: 20px;
text-decoration: none;
color: rgba(0, 0, 0, 0.685);
}
.relatedcontent a:visited{
font-size: 20px;
text-decoration: none;
color: rgba(0, 0, 0, 0.685);
}
.relatedthumb {
width: 98%;
}
#relatedposts h3 {
font-size: 24px;
font-weight: 100;
font-family: arial black;
text-decoration: none;
color: rgba(0, 0, 0, 0.685);
padding-left: 0px;
padding-top: 0px;
margin-top: 10px;
margin-bottom: 10px;
}
.post-meta {
clear: left;
}
}
@media only screen
and (max-device-width : 480px){
#relatedposts {
font-size: 12px;
font-weight: 400;
font-family: arial black;
text-decoration: none;
color: rgba(0, 0, 0, 0.685);
padding-left: 10px;
}
.relatedthumb {
width: 95%;
padding-top: 15px;
}
#relatedposts h3 {
padding-top: 0px;
margin-top: 0px;
margin-bottom: 5px;
}
.relatedcontent a:link {
text-decoration: none;
color: rgba(0, 0, 0, 0.685);
}
.relatedcontent a:visited {
text-decoration: none;
color: rgba(0, 0, 0, 0.685);
}
}
Le impostazioni di stile hanno anche qualche differenza tra visualizzazione da PC o smartphone per rendere più gradevole il risultato.
Adesso passiamo al codice php che andrà inserito nella posizione in cui volete che appaia il carosello di articoli. Una volta individuato il file inserite il codice seguente nella posizione desiderata:
<?php $orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>3, // Numero di articoli correlati da mostrare
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><hr><center><h3>Potrebbe interessarti</h3></center>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<div class="relatedconteiner">
<div class="relatedthumb"><a href="<? the_permalink()?>?utm_source=link%20interno&utm_medium=articoli%20correlati&utm_campaign=<?php the_title(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="relatedcontent">
<?php the_time('j M, Y') ?>
<h3><a href="<? the_permalink()?>?utm_source=<?php bloginfo( 'name' ); ?>&utm_medium=articoli%20correlati&utm_campaign=<?php the_title(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<a href="<? the_permalink()?>?utm_source=<?php bloginfo( 'name' ); ?>&utm_medium=articoli%20correlati&utm_campaign=<?php the_title(); ?>" rel="bookmark" title="<?php the_title(); ?>"><span class="button">Leggi</span></a>
</div>
</div>
<? }
echo '</div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>
Il codice qui sopra permette di mostrare gli articoli correlati perché contenenti gli stessi tag dell’articolo mostrato in pagina ed i link sono settati in modo da avere anche un link di tracciamento google analytics. Se utilizzate GA infatti troverete nella sezione acquisizione come sorgente il nome del blog (?utm_source=<?php bloginfo( ‘name’ ); ?>), come mezzo “articoli correlati” (&utm_medium=articoli%20correlati) e come evento/hit il titolo del post (&utm_campaign=<?php the_title(); ?>). Potete modificare intestazione e numero di post da mostrare agendo sul numero (‘posts_per_page’=>3).
Riguardo i pulsanti dovrete individuare con quale nome viene richiamata la classe del vostro foglio di stile e sostituire la classe “button” (<span class=”button”>Leggi</span>) oppure potete scegliere di rimuovere questa parte di codice e non mostrare alcun pulsante.
Se preferite visualizzare gli articoli di pertinenza in base alla categoria e non al tag modificare la prima parte con questo:
<?php $orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>5, // Numero di articoli correlati da mostrare.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) { //continuare da echo...
Ultima aggiunta utile può essere la condizione per visualizzare il carosello degli articoli correlati soltanto negli articoli. Questo si rende necessario se il file che carica il contenuto del vostro tema è lo stesso per pagine e articoli e si vuole mostrare il carosello solo nelle pagine di articoli. il consiglio che vi do è quello di creare un nuovo file e nominarlo ad esempio carosello.php all’interno del quale caricare il codice php mostrato in precedenza. Il metodo funziona solo con wordpress. Inserite nel file .php il seguente codice nella posizione in cui volete mostrare il carosello:
<!-- Articoli Correlati -->
<?php
if ( is_single()) {
get_template_part( 'cartella-template/carosello', 'single' ); }
?>
