¿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.
¿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:
- Método 1: Cómo mostrar publicaciones relacionadas en WordPress por etiquetas
- Método 2: Cómo mostrar publicaciones relacionadas en WordPress por categoría
- Guías expertas sobre publicaciones relacionadas en WordPress
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.
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();.
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.
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.
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.
Guías expertas sobre publicaciones relacionadas en WordPress
¿Quieres aprender más sobre cómo mostrar publicaciones relacionadas en WordPress? Consulta estos útiles tutoriales sobre publicaciones relacionadas:
- Cómo mostrar publicaciones relacionadas en WordPress (paso a paso)
- Cómo mostrar entradas relacionadas del mismo autor en WordPress
- Cómo mostrar las publicaciones recientes en WordPress
- Cómo mostrar las publicaciones recientes de una categoría específica en WordPress
- Cómo agregar publicaciones relacionadas en línea en las entradas de blog de WordPress
- Cómo mostrar publicaciones aleatorias en WordPress
- Cómo mostrar páginas relacionadas en WordPress
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.
imranhunzai
¡Absolutamente genial! y sí, ayuda.
8MEDIA
amazing post ,, thanks
shaileshtr
Es bueno mostrar publicaciones relacionadas en un blog de WordPress sin complementos. Consumirá menos ancho de banda y tiempo de carga. http://shareitto.com Gracias por tu sugerencia.
zioneyemedia
Tengo una pregunta sobre esto: Estoy lidiando con el código para capturar publicaciones de categorías secundarias en lugar de categorías principales. ¿Algún consejo?
AmandaLong
¡Esto es genial... Gracias!
dustinporchia
Estoy intentando usar las publicaciones relacionadas por categoría y noté que dijiste que el código tiene que ir antes de los comentarios en el bucle principal. En mi código, quiero que las publicaciones relacionadas vayan después de los comentarios en el bucle. Cuando hago esto, noto que mi plugin de comentarios Disqus tarda más en cargarse ahora. ¿Es por un error con los comentarios o es normal?
dustinporchia
Olvídalo... acabo de cambiar a Livefyre, ya que esto es más lo que busco en un sistema de comentarios... ¡gracias!
subzerokh
por favor
¿alguien podría ayudar a un novato como yo a personalizar este script para que muestre las publicaciones relacionadas de forma horizontal?
de izquierda a derecha..
en lugar de mostrarlo actualmente de arriba abajo, verticalmente...
zioneyemedia
Hola,
Lo que hice fue reemplazar los códigos y con mi propio HTML y CSS. Los códigos crean listas para cada publicación, y eso suele ser de forma vertical.
——————
<a href="” rel=”bookmark” title=””> <a href="” rel=”bookmark” title=””>
——————
Reemplacé el inicial con y el final con como mis etiquetas HTML. Luego escribí mi CSS para que se ajuste a las necesidades específicas de esa clase div en tu sitio web. Por ejemplo, una clase pleft de muestra podría verse así:
.pleft {float:left; padding:2px; margin:10px; width:278px; height:190px;}
Utilizo el selector float: en mi CSS para mover las publicaciones horizontalmente, y los márgenes y el relleno para dar a cada publicación espacio entre ellas. Agregué un ancho y alto específicos para ejemplos adicionales.
Espero que esto ayude.
Simos
@zioneyemedia ¡gracias!
gcog
Tengo etiquetas relacionadas, seguro, pero cuando agrego el código no veo nada. Además, cuando agrego tu código para restringir a un tipo de publicación personalizado, me da un error. Cambié el tipo de publicación a mi tipo de publicación específico.
subzerokh
@wpbeginner hola
gracias por tu rápida respuesta…
pero soy un verdadero novato en todo lo que dices..
¿podrías dar un pequeño ejemplo?
¿para hacerlos horizontales como en tu propio blog?
puedes ponerte en contacto por mi correo: khiloc en gmail punto com
wpbeginner
@subzerokh Tendrías que editar el estilo. No es tan difícil. Simplemente envuelve cada publicación en un div. Especifica un ancho para ese div y luego establece una propiedad float left. Ajusta los márgenes y cosas así y lo tendrás.
subzerokh
¡¡hola a todos!! ¡¡gracias por este script maravilloso!!
¡¡Es lo único que encontré que hace exactamente lo que quería!!
Pero solo muestra las publicaciones relacionadas de forma vertical (de arriba a abajo)
Me gustaría que se mostraran de izquierda a derecha (horizontalmente)
¿Cómo se hace eso por favor??
ConnectIndia
Error Fatal error: Call to undefined function the_post_thumbnail() in /home/connec92/public_html/wp-content/themes/weekly/single.php on line 59 ¿Alguien puede ayudarme? sitio web http://www.connectindia.co.in
xavpro
¡Hola!
¡gran publicación! quizás podrías ayudarme:
tengo una miniatura automática si no se define ninguna,
if ($thumb_array[‘thumb’] == ”) $thumb_array[‘thumb’] = ‘link to your default thumbnail image’;return $thumb_array;
Ahora mi pregunta es cómo definir una miniatura para cada categoría, la cual se usará si no se define ninguna en la publicación.
dehahs
¡Funciona muy bien, gracias por compartir!
AdnanAsif
Hola
gracias por tu gran publicación..
Pero, ¿hay algún cambio para obtener publicaciones por categorías pero no en ul y li y no en miniatura?
Me refiero a que las publicaciones completas se muestren en publicaciones relacionadas... igual que en la página de inicio, con un enlace de 'leer más'.
gracias
esperando tu respuesta..
AdnanAsif
Hola
gracias por tu gran publicación..
Pero, ¿hay algún cambio para obtener publicaciones por categorías pero no en ul y li y no en miniatura?
Me refiero a que las publicaciones completas se muestren en publicaciones relacionadas... igual que en la página de inicio, con un enlace de 'leer más'.
gracias
esperando tu respuesta..
ibadullah25
¿Puedo tener un CSS para esto, por favor?
Personal editorial
El CSS que usamos era para el sitio de un cliente. Puedes agregar tu propio CSS sobre cómo quieres mostrar esto.
Administrador
titusmagnet
Gracias... estoy buscando este tipo de código
jaffa
Esto es genial, justo lo que estaba buscando. Me pregunto, sin embargo, ¿cómo podría combinar los dos anteriores y si no hay etiquetas, entonces muestra las publicaciones de la misma categoría?
Intentando resolver esto pero aún no he avanzado mucho
nikbanks
Gracias por el código, funcionó, pero ¿cómo lo estilizo? Me gustaría que fueran 4 historias una al lado de la otra como las tuyas. En mi sitio se muestran una encima de otra y no como las tuyas.
Personal editorial
Eso es CSS. No estamos usando este código para mostrar historias relacionadas. Segundo, creo que lo que estás diciendo son las historias destacadas en nuestra barra lateral. Hemos escrito otra publicación sobre eso en nuestro sitio.
Administrador
Coolguy
¿hay alguna forma de mostrar las miniaturas en publicaciones relacionadas sin usar imágenes destacadas o miniaturas de publicación?
es decir, usar cualquier imagen utilizada en la publicación...
Personal editorial
Sí, puedes utilizar las técnicas de respaldo compartidas por otros desarrolladores que extraen la primera imagen de la publicación. Pero recomendamos usar las miniaturas de las publicaciones de WordPress…
Administrador
Hetal
Gracias por este artículo. Me preguntaba si hay alguna forma de etiquetar automáticamente las publicaciones sin tener que ingresarlas manualmente.
Personal editorial
No, tienes que etiquetar cada publicación manualmente.
Administrador
Sisko
¡Genial!
¿Qué pasa si quiero mostrar publicaciones relacionadas por categoría sin miniaturas?
Gracias
Personal editorial
Just remove the thumbnail code from the code above
Administrador
Terry
Gracias por publicar este tutorial, me ayuda mucho.
Adrian
Hola… Solo quería decir que he estado construyendo mi sitio web de WordPress desde cero y este código me funciona perfectamente usando WP 3.1…. Todo lo que necesito hacer ahora es estilizar el CSS y conseguir algunas miniaturas para las publicaciones. Gracias por tu ayuda con el código.
lanzamiento de coche nuevo
gracias, ¡estoy buscando este truco desde hace tanto tiempo y tú me lo conseguiste!
Patricia
Hola, ¿hay alguna forma de excluir categorías? Tengo dos categorías principales a las que se asignan todas las categorías. Las categorías principales tienen subcategorías y me gustaría mostrar solo publicaciones relacionadas de las subcategorías.
¿Es esto posible, excluyendo los id's de las categorías principales?
¡Gracias por tu consejo!
Por cierto… ¡me encanta el código… y funciona genial!
Personal editorial
Deberías poder usar category not in <<
Administrador
usman
Estaba buscando plugins de publicaciones relacionadas con miniaturas, pero el código que pegaste arriba resolvió mi problema.
John
Solo una pregunta, ¿hay alguna forma de extraer solo etiquetas del mismo tipo de publicación? ¿Quizás usando algo como 'post_type=videos'?
John
Por cierto, también resolví esto:
Simplemente agrégalo al array:
$args=array(
‘category__in’ => $category_ids,
‘post__not_in’ => array($post->ID),
‘posts_per_page’=> 2, // Número de publicaciones relacionadas que se mostrarán.
‘caller_get_posts’=>1,
‘post_type’=>’videos’
);
marion
Hola,
Gracias por este tutorial. Me pregunto si hay alguna manera de que los productos relacionados se aleatoricen. He revisado diferentes productos en la misma categoría y se mostraron los mismos productos relacionados.
Gracias
Personal editorial
Sí, usa el parámetro Query_Post para el orden y puedes aleatorizarlo.
Administrador
Clarence Johnson
Bueno saberlo.
phdean
Hola,
Yo también quisiera aleatorizar las publicaciones que se muestran para las categorías, de lo contrario, se mostrarán las mismas 2 cada vez. ¿Podrías darme el código para hacer esto?
Many thanks in advance
John
Olvídalo, ya lo resolví. ¡Gracias por la publicación!
Personal editorial
¿cuál fue el problema?
Administrador
John
No tenía otras publicaciones con las mismas etiquetas, es decir, no había publicaciones relacionadas. Error tonto.
John
Copié este código y lo puse en mi single.php sin cambiar nada y no se muestra nada. ¿Hay algo mal en mi código? pastebin.com/kg0SkrAg
James
Esto no muestra una miniatura; ni siquiera hay una llamada para una imagen en el código. No veo cómo alguien puede hacer que esto funcione.
Personal editorial
El código para la imagen es: the_post_thumbnail(); << Esto no es HTML estático donde verás el código src de la imagen. La función llama a la base de datos para buscar una imagen destacada, también conocida como miniatura, que está adjunta a cada artículo. Si se encuentra, mostrará la imagen. Ahora, si no tienes habilitadas las miniaturas de publicaciones en tu tema, primero necesitas agregarlas:
https://www.wpbeginner.com/wp-themes/how-to-add-post-thumbnails-in-wordpress/
El artículo lo indicaba claramente en la sección de Nota. Deberías considerar leerlo a fondo.
Administrador
Roberto Silva
¡Oye amigo, amo tu blog!
¿Tengo una pregunta?
¿Puedes hacer el mismo truco pero "POR Autor"?
¿mostrando las últimas publicaciones por autor?
you will save my life
¡Por cierto, gracias por este sitio web!
Personal editorial
Yes we will que the article soon
Administrador
Roberto Silva
¡síííí, gracias…
Será un gran artículo.
porque "últimas publicaciones por autor sin plugin" es difícil de encontrar en internet.
eres el mejor.
Quinn
¡Gracias por este código! Lo he probado y funciona de alguna manera.
Puedo hacer que muestre una lista de artículos relacionados, lo cual es un gran beneficio.
Pero no parece que pueda hacer que aparezcan imágenes.
Los artículos tienen imágenes si este código las extrae.
También entré y creé imágenes para cada publicación con la etiqueta personalizada "relatedthumb". Pero, aún así, no hay imágenes.
¿Hay algo más que necesite hacer?
¡Muchas gracias de antemano!
Quinn
Personal editorial
Este truco utiliza las miniaturas predeterminadas de WordPress que se agregaron en WP 2.9. Si tienes una imagen adjunta como esa miniatura, entonces la extraerá.
Administrador
Anthony
¿Es posible excluir una categoría de este módulo?
Muchas gracias,
Anthony
Personal editorial
Solo mostrará publicaciones en la categoría en la que reside la otra publicación…
Administrador
Madhav Tripathi
Hola, gracias por este buen tutorial, actualmente estoy usando el tema Thesis, así que quiero saber si hay alguna manera en el tema Thesis de implementar este código .php.
Sophie
Estoy intentando modificar su código para usarlo con categorías dentro de un tipo de publicación personalizado. ¿Alguien puede ayudar? Soy bastante nuevo en php.
¡Gracias!
rulethenation
ok, lo logré, ¿hay alguna forma de poner una imagen predeterminada si no hay una miniatura disponible?
Personal editorial
Sí, puedes usar el parámetro 'if' para verificar si hay plugins... si no, puedes mostrar una imagen predeterminada.
Administrador
rulethenation
¿cómo lo haría? soy un novato en PHP, ¡jaja!
Quickbrown
Para usar imágenes predeterminadas cuando no haya una miniatura de publicación disponible, reemplace con <?php if (has_post_thumbnail()) {the_post_thumbnail()} else {echo '’;} ?>
Luego coloque un default-image.jpg en la carpeta de imágenes de su tema.
rulethenation
No puedo hacer que esto funcione, solo arruina todo mi diseño cerca de los comentarios, ¿me falta algo? tuve que quitarlo de mi sitio.
Clarence Johnson
Mis publicaciones ahora están enriquecidas gracias a ti y a este tutorial.
Heather Hill
¡Hola!
¡Gracias por esta información! Esto es exactamente lo que estaba buscando.
¿Hay alguna forma de agregar un extracto a esto, junto con la foto?
¡Gracias de nuevo por tu ayuda!
Personal editorial
Sí. Simplemente agrega the_excerpt(); donde quieras que se muestre el extracto.
Administrador
Jez
¡Gracias por esto, es exactamente lo que estaba buscando! Me encanta lo directo que eres en tus artículos, sin confusiones.
Omer Greenwald
Gracias por compartir. He estado usando este código por un tiempo pero tiene un problema: al agregar etiquetas a una publicación, WP las ordena alfabéticamente independientemente de la prioridad que les haya agregado. Por lo tanto, este código muestra publicaciones relacionadas que coinciden solo con la primera etiqueta, lo que a veces es menos relevante.
¿Quizás tenga alguna idea sobre cómo evitar esta autoordenación de etiquetas por parte de WordPress o alguna otra solución?
Personal editorial
No está usando la primera etiqueta. Este código está utilizando todas las etiquetas de las publicaciones para encontrar publicaciones relacionadas.
Administrador
Clarence Johnson
Yo también estoy experimentando el mismo problema.
Doug C.
Todo ese primer código solo ponía dos instancias de la misma publicación en la página. No mostraba nada relacionado.
Personal editorial
Doug, por favor contáctanos usando el formulario con un ejemplo de enlace en vivo, y podremos ayudarte. Sabemos que este código funciona porque algunos de nuestros clientes lo están usando en sus sitios.
Administrador
Noor
Artículo muy útil, gracias por actualizarlo
Liam
Gran tutorial. ¿Alguien podría mostrarme un single.php funcional con este código?
Todavía estoy aprendiendo PHP.
Desafortunadamente
Error de análisis: error de sintaxis, T_ENDIF inesperado en C:\xampplite\htdocs\mock\wp-content\themes\scwd\single.php en la línea 76
Personal editorial
Aquí hay un ejemplo funcional Flowtown Blog.
Ten en cuenta que este código es para que funcione dentro del bucle. ¿Dónde intentas publicar esto? Si está fuera del bucle, simplemente agrega el código de fin de if `endif;` << así.
Administrador
Liam
http://pastebin.com/m60c96f5f
Espero que el enlace funcione. Gracias.
Personal editorial
No sé qué podría estar saliendo mal. Después de la clase `clearfloat` debería funcionar bien. Así es como lo pusimos en Flowtown y está funcionando perfectamente.
Liam
Terminaré el tema y lo probaré en un sitio en vivo en lugar de XAMPP. Te avisaré.
Shahab
¡Buen tutorial!
Ahora mismo estoy usando YARPP pero me encantaría probar esto.
¡Gracias!
Suriya Kumar P
Ustedes están haciendo un gran trabajo. Muchas gracias.
Vivek @ InfoEduTech
Gracias por este artículo. He estado buscando mucho tiempo para mostrar las miniaturas con mi artículo y no he podido hacerlo. He probado muchos plugins de WordPress pero no he podido. Espero que esto me ayude.