Mostrar Posts relacionados sin usar plugins en WordPress 5

Si tienes un blog, seguro que necesitas poner post relacionados al final de cada entrada, esto te ayudara a mantener a los usuarios leyendo en tu pagina web.En este truco veremos cómo obtener Posts relacionados sin usar plugins en WordPress

Tienes dos formas de seleccionar los posts relacionados: por Categorias o por Etiquetas (tags)

Posts relacionados sin usar plugins por categorías

El siguiente código puede ser agregado a nuestro archivo functions.php de nuestro theme.

<?php
  
 function dc_related_after_content( $content ) 
 { 
    
    if ( !is_singular('post') ) return $content;	
	
	$cad			= "";
	$template_li 	= '<li>
							<a class="thumb_rel" href="{url}">{thumb}</a>
							<a class="title_rel" href="{url}">{title}</a>
						</li>';
	$template_rel	= '<div class="rel_posts">
							<h3>Artículos Relacionados</h3>
							<ul>
								{list}
							</ul>
					   </div>';

    $terms = get_the_terms( get_the_ID(), 'category');
    $categ = array();
    
    if ( $terms )
    {
    	foreach ($terms as $term) 
    	{
    		$categ[] = $term->term_id;
    	}
    }
    else{
    	return $content;
    }

    $loop	= new WP_QUERY(array(
    				'category__in'		=> $categ,
    				'posts_per_page'	=> 4,
    				'post__not_in'		=>array(get_the_ID()),
    				'orderby'			=>'rand'
    				));

    if ( $loop->have_posts() )
    {

    	while ( $loop->have_posts() )
    	{
    		$loop->the_post();

    		$search	 = Array('{url}','{thumb}','{title}');
	  		$replace = Array(get_permalink(),get_the_post_thumbnail(),get_the_title());
    	
    		$cad .= str_replace($search,$replace, $template_li);
    	}

    	if ( $cad ) 
    	{
		  	$content .= str_replace('{list}', $cad, $template_rel);
    	}

    }
   	wp_reset_query();

    return $content;
}

add_filter( 'the_content', 'dc_related_after_content'); 	

Lo que hace este código es:

  • Usar un filtro con el hook the_content para ejecutar una función que agregará los posts relacionados al contenido.
  • Dentro de la función comprobamos que sólo sea ejecutada cuando veo el detalle de un post.
  • Uso la función get_the_terms para obtener las categorías del post actual.
  • Paso los datos obtenidos desde el objeto a un array.
  • Recupero los datos de la base de datos con la clase WP_QUERY, pasando los argumentos como categoría, cantidad de posts, exclusión, y orden.
  • Empiezo el bucle para obtener los datos y concatenarlos en una variable, usando variables de plantilla.
  • Finalmente concateno los datos de la variable en la variable $content y usando igualmente una variable de plantilla

Posts relacionados sin usar plugins por etiquetas

En este caso el código es bastante similar al anterior, lo único que varía son los parámetros de la función get_the_terms usada para el filtro, y los argumentos de la clase WP_QUERY, en lugar de filtrar por categorías filtramos por tags. Así que usa uno u otro en función de tus necesidades

$terms = get_the_terms( get_the_ID(), 'post_tag');
 $loop   = new WP_QUERY(array(
                    'tag__in'           => $tags,
                    'posts_per_page'    => 4,
                    'post__not_in'      =>array(get_the_ID()),
                    'orderby'           =>'asc'
                    ));

Archivo CSS

Finalmente para dar a las entradas relacionadas un aspecto visual más atractivo agregaremos algo de CSS, este código debe ser agregado en algún archivo de estilos que ya está cargando nuestro theme. El código CSS aplicado en este ejemplo es el siguiente

.rel_posts {
  border-top: 1px dotted gray;
  padding-top: 20px;
}
.rel_posts:after {
  content: "";
  display: block;
  margin-bottom: 10px;
  padding-bottom: 10px;
  clear: both;
}
.rel_posts ul {
  width: 100%;
}
.rel_posts ul li {
  list-style: none;
  width: 20%;
  float: left;
  margin-left: 20px;
}
.rel_posts ul li .title_rel {
  display: block;
  padding: 4px;
}
@media only screen and (max-width: 600px) {
  .rel_posts ul li {
    width: 40%;
    margin-left: 15px;
    margin-bottom: 15px;
  }
  .rel_posts ul li:nth-child(odd) {
    clear: both;
  }
}

Tras hacer los cambios los posts relacionadas lucirán tal como se muestra en la siguiente imagen

Posts relacionados sin usar plugins

Conclusión

Si nuestro sitio ya tiene muchos plugins y queremos evitar instalar otro adicional, es buena idea colocar funcionalidad adicional como parte del theme en el archivo functions.php. Tener en cuenta que debemos documentar nuestros cambios o usar child-themes para no perder los cambios en una actualización de theme. Yo para estos casos suelo usar un plugin que me sirve para implementar todo el codigo de una manera aislada al tema. El plugin se llama Code Snipets

¡Que tengas un Ingenioso día!

¡que tengas un ingenioso día!

Contrata tu plan Ingenios@ de Sistemas por 5€ al mes y responderé a todas tus preguntas sobre tecnología en el menor tiempo posible. Pasa a formar parte de la comunidad Ingenios@s de Sistemas y disfruta de contenido exclusivo y aprende sobre sistemas Open Source, Blockchain, SmarContract, Web3, Inteligencia Artificial y Reaidad Virtual, súbete al tren de la Revolución 4.0

Si quieres estar al día y no perderte nada Suscribete al Podcast Ingenios@s de Sistemas, un episodio diario que te mantendrá informado y formado en esta vertiginosa carrera.

Deja un comentario

Share to...