Come aggiungere articoli correlati senza plugin

In questo articolo ti mostrerò come aggiungere articoli correlati senza plugin.

L’uso eccessivo di plugin in un sito, si sa, può intasare il tuo blog WordPress o peggio ancora impedirne la corretta visualizzazione a causa di incompatibilità. Per non incorrere in questi problemi, cerchiamo di usarne il meno possibile e in alternativa, apportiamo direttamente le nostre modifiche al codice del sito.

Iniziamo aggiungendo questo codice al file functions.php del tema child, che ci consente di visualizzare la thumbnail dell’articolo:

add_theme_support( 'post-thumbnails' );

Procediamo aggiungendo questo codice nel file single.php nel punto in cui desideriamo che vengano visualizzati gli articoli correlati, nella pagina di ogni singolo post:

<div class="relatedposts">
<h3>Related posts</h3>
<?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'=>4, // Number of related posts to display.
  'caller_get_posts'=>1
  );

  $my_query = new wp_query( $args );

  while( $my_query->have_posts() ) {
  $my_query->the_post();
  ?>

  <div class="relatedthumb">
    <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?>
    <?php the_title(); ?>
    </a>
  </div>

  <? }
  }
  $post = $orig_post;
  wp_reset_query();
  ?>
</div>

La parte di codice

the_post_thumbnail(array(150,100)

imposta la dimensione di visualizzazione dell’immagine di anteprima (thumbnail), in questo caso 150px width, 100px height.

Passiamo allo stile css.
Supponendo che la larghezza dell’articolo sia di 640px, il codice css che dovremo aggiungere allo stile del sito, è il seguente:

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.relatedthumb a:hover {background-color: #ddd; color: #000;}

Questo codice ti consente di avere 4 immagini di anteprima per riempire la larghezza di 640 px (margini inclusi).

Buon lavoro e, come sempre, lascia il tuo commento! 😉