Cómo mostrar noticias relacionadas usando de forma automática las ‘Etiquetas’ (tags) de las noticias existentes.
Las noticias creadas tienen que tener ‘Imagen destacada’ si queremos que muestre la noticia destacada con imagen (miniatura). Para ello habrá que añadir al fichero ‘functions.php’ el código necesario para crear una miniatura que queramos mostrar en las noticias relacionadas.
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 100, 50, true );
La línea ‘add_theme_support’ da el permiso para añadir miniaturas al theme.
La línea ‘set_post_thumbnail_size’ crea la imagen con las dimensiones marcadas
Una vez añadido el código en el ‘functions.php’ de nuestro theme o theme-child, habrá que añadir el código en loop del fichero ‘single.php’. Lo más común es mostrar las noticias relacionadas antes o después de los comentarios. Buscar la línea de código:
<?php comments_template(); ?>
Y añadir el siguiente código:
<div class="noticiasrelacionadas">
<h3>Noticias relacionadas</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, // Número de noticias relacionadas a mostrar.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<div class="miniaturanoticiarelacionada">
<a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
<?php the_title(); ?>
</a>
</div>
<? }
}
$post = $orig_post;
wp_reset_query();
?>
</div>
Con este código mostramos la ‘Imagen destacada’ y el `Título’ de las noticias que tienen el/los mismas etiquetas que la noticia que estamos creando, con un máximo de 4.
Sólo queda añadir los estilos al fichero ‘styles.php’ de nuestro theme o theme-child. Un ejemplo sería:
.noticiasrelacionadas {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.noticiasrelacionadas h3 {font-size: 20px; margin: 0 0 5px 0; }
.miniaturanoticiarelacionada {margin: 0 1px 0 1px; float: left; }
.miniaturanoticiarelacionada img {margin: 0 0 3px 0; padding: 0;}
.miniaturanoticiarelacionada a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.miniaturanoticiarelacionada a:hover {background-color: #ddd; color: #000;}
El ancho 640px de la primera línea de código es el ancho del área del post. Si nuestro theme es más ancho o todo lo contrario habrá que modificar este valor. Habrá que tener en cuenta el ancho (en pixeles) de la miniatura, junto al número de noticias y el ancho de post para que todo quede en una línea.