Top

DecodeCMS

Tu WordPress a otro Nivel ...

Inicio / Tutoriales / Themes / Posts relacionados sin plugins en WordPress

Posts relacionados sin plugins en WordPress

Posts relacionados sin plugins

[ ] [ Autor: ] [ Themes - Intermedio] [ ]

Las entradas o posts relacionados son de gran ayuda para mantener a los visitantes leyendo en nuestro blog, en este artículo veremos cómo obtener esta funcionalidad de posts relacionados, pero sin usar plugins.

Existen básicamente dos maneras para obtener los posts relacionados: por Categorias o por Etiquetas (tags).

 

Código actualizado, puedes ver la nueva funcionalidad para fijar ciertas entradas específicas, adicionales a las entradas por categorías, revisa: Entradas relacionadas mejoradas sin plugins en WordPress.

 

Posts relacionados 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 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, se puede ver el código completo de posts relacionados por tags en el siguiente enlace.


$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 se puede descargar desde el siguiente enlace.

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

Entradas relacionadas sin 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.

El código utilizado en este artículo se puede obtener desde el respositorio de Github de Posts Relacionados

 
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.

 

Artículos Relacionados

Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (15 votos, promedio: 4,00 de 5)
Cargando…

Interacciones del lector

Comentarios

  1. Hola! En mi caso, me gustaría tener la posibilidad de añadir en mitad del post o al final … un articulo relacionado de mi gusto o aleatorio según la etiqueta o categoría con su correspondiente imagen destacada.

    Sabrían decirme cómo se puede hacer esto?

  2. Hola Jhon,

    Muy interesante. Funciona a la perfección.

    Echaré un vistazo al blog que hay varias cosas interesantes.

    Gracias por compartir.

  3. Hola Jhon, muchas gracias por compartir tu conocimiento.
    Me gusta mucho que expliques cada parte del código, así podemos aprender y entender como jugar con las entrañas de WP.
    Me suscribo a DecodeCMS, te meto en favoritos y te seguiré leyendo.
    Por cierto, el código funcionó a la perfección.
    Un saludo, y muchas gracias.

    • Hola, Sergio, si, esa es la idea de este sitio, gracias también a ti y estamos en contacto.

  4. Gracias por este aporte, me ahorraste buscar algun plugin que hiciera esta funcion como lo hace este trozo de codigo.

  5. buenas…
    Gran articulo me ha servido de inspiración!!!!.
    Tengo un problema con las miniaturas no aparecen todas…habria forma de implementar esta parte. Parece como si no pudieran entrar todas. gracias por tu trabajo

    • Tal vez tengas algún margen de más, prueba colocando menos % en el CSS .rel_posts ul li, por ejemplo: 

      .rel_posts ul li {
  width: 18%;
}

  6. Lo mejor para usar menos plugins gracias amigo por tu trabajo es uno de los mejores !!! Agradecería si también puedes hacer uno para caja de autor sin plugins gracias

      • Excelente gracias

  7. Que excelente post, y con CSS queda muy chulo. Pero tengo una duda y espero pueda ayudarme, quiero colocar los post relacionados fuera del the_content. Digamos debajo de cierto div dentro del single. Como podria moverlo a mi gusto. Una disculpa no se mucho de programacion. Saludos y gracias!

  8. Que puedo hacer para mostrar los post relacionados de la subcategoría.

  9. Me ha encantado tu post, funciona perfectamente! Y muchísimas gracias por compartirlo.

    Mi duda es qué tendría que hacer si en lugar de mostrar los post relacionados por categorías, lo que quiero mostrar son los últimos post.
    Muchas gracias!! 🙂

    • Hola Maso, gracias, para lo que comentas en la consulta quita la línea de category__in. Saludos.

  10. Hola Jhon, Excelente Post, explicas todo de una manera muy sencilla y fácil de entender, gracias a tus aportes entendí el funcionamiento de las Taxonomías y los CPT, y en este caso como agregar posts relacionados, en mi caso lo haré con tags y de forma aleatoria, Saludos!!

  11. Fantástica entrada de blog.
    Me surge una duda, discúlpame por que soy una novata total. Cuando muestra las imágenes destacadas me las muestra en su tamaño original (la solución que he encontrado es quitarlas del archivo de functions.php) pero no se si puede aplicar alguna linea de css que arregle esto. Para que todas salgan del mismo tamaño.

    • Hola, si, efectivamente puedes aplicar un código CSS para esto, sin embargo mejor tendrías que dejar las imágenes para ver cómo se están viendo y en base a eso hacer ajustes. Mejor contacta desde el formulario de contacto para enviar la url exacta de alguna entrada y ver el código.

  12. Hola Jhon:
    Acertada y útil tu aportación. Me pregunto si, además de entradas, el código serviría para páginas introduciendo alguna variación. Gracias.

    • Las páginas por defecto no tienen categorías ni etiquetas, tendrías que buscar alguna forma de relacionarlas antes.

  13. Buenas tardes, excelente explicación!!, pero en mi caso solo coge las categorías de las entradas y me gustaría que cogiera también de los custom post que tengo generados y que comparten categorías… esto es posible??

  14. Como ya han comentado ya lo definitivo sería que se pudieran mostrar fuera del content como dices con shortcode… nos iluminas 😉

    • :), puedes intentar hacerlo con lo que respondí anteriormente a Luis, igual evaluaré lo que comentas.

  15. me pasa como a Luis, se me escapa…. 🙁

  16. Hola, muy bueno! pero sabes como sería para un post type, ya que quisiera que aparesca en single-{slug}.php

    Gracias.

  17. Gracias por este interesante aporte, te consulto por añadir extracto del post relacionado despues del título.

  18. Cómo puedo integrar un carousel a este código?

    • Hola, por programación, sin embargo para el caso que comentas creo que ya sería mejor hacer un plugin, ya que tendrías que agregar javascript además sería bueno tener alguna interfaz para configurar. Saludos.

  19. Se agradece , muy buen aporte.

  20. Hola
    Excelente post. ¡Felicitaciones!
    Sin embargo, quiero hacerte una pregunta. Veo que el código carga imágenes en tamaño completo y eso no es bueno para el SEO. Podrías sugerirme ¿cómo modificar el código para servir imágenes a escala?

  21. Hola, genial aporte! Funciona de maravilla. ¿Me gustaría saber si sería posible forzar por código que el primero de los posts relacionados siempre fuese uno en concreto?
    Muchas gracias

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*