Cómo mostrar en los posts de WordPress artículos relacionados por etiqueta

¡Buenos días! En este vídeo-tutorial vamos a ver cómo mostrar en un artículo de blog de WordPress las entradas relacionadas con esta por las etiquetas o tags que lleve. ¡Vamos allá!

Lo que haremos aquí es básicamente añadir un listado de posts al final de un post, relacionados con este por los tags nativos de WordPress que lleve. Me refiero a estos que podemos encontrar en Entradas > Etiquetas, o añadirlas desde el editor del post directamente:

Vamos a preparar el código primero y luego veremos cómo lo podemos mostrar si trabajamos con Genesis Framework por un lado, y luego con cualquier otro theme por otro.

Preparamos nuestro listado de posts

En ambos casos, vamos a utilizar el siguiente código pero de formas un poco diferentes, así que lo puedes copiar ya:

<div class="bps_related_posts">
<?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, //Cantidad de posts por página
'orderby' => 'RAND' //Orden de posts
);

$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {

echo '<h3>Quizás también te interese</h3><ul>';

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

<!-- El listado de posts -->
<li>
<!-- <div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div> -->
<h3><a href="<?php the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</li>
<!-- Hasta aquí -->

<?php }
echo '</ul>';
}}
wp_reset_query(); ?>
</div>

Al principio parece mucha cosa pero no te asustes. Casi todo lo vamos a dejar por defecto, y sólo te recomiendo cambiar un par de cosas, para ponerlo a tu gusto:

En posts_per_page indicaremos cuántos posts relacionados podemos mostrar así que puedes cambiar el 3 por la cantidad que te interese
Con el orderby indicamos en qué orden se van a mostrar esos posts, que está puedo en RAND de random (aleatorio) pero puedes cambiarlo por date, para que los ordene por fecha

Esto es todo en cuanto a las opciones del listado, y aquí podemos hacer muchas cosas más pero para mantenerlo simple te recomiendo dejarlo así. Si quieres ver más parámetros que se pueden añadir puedes echarle un vistazo a la documentación oficial sobre el WP_Query.

Luego, en la parte inferior del código indicamos qué información de cada post se va a mostrar, es decir título, imágen, extracto si queremos…

La parte que se encarga de esto es la siguiente:

<!-- El listado de posts -->
<li>
<!-- <div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div> -->
<h3><a href="<?php the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</li>
<!-- Hasta aquí -->

Te lo voy a poner fácil y te voy a dar dos opciones: para mostrar títulos solo y para mostrar imagen destacada también:

Mostrar un listado de títulos

<li>
<h3><a href="<?php the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</li>

Mostrar imagen destacada y título

<div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<h3><a href="<?php the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</li>

Ala, ya lo tienes. Una vez que tengas claro qué info quieres mostrar de cada post relacionado, vamos a ver cómo los podemos imprimir en nuestros posts.

Mostramos posts relacionados por tag con Genesis

Para hacerlo con Genesis, simplemente vamos a utilizar un hook que nos permitirá insertar toda esta parrafada de código después de cada entrada.

Lo que haremos es envolver todo esto que hemos visto en una función y lo meteremos en el hook genesis_entry_footer :

add_action('genesis_entry_footer','bps_related_posts' );

function bps_related_posts () {
	if (is_single()) { ?>

		// Aquí el código

		<?php
	}
}

Así que quedaría algo así:

add_action('genesis_entry_footer','bps_related_posts' );

function bps_related_posts () {
	if (is_single()) { ?>

<div class="bps_related_posts">
<?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, //Cantidad de posts por página
'orderby' => 'RAND' //Orden de posts
);

$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {

echo '<h3>Quizás también te interese</h3><ul>';

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

<li>
<h3><a href="<?php the_permalink()?>" rel="bookmark" target="_blank" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</li>

<?php }
echo '</ul>';
}}
wp_reset_query(); ?>
</div>

<?php }}

Este código lo podemos insertar de diferentes maneras en nuestra web:

En el archivo functions.php, en el carpeta de nuestro theme, accediendo por FTP a wp-content/themes/nuestro-theme
En nuestro propio plugin de WordPress
En el plugin Code Snippets

Te recomiendo los últimos dos métodos para que estos cambios de código no dependan del theme que tengáis activo. Tienes más info sobre esto aquí: cómo añadir PHP en WordPress.

¡Y ya estamos! Con Genesis es así de simple. Vamos a ver ahora cómo lo haríamos con otros themes, modificando sus plantillas.

Mostramos posts relacionados por tag con otros themes

Para el ejemplo de “otros themes” he pillado el GeneratePress ya que es un theme muy popular. Y aunque GeneratePress también tiene sus propios hooks, vamos a hacerlo como si no los tuviera para ver cómo lo haríamos con otros themes.

Vamos por pasos:

Identificamos dónde queremos insertar el listado

Con el inspector de navegador (Botón derecho > Inspeccionar en Chrome) podemos ver la estructura HTML de la entrada e identificar dónde podemos insertar esos posts relacionados. En el caso de GeneratePress lo podemos hacer justo después del div entry-content:

Para modificar la plantilla del single-post hacemos lo siguiente:

Accedemos a la raíz de la web por FTP (si no sabes cómo se hace, pregúntaselo a tu hosting o busca en Google “acceder ftp + tu-hosting”)
Nos dirigimos a la carpeta del theme, en wp-content > themes > nombre-del-tema
Ahí deberíamos tener el archivo single.php así que vamos a modificarlo

No es muy raro que no encontremos ese div que nos interesa (el entry-content) directamente en el single.php, como es el caso de GeneratePress. Lo que hace es cargar el contenido de post en otra plantilla, que en este caso es content-single.php.

Aquí pueden haber miles combinaciones así que no te puedo ayudar con una solución genérica, ya que los desarrolladores de themes hacen lo que les da la gana y ordenan las templates a su gusto (y si tu theme es de Themeforest, empieza a preocuparte). Por lo general desde single.php podrás ver qué se está cargando y buscando un poco por los archivos del theme, encontrarás el que necesitas.

Siguiendo nuestro caso, en el content-single.php sí que encontramos el div .entry-content. Una vez que lo encontramos, simplemente copiamos el código del principio (desde <div class=”bps_related_posts”> hasta el último </div>) y lo pegamos tal cual, sin cambiar nada, después del cierre del entry-content. Quedaría algo así:

Una vez hecho esto, si lo hemos hecho todo bien, podemos guardar el archivo y se recargamos la entrada ya veremos el listado de posts relacionados 🙂

Te recomiendo ver el vídeo de arriba para entender mejor todo esto, ya que esta parte es un poco tricky para algunos.

¡Y ya estamos! Ya podemos crear una mejor red de enlazado interno de nuestro contenido, con sólo un par de líneas de código y un poco de copy paste.