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. Las publicaciones relacionadas son una forma increíble de atraer a los usuarios a más contenido en tu sitio web. Después de leer varios de tus artículos sobre este tema, finalmente entendí el poder de esta función y la implementé en mi página 404. Ahora, en lugar de mostrar contenido que ya no existe, ofrece alternativas y artículos similares a mis usuarios. Esto ha reducido enormemente la tasa de rebote de mi sitio web. Gracias no solo por este artículo, sino también por los otros artículos que has escrito sobre este tema. Me han ayudado a mejorar mi página 404.

  2. Estaba intentando corregir las publicaciones relacionadas de WordPress, pero no estaba funcionando cuando vi este código y lo usé en mi archivo de WordPress, así que ahora mis publicaciones relacionadas de WordPress se muestran correctamente.

  3. ¿Hay alguna forma de tener publicaciones relacionadas basadas en el título de la publicación? No tengo etiquetas y mis categorías realmente no funcionan, ya que no hay distinción entre ellas.

    Esto sería de gran ayuda si tuvieras un código para mostrar contenido relacionado basado en el título de la publicación.

  4. Gracias por tu amable publicación.

    Aquí se debe usar “ignore_sticky_posts” en lugar de “caller_get_posts”. Porque “caller_get_posts” está obsoleto.

    • Este método limita las publicaciones a la categoría en la que se encuentra la publicación. Para limitar las categorías, necesitarías crear una declaración if para excluir ciertas categorías.

      Administrador

  5. ¿Es posible que cuando haya más de X publicaciones relacionadas por categoría que estén relacionadas, puedas aleatorizar, digamos, 3 publicaciones?

    • Si bien es posible, requeriría agregar mucho más a esto, es posible que desees buscar un plugin para ese tipo de personalización.

      Administrador

  6. Encontré una manera de hacer las miniaturas más pequeñas, pero las muestra en una columna y no horizontalmente. ¿Cómo se puede modificar esto?

  7. El script está funcionando bien. El único problema que tengo es que las miniaturas son muy grandes. ¿Habría alguna manera de hacerlas más pequeñas?

  8. cómo hacer para crear un shortcode para este código, creé la función pero no sé cómo devolver la impresión a la página.

  9. Por qué estoy enfrentando este problema. error de sintaxis, fin de archivo inesperado
    Por favor, ayúdenme.

  10. Hola,
    Soy principiante en WordPress.
    Me gustaría mostrar Entradas Relacionadas.
    En el menú principal tengo la Categoría A, y en la Categoría A – Subcategorías A, B y C. Las entradas están en la Categoría A, pero también pueden estar presentes en las 3 Subcategorías.
    Al elegir una de las Entradas Relacionadas algo sale mal y las entradas de la Subcategoría elegida inicialmente ya no se muestran correctamente.

  11. Hola Admin, artículo muy informativo. Me gusta tu sitio por su simplicidad y franqueza. Todos los artículos van al grano, pero cuando se trata de compartir el conocimiento del código, te vuelves demasiado técnico. Simplemente ignora el hecho de que muchos de los visitantes no son expertos en codificación. ¿No sería mucho mejor si agregaras 2 o 3 líneas más a tu explicación para que sea completa y fácilmente comprensible para todos? De todos modos, gran artículo. Pero quiero saber, ¿qué código o plugin está usando Wpbeginner?

  12. Lo que realmente apesta de tus artículos es que nunca dices CÓMO hacer algo. Está muy bien que me digas que ponga código en mi single.php, pero como principiante no sé qué es eso ni dónde encontrarlo. Quizás quieras pensar en incluir este tipo de información crítica en tus artículos en lugar de asumir que sabemos lo que significa, o que hemos navegado por todos tus artículos para averiguarlo.

  13. Gracias por la excelente publicación, muy útil. Me encontré con un error en el código, así que quería compartirlo con la esperanza de que sea útil para otros en el futuro. El error fue:

    Se llamó a WP_Query con un argumento que está obsoleto desde la versión 3.1.0! “caller_get_posts” está obsoleto. Usa “ignore_sticky_posts” en su lugar.

    Así que simplemente lo reemplacé y funcionó bien. También estoy usando espacios de nombres, así que necesité cambiar WP_Query a \WP_Query, además de cambiar el orden de lo siguiente:

    global $post; $orig_post = $post;

    Gracias de nuevo
    Rose

  14. señor
    Estoy usando el código de categorías que funciona correctamente, pero una cosa es que cuando en la página de inicio la misma categoría tiene 2 o 3 publicaciones, el enlace se muestra en negro, pero quiero que se muestre la categoría que es la siguiente publicación.

  15. Hola,

    Gracias por tu publicación. Agregué el código en content-single.php y funcionó. Sin embargo, se muestra como 1 columna, no como 3 columnas como en tu ejemplo. ¿Podrías ayudarme con esto? Quiero que mis publicaciones relacionadas se muestren en 1 fila, 3 columnas. Muchas gracias.

  16. 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?

  17. 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

  18. 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.

  19. 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!

  20. 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

  21. 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

  22. ¡Hola! ¡Gran publicación!

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

  23. 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 :)

  24. 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.

  25. 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

  26. 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

  27. 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.

  28. ¿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.

  29. 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?

  30. 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?

  31. ¿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!

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

  33. ¿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?

  34. 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

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.