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).
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
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
(19 votos, promedio: 4,00 de 5)
Cargando...
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?
Hola Lorenzo
Podrías evaluar usar Javascript para mover o duplicar los artículos relacionados que te aparecen al final y colocarlos en algún lugar como parte de tu contenido.
Te sugiero revises : https://decodecms.com/duplicar-widget-wordpress-javascript/
Hola Jhon,
Muy interesante. Funciona a la perfección.
Echaré un vistazo al blog que hay varias cosas interesantes.
Gracias por compartir.
Que bueno que te sirvió. Saludos 🙂
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.
Gracias por este aporte, me ahorraste buscar algun plugin que hiciera esta funcion como lo hace este trozo de codigo.
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:
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
Hola, supongo que te refieres a la funcionalidad de caja de autor, en este caso si que hay más programación y hacerlo sin plugins puede complicarse, sin embargo te recomiendo un plugin muy liviano que he subido al repositorio de WordPress : https://es.wordpress.org/plugins/simple-author-bio/ .Saludos.
Excelente gracias
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!
Hola si no quieres usar el filtro, the_content, podrías evaluar hacer un short_code y ese shortcode lo puedes llamar por ejemplo desde un Widget de texto o desde una posición. Revisa por ejemplo: https://decodecms.com/que-son-los-shortcodes-en-wordpress-y-como-usarlos/ , sin embargo para lograr esto tendrías que programar, si no conoces mucho de programación tal vez te convenga usar un plugin. Saludos.
Que puedo hacer para mostrar los post relacionados de la subcategoría.
Hola, cambia el array que se pasa a la consulta WP_Query, es decir en lugar de usar ‘category__in’ , prueba usar sólo ‘cat’ que devuelve categorías y subcategorías, revisa la siguiente referencia:
https://codex.wordpress.org/Class_Reference/WP_Query#Category_Parameters
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.
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!!
Gracias Ewir, que bueno que te sirvió. Saludos.
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.
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.
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??
Hola, la consulta se hace con la clase WP_Query, por lo que puedes agregar parámetros adicionales, revisa:
https://codex.wordpress.org/Class_Reference/WP_Query, por ejemplo agregando: ‘post_type’ => ‘XXX’
Bravo!! no había caido!! muchísimas gracias….
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.
me pasa como a Luis, se me escapa…. 🙁
Hola, muy bueno! pero sabes como sería para un post type, ya que quisiera que aparesca en single-{slug}.php
Gracias.
En el código la función is_singular() puede aceptar como parámetro el tipo de post-type, revisa: https://codex.wordpress.org/Function_Reference/is_singular
Gracias por este interesante aporte, te consulto por añadir extracto del post relacionado despues del título.
Hola, podrías probar con un hook de filtro llamado : wp_title
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.
Se agradece , muy buen aporte.
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?
Hola, en la función para obtener la miniatura puedes pasar el tamaño, revisa: https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/ , aunque por defecto ya es el thumbnail (salvo hayas cambiado los tamaños de tu WordPress)
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
Hola Ramón, tal como esta, no es posible de forma simple, sin embargo tengo pensado hacer una modificación a ese código para que de alguna forma indiques uno o más artículos relacionados fijos para un artículo específico, permanece atento que igual lo publicaré.
Hola Ramón, he mejorado el código y he publicado un artículo explicando esta nueva funcionalidad: https://decodecms.com/entradas-relacionadas-mejoradas-sin-plugins-en-wordpress/
Hola! este aporte es tremendo, ¡que lo sepas!
Se que te han preguntado ya, pero no logro hacerlo. ¿Cómo puedo meter el extracto?
Quiero meterlo después de este código:
{thumb}
{title}
Hola sigue el mismo proceso, del thumb y el title, usa cualquier texto por ejemplo {excerpt} , luego la función que te retorna el resumen es https://developer.wordpress.org/reference/functions/get_the_excerpt/
hola john una pregunta , esta mejora la calidad de la pagina ? hace que carge menos o utiliza menos recursos te lo digo por que lo digo o si utilizo el plugins es igual ? espero su respuesta .
Hola, si agregas esto en el function.php PHP hace que la funcionalidad de entradas relacionadas sea parte de tu theme y no de un plugin. El código es bastante directo y no requiere interfaz de configuración, a diferencia de un plugin que te facilitará la administración pero tendrá más código que ejecutar. En resumen te evitas un plugin, aumenta la performance en la administración de tu sitio, no tanto en lo que ve el usuario ya que podrías tener un plugin de cache y al usuario le será indiferente.
Hola perdona mi ignorancia… pero hay que incluir tus códigos en el function.php y para que lo muestre en la página deseada que código hay que añadir??. Gracias.
Hola, sólo añade el código en el functions.php, el código usa Hooks, es decir el código que agregues en el functions.php tendrá efecto en todas las entradas gracias al Hook llamado “the_content”
Hola muy interesante tu post. Sin embargo, aún aplicando el estilo que compartes, no se muestra así como en la imagen, sino como en una lista y las imágenes no se adaptan al tamaño del código css. Qué puedo estar haciendo mal?
Hola, es posible que en tu caso por el theme que usas necesites hacer algunos ajustes CSS adicionales, puedes probarlo cambiando temporalmente de theme y verificar.
Hola, muchas gracias, me resulto muy útil este post porque
pude lograr un diseño muy personalizado.
En caso de querer optar por 8 post relacionados en lugar de 4, Cuál serían las CSS, es que salen descolocados los cuatro de abajo, pues se ajustan conforme la longitud de los títulos, gracias.
Hola, puedes evaluar dar una altura mínima al título para que no se descoloquen, agrega el siguiente código CSS:
Saludos.
Hola perdona pero soy novato pero me aparece el texto al lado derecho de la imagen cómo podría hacer que apareciese debajo
Hola, agregaste el código CSS : https://github.com/jmarreros/posts-relacionados/blob/master/estilos.css ?, tal vez no se agregó correctamente o es que tu theme tiene algunos elementos alguna clase CSS similar y hace conflicto.
Hola, de antemano gracias por compartir estás 2 opciones, tengo 2 web y en las 2 coloque una de cada una, pero sin embargo, a veces somos inconformistas.. je. Revise en tu web pero no logré ver si tenías algo relacionado: Si quisiera colocar POST RELACIONADOS. Pero en un widget de la sidebar? Estoy usando el tema de generatepress. Tendrás alguna nota en relación a eso? Muuuuchas gracias de nuevo porque después de varios meses veo que tu post sigue siendo muy bueno.
Hola Luis
Gracias por tu comentario.
Con respecto a lo que comentas, podrías evaluar hacer un shortcode con ese código y mostrar el shotcode como parte de un widget de texto, revisa el siguiente artículo: https://decodecms.com/que-son-los-shortcodes-en-wordpress-y-como-usarlos/
También podrías hacer un widget directamente, pero sería más código.
hola, el parametro que uno le pasa a la funcion cual es que estaba confundido con esa parte
Hola, podrías detallar un poco más a qué parte del código te refieres?, o en qué minuto del video aparece lo que comentas?
Saludos.
saludos bro, no me acepta el codigo me maraca erro y ya he intentado con varios y pasa lo mismo, no
sabes que pasa.
Lógicamente tienes que especificar qué error, posiblemente sea algo de sintaxis.
De todas formas puedes probar igualmente el código de este artículo: https://decodecms.com/entradas-relacionadas-mejoradas-sin-plugins-en-wordpress/
Bro, como le puedo hacer para que las entradas relacionadas me aparescan en otro lugar y no debajo del the_content()
Estoy diseñando una pagina que con css separa los en secciones el contenido, articulos relacionados y los comentarios, quiero que los articulos relacionados se mustren en su seccion, pero no se como hacerlo.
Ejemplo:
// aqui va todo el contenido texto, imagenes, categorias, etiquetas, etc.
// aqui quiero los articulos relaicionados
// aqui van los comentarios
Con el css solo hago que se vea como si fueran 3 cajas flotantes separadas.
Hola, si hay otros elementos que también se agregan a the_content con el hook, podrías evaluar cambiar la prioridad cuando llamas a add_filter(). Si aún así no se muestra entonces posiblemente sea alguna zona de tu theme, podrías evaluar incluso agregar nuevas zonas de widgets a través de código, revisa: https://decodecms.com/anadir-una-nueva-zona-de-widgets-a-un-theme-wordpress/
Hola BROO!! tremendo todos tus videos y tutoriales en tu web, necesito saber si, tienes una forma de mostrar en el front los post más visitados ?? que sea puro código. Muchas gracias!!
Hola, de momento no tengo ningún artículo sobre eso, espero realizar algo en un futuro post.
Saludos.
Gracias por tu explicación, muy clara e interesante.
Hola gracias, ¿Cómo hago para que las miniaturas se vean mas grandes?. Por favor mi estimado
Hola, cambia el código CSS, por defecto esta 20% el contenedor, revisa esta respuesta de un artículo similar: https://decodecms.com/entradas-relacionadas-mejoradas-sin-plugins-en-wordpress/#comment-10074
Muchas gracias a mi me has dado la vida con este post. Sólo tengo una pregunta, si quisiera que las miniaturas de las imágenes salieran más alargadas por ej 250×150 podría hacerlo?. Por adelantado no se programar, ni lo entiendo. Muchas gracias Jhon por estos artículos tan guays
Hola, no deberías tener problemas teniendo imágenes de otras dimensiones, sólo tienes que cuidar que todas tengan la misma dimensión para que se vean alineadas.
Todas tienen las mismas dimensiones, pero algunas me salen cortadas y son piezas de motos quedan un poco feas. Hay forma de poder indicar en el CSS por ejemplo un ancho y alto? Perdona el retraso el covid en mi ha hecho estragos…
Disculpa este código tiene un error de sintaxis, eso me dice:
Los cambios en tu código PHP se han revertido debido a un error en la línea <?php del archivo wp-content/themes/baskerville/functions.php. Por favor, arréglalo y trata de guardar de nuevo.
syntax error, unexpected '<', expecting end of file
Hola, tal vez copiaste la apertura de PHP al inicio, esto no sería necesario, pero lo coloco para que me reconozca la sintaxis.
Si elimine la linea <?php (es la primera) y me funciono.
Tengo otra duda, lo tengo por categorías, pero me aparecen casi siempre los mismos relacionados, y tengo muchísimas entradas con esa categoría, pero me aparecen los mismos.
Oye perdón por molestar pero como hago que el título de los post no sean tan largos, acortarlos