Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
25 Millones+
Sitios web que usan nuestros plugins
16+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

Cómo: Publicaciones relacionadas con miniaturas en WordPress sin plugins

¿Desea mostrar una lista de publicaciones relacionadas en su sitio web de WordPress y prefiere usar código en lugar de un plugin?

En WPBeginner, a menudo enfatizamos la importancia de involucrar a su audiencia y mantenerlos explorando su contenido. Una estrategia efectiva que hemos visto utilizada en innumerables sitios exitosos de WordPress es mostrar publicaciones relacionadas.

Cuando los visitantes de su blog terminan de leer un artículo que les interesa, ofrecer una lista de publicaciones relacionadas los mantendrá interesados y les ayudará a encontrar nuevo contenido para leer.

En este artículo, le mostraremos cómo mostrar publicaciones relacionadas con WordPress usando código, sin necesidad de un plugin.

Cómo: Entradas relacionadas con miniaturas en WordPress sin plugins

¿Por qué mostrar publicaciones relacionadas en WordPress?

Cuando su blog de WordPress comienza a crecer, puede volverse más difícil para los usuarios encontrar otras publicaciones sobre el mismo tema.

Mostrar una lista de contenido relacionado al final de cada publicación de blog es una excelente manera de mantener a sus visitantes en su sitio web y aumentar las visitas a la página. También ayuda a mejorar la visibilidad de sus páginas más importantes al mostrar su mejor contenido donde las personas pueden encontrarlo fácilmente.

Si no estás familiarizado con el código, te resultará más sencillo elegir uno de los muchos plugins de publicaciones relacionadas para WordPress que pueden mostrar publicaciones relacionadas sin necesidad de código.

Pero, si alguna vez te has preguntado si puedes mostrar publicaciones relacionadas sin usar un plugin, compartiremos dos algoritmos diferentes que puedes usar para generar publicaciones relacionadas con miniaturas usando solo código:

Nota: Si deseas mostrar una miniatura con cada publicación relacionada, asegúrate de agregar primero una imagen destacada a esas publicaciones.

Método 1: Cómo mostrar publicaciones relacionadas en WordPress por etiquetas

Una forma eficiente de localizar contenido relacionado es buscar otras publicaciones que compartan las mismas etiquetas. Las etiquetas se usan a menudo para centrarse en los detalles específicos contenidos en una publicación.

Teniendo esto en cuenta, es posible que desees agregar algunas etiquetas comunes a las publicaciones que deseas relacionar entre sí. Puedes ingresarlas en el cuadro 'Etiquetas' en el editor de WordPress.

El cuadro de configuración de 'Etiquetas' en el editor de WordPress

Después de haber agregado etiquetas a tus publicaciones, lo siguiente que debes hacer es agregar el siguiente fragmento de código a la plantilla single.php de tu tema.

Si necesitas ayuda para agregar código a tu sitio, consulta nuestra guía sobre cómo pegar fragmentos de la web en WordPress.

$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'=>5, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
   
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
   
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
   
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();

Este código busca etiquetas asociadas con una página y luego ejecuta una consulta a la base de datos para obtener páginas con etiquetas similares.

¿Dónde debes colocar el código? Eso depende de tu tema, pero en la mayoría de los casos, deberías poder pegar el código en la plantilla single.php de tu tema, después del post principal y justo antes de la sección de comentarios.

Si estás usando el tema Twenty Twenty-One, como nosotros en nuestro sitio de demostración, entonces un buen lugar para pegar el código es en el archivo template-parts/content/content-single.php después del encabezado y justo después de <?php the_content();.

Vista previa de contenido relacionado por etiquetas

Esto mostrará automáticamente contenido relacionado en cualquier post de WordPress.

Necesitarás cambiar el estilo y la apariencia de tus posts relacionados para que coincidan con tu tema agregando CSS personalizado.

Ejemplo de entradas relacionadas

Consejo: En lugar de editar los archivos de tu tema, lo que podría dañar tu sitio web, te recomendamos usar un plugin de fragmentos de código como WPCode.

WPCode hace que sea seguro y fácil agregar código personalizado en WordPress. Además, viene con opciones de 'Inserción' que te permiten insertar y ejecutar fragmentos automáticamente en ubicaciones específicas de tu sitio de WordPress, como después de una publicación.

Opciones de inserción de WPCode para fragmentos de código personalizados

Para más detalles, consulta nuestra guía sobre cómo agregar código personalizado en WordPress. También puedes consultar nuestra reseña detallada de WPCode para obtener más información sobre el plugin.

Método 2: Cómo mostrar publicaciones relacionadas en WordPress por categoría

Otra forma de mostrar contenido relacionado es listar las publicaciones que están en la misma categoría. La ventaja de este método es que la lista de publicaciones relacionadas casi nunca estará en blanco.

Al igual que el Método 1, necesitas agregar un fragmento de código a la plantilla single.php de tu tema o en un plugin de fragmentos de código como WPCode. Para más detalles, consulta el Método 1 y nuestra guía sobre cómo agregar código personalizado en WordPress.

$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 2, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
   
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();

Ahora verás una lista de contenido relacionado al final de cada publicación.

Si deseas cambiar el estilo y la apariencia de tus páginas relacionadas, entonces necesitarás agregar CSS personalizado para que coincida con tu tema.

¿Quieres aprender más sobre cómo mostrar publicaciones relacionadas en WordPress? Consulta estos útiles tutoriales sobre publicaciones relacionadas:

Esperamos que este tutorial te haya ayudado a aprender cómo mostrar publicaciones relacionadas con miniaturas en WordPress sin plugins. También es posible que desees aprender cómo rastrear visitantes a tu sitio de WordPress, o consultar nuestra lista de 24 consejos para acelerar tu sitio web.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Consulta cómo se financia WPBeginner, por qué es importante y cómo puedes apoyarnos. Aquí está nuestro proceso editorial.

El Kit de herramientas definitivo para WordPress

Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Interacciones del lector

184 CommentsLeave a Reply

  1. Hola,

    Tengo una opción de 'Publicaciones relacionadas' de mi tema de WordPress y ya la estoy usando. He mostrado 6 publicaciones después del contenido. El problema es que solo muestra 3 publicaciones relacionadas y las siguientes tres se pueden ver cuando se desliza horizontalmente. No quiero esa opción, quiero que el sitio muestre las 6 publicaciones de inmediato. ¿Puedes decirme cómo hacerlo?

  2. Hola,

    Tu guía fue increíble, pero ¿cómo puedo excluir una categoría específica de las publicaciones relacionadas para que no se muestre?

    ¡Gracias, por adelantado!
    Atentamente,
    LAszlo Gyuricza

  3. Buena solución pero no definitiva para mi exigencia. De hecho, el principal problema es que este código ordena las publicaciones relacionadas por las más recientes de la misma categoría o etiquetas. El resultado es que cuando navegas dentro de una categoría/etiqueta, siempre mostrarás las mismas últimas publicaciones, limitando mucho las publicaciones antiguas de tu sitio. ¿Es esa una conclusión correcta? ¡Por favor, si lo has probado, comparte tu opinión!

    • 1. Después de ‘caller_get_posts’=>1, pon una coma (,)
      2. Presiona el botón de enter [siguiente línea]
      3. Agrega ‘orderby’=>’rand’
      Listo. Ahora se mostrarán publicaciones relacionadas aleatoriamente. Gracias.

  4. Este código funciona muy bien. Me preguntaba si podrías explicar qué hace esta parte del código.

    $orig_post = $post;
    global $post;

    $post = $orig_post;

    Creo que tengo una idea de lo que hace el resto, pero esto me está confundiendo.

    ¡Gracias por todo tu excelente contenido!

  5. en el tema predeterminado Twentyfifteen, ¿dónde debo insertar este código en el archivo single.php? Si lo inserto antes de endwhile;, muestra un error de sintaxis, 'endwhile' inesperado, y si lo inserto después de endwhile;, pero antes de endif;, muestra un error de sintaxis, 'endif' inesperado

    ¿Alguna solución para esto?

    Gracias

  6. en el tema predeterminado Twentyfifteen, ¿dónde debo insertar este código en el archivo single.php? Si lo inserto antes de enwhile;, muestra un error de sintaxis, 'endwhile' inesperado, y si lo inserto después de enwwile, pero antes de endif;, muestra un error de sintaxis, 'endif' inesperado

    ¿Alguna solución para esto?

    Gracias

  7. ¡Hola! ¡Gran publicación!

    ¿Hay alguna forma de combinar ambas opciones, para llamar a las etiquetas relacionadas solo en la categoría actual?

  8. mi diseño de single.php:

    //the_content bla bla bla código aquí

    //Copiar y pegar código de Publicaciones Relacionadas por Etiquetas aquí

    //comments_template bla bla bla código aquí

    ——————————-
    el resultado que obtuve fue un error:
    Error de análisis: error de sintaxis, inesperado 'endwhile' (T_ENDWHILE) en ...
    ——————————-
    después de cambiar " <? } " por " <?php } " funcionó.

    just sugestion, maybe it better if you put complete php open tag
    thanks :)

  9. Funciona perfecto. ¿Cómo excluir la etiqueta definida de Publicaciones Relacionadas por Etiquetas? Me refiero a cómo cambiar el código para que el algoritmo encuentre otras publicaciones con cualquiera de las etiquetas (excepto la etiqueta 595, por ejemplo) que tiene la publicación actual y las liste.

  10. Gracias por el excelente código
    Funciona muy bien, pero no abordaste ningún código CSS para un aspecto más bonito en esta sección. ¿Podrías hacerlo? Soy nuevo en la codificación y probé algunos códigos, pero no funcionaron. En tus códigos hay:
    echo ‘Related Posts’;
    pero en algunos códigos similares que encontré en otros recursos hay:

    y en CSS algunos códigos como este:
    .relatedposts {
    font-size: 12px;
    width: 640px;
    }
    .relatedposts h3 {
    font-size: 20px;
    margin: 0 0 5px;
    }
    le darán un aspecto agradable pero no funcionó con tu código.
    Gracias

  11. Estimado colega, este es un error que obtengo al pegar este código en el archivo single.php. ¿Podría decirme exactamente dónde debo pegar este código?

    Error de análisis: error de sintaxis, fin de archivo inesperado en C:\xampp\htdocs\beingusefull\wp-content\themes\TechPlus\single.php en la línea 78

  12. Eso dependerá de tu tema y plantilla individual. Necesitas agregar la etiqueta condicional después de que comience el bucle de WordPress. Después de esta línea:
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    • Yo también tuve ese error y este es mi código actualizado:
      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’=>5, // Número de posts relacionados que se mostrarán. ‘caller_get_posts’=>1 ); $my_query = new wp_query( $args ); if( $my_query->have_posts() ) { ?> Posts Relacionados have_posts() ) : $my_query->the_post(); ?> <a href="” rel=”bookmark” title=””>

      <a href="” rel=”bookmark” title=””>

    • Si estás usando el plugin Yoast’s WordPress SEO, puedes especificar la URL de la miniatura en la pestaña social de la publicación. Si la pestaña social no se muestra, necesitas hacer clic en el enlace Yoast SEO en el menú de administración de WordPress y luego hacer clic en “Social”. En la página social, marca la opción “Add Open Graph meta data” y guarda. Vuelve a tu publicación y podrás especificar la imagen en miniatura que deseas usar cuando se comparta la publicación. Si no estableces explícitamente la imagen de la publicación, el usuario tiene la opción de seleccionar cualquier imagen que aparezca en la página, por eso tus imágenes de publicaciones recientes se extraen cuando compartes el enlace del artículo.

  13. ¿Alguna idea de cuánta carga de base de datos/servidor representaría esto en un sitio grande autohospedado? Busco una alternativa a las publicaciones relacionadas ahora que #nRelate ya no está disponible.

  14. Esto no me funciona en single.php, porque las publicaciones relacionadas aparecen al final de la página. Funciona con loop.php, pero entonces también aparecen en la página de inicio. ¿Alguna idea para arreglarlo y que solo aparezca en las publicaciones individuales y no en la página de inicio?

  15. Hola, debo ser la única que no lo está haciendo correctamente. Mi tema soporta imágenes destacadas, agregué este código antes de los comentarios dentro del archivo single.php. ¿Algún consejo sobre exactamente dónde introducirlo en el código?

  16. ¿Hay alguna forma de agregar paginación a la consulta de publicaciones relacionadas? No parece que la paginación funcione en una consulta secundaria dentro de single.php. ¡Gracias!

  17. Hola, quiero preguntar, ¿hay alguna forma de hacer que las publicaciones relacionadas sean por categoría y etiquetas en un solo lugar? Gracias.

  18. ¿Hay alguna forma de elegir una sola categoría (llamémosla Marcas) y luego que muestre publicaciones relacionadas solo afiliadas a las subcategorías de Marcas? Entonces, la jerarquía de las categorías sería Marcas > JCPenny. Quiero mostrar solo publicaciones relacionadas para JCPenny. Pero, esa subcategoría podría ser diferente por publicación. Entonces, si una publicación usa una subcategoría diferente, mostrará publicaciones relacionadas para esa subcategoría. ¿Se puede modificar este código para manejar eso de alguna manera?

  19. Hola, gracias por el código, pero en lugar de tomar la imagen destacada como miniatura, ¿puedo tomar la primera imagen de mis publicaciones? Gracias

  20. ¡Gran publicación, gracias! Dirijo un sitio web que usa WP más como un CMS con un gran número de páginas en lugar de publicaciones. ¿Puedo hacer esto con páginas relacionadas en su lugar, para que esté obteniendo páginas relacionadas y no publicaciones? Si es así, ¿cómo lo hago?

    Thanks for the help :)

  21. Esto. Es. Increíble. WPEngine comprensiblemente no permite complementos de publicaciones relacionadas, salvo algunas excepciones. Probé algunos y realmente no me gustaron. Puse este código en single.php y ¡listo! Gracias.

  22. Esto está bien, pero quiero hacerlo con el título de la publicación en lugar de etiquetas o categorías. ¿Alguna sugerencia para eso, syed!!

  23. Hola amigos, pequeño problema que me aparece: “Parse error: syntax error, unexpected ‘endwhile’ (T_ENDWHILE) in C: \ xampp \ htdocs \ z1 \ wp-content \ themes \ mytheme \ single.php on line 65” encontrar Pero qué ..? Gracias

  24. Me encanta este fragmento de código, ¡lo uso habitualmente! Una pregunta: ¿Hay alguna forma de excluir algunas etiquetas en el código?

  25. Echa un vistazo al código de publicaciones relacionadas por categoría. No funcionará a menos que agregues algo de php, las tres letras antes de empezar con echo. Agrega php y no será ignorado. En cualquier caso, se ignora y WordPress llora cada vez con una nota de error. Gracias por el código, por cierto, e hizo mi trabajo mucho más fácil. Muchas gracias por eso y ajústalo,

  26. Además, tengo una pregunta más,

    ¿Qué pasa si quisiera mostrar una publicación específica que contenga una etiqueta determinada a todas las publicaciones, ¿cómo lo haría?

  27. ¡Hola, esto es genial! Ahora puedo deshacerme de mi plugin de publicaciones relacionadas, ¡así que muchas gracias por eso!

    Una pregunta que tengo es, ¿cómo puedo mostrar la publicación relacionada en 2 columnas?

    Una vez más, esto ha sido de gran ayuda para mí.

  28. ¡Hola! Gracias por tu útil información para aquellos, como yo, que no saben nada de programación, ¡pero aún así quieren tener un blog! Acabo de incorporar tu código de 'publicaciones relacionadas por etiquetas' a mi archivo de publicación individual. Funciona excepto por las fotos. No se muestran en absoluto y los títulos de mis publicaciones relacionadas se muestran uno debajo del otro, como una lista. ¿Qué hice mal? ¡Gracias de antemano por tu respuesta!

  29. Hola,

    ¡Este código es increíble! Muchas gracias. ¿Hay alguna forma de hacer que el código muestre publicaciones relacionadas de OTRO SITIO? Así busca las publicaciones de otro sitio que muestro debajo de la publicación como una publicación relacionada en mi sitio.

    ¡Gracias!

  30. Hola,
    Estoy usando un tema que funciona con publicaciones personalizadas. Me pregunto si intento tu código, ¿qué parte debería editar para mostrar solo esas publicaciones personalizadas en lugar de las publicaciones regulares?

    Gracias

  31. Hola,

    No puedo encontrar el single.php donde tengo que insertar este código.

    El problema es que estoy usando Balance Theme + Genesis. Así que en Genesis, puedo encontrar Single.php, pero dice "No editar bajo ninguna circunstancia", y de hecho he pegado el código allí, pero hizo que mi sitio dejara de abrir páginas por completo.
    Y en el Child Balance Theme, no hay Single.php...

    ¿Alguna sugerencia?

    • Sí, no edites el archivo del framework. Tendrías que familiarizarte con los hooks y filtros de Genesis. Luego agrega el código en uno de los hooks del bucle para la página individual usando tu archivo functions.php. Desafortunadamente, debido a la cantidad de frameworks que existen, no podemos cubrir nuestros consejos para todos los frameworks.

      Administrador

  32. ¡Hola! Este es un código muy útil. ¿Es posible usarlo para crear una página personalizada que muestre todas las publicaciones, como un mapa del sitio pero con miniaturas? Algo así como:

    Categoría 1
    —– código de publicaciones relacionadas (todas las publicaciones de esa categoría) ——

    Categoría 2
    —– código de publicaciones relacionadas (todas las publicaciones de esa categoría) ——

    etc. Sería una gran exhibición para categorías con pocas publicaciones. ¡Gracias por leer y por tu ayuda!

  33. Hola,

    muy útil tu "Entradas Relacionadas por Categoría".

    A veces creo que es mejor tener código sin procesar en lugar de usar un plugin que no es tan expansible...

    ¡Gracias!

  34. Thank you thank you thank you!! A simple copy paste bit of code that just gets on with it and works – does exactly what it says. This is exactly what I was looking for :)

  35. ¡Hola!

    necesito ayuda...

    ¿Cómo puedo filtrar... la categoría, pero si tengo categorías padre e hijo y solo muestro la entrada hija. ej:

    – producto (todos los productos, este es el padre) (id 104)

    – KindOfProducts (subcategoría, esta es la hija) (id 109)

    – KindOfProductsTwo (subcategoría, esta es la hija) (id 110)

    en productos tengo todas las entradas pero solo necesito mostrar las relacionadas de la hija: KindOfProducts.

    lo intento con esto:

    $args = array(

    ‘category__in’ => $category_ids,

    ‘category__not_in’ => 104,

    ‘post__not_in’ => array($post->ID),

    ‘orderby’=> ‘rand’,

    ‘showposts’ => 100,

    ‘ignore_sticky_posts’ => 1

    );

    pero no me muestra nada…

    y lo intento con este otro:

    $args = array(

    ‘category__in’ => $category_ids,

    ‘child_of’ => 104,

    ‘post__not_in’ => array($post->ID),

    ‘orderby’=> ‘rand’,

    ‘showposts’ => 100,

    ‘ignore_sticky_posts’ => 1

    );

    y nada

    ¿ayuda? ¡gracias!

Deja una respuesta

Gracias por elegir dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de comentarios, y tu dirección de correo electrónico NO será publicada. Por favor, NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.