Mostrar entradas relacionadas sin plugin

Con el siguiente código, que deberás situar en el archivo single.php, podrás mostrar entradas relacionadas de un artículo de tu blog, sin necesidad de utilizar ningún plugin.

La relación se establecerá en función del resultado de la búsqueda de otros artículos del blog que pertenezcan a las mismas etiquetas. Si el artículo no tiene etiquetas, no se mostrará ningún artículo relacionado.

Puedes ver el resultado al final de artículo.

<div class="relacionadas">
<h3>Entradas relacionadas</h3>
<?php
$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'=>4, // Número de entradas relacionadas a mostrar.
		'caller_get_posts'=>1
	);
	$my_query = new wp_query( $args );

	while( $my_query->have_posts() )
	{
		$my_query->the_post(); 

		?><div class="miniaturarelacionada">
		<a rel="nofollow" href="<? the_permalink()?>">
			<?php the_post_thumbnail(array(150,150)); ?>
		</a>
		<a title="<?php the_title(); ?>" href="<? the_permalink()?>">
			<?php the_title(); ?>
		</a>
		</div><?php
	 }
}
$post = $orig_post;
wp_reset_query();
?>
</div>

Y a continuación, algo de código CSS que te permitirá dejarlo más bonico

.relacionadas {
	border-bottom: 1px dotted #DCDCDC;
	padding-bottom: 1em;
}

.relacionadas h3 {
	font-size: 20px;
	margin: 0 0 15px 0;
	text-align: center;
	padding-bottom: 0.5em;
	border-bottom: 1px dotted #DCDCDC;
}
 
.miniaturarelacionada {
	margin: 4% 2%;
	width: 100%;
	display: inline-block;
	text-align: center;
	transition: all ease 0.5s;
	vertical-align: top;
	font-size: 13px;
}

.miniaturarelacionada a {
	color: #333;
	text-decoration: none;
	display:block;
}

.miniaturarelacionada:hover img {
	border: 6px solid #EFEFEF;
	color: #000;
}

.miniaturarelacionada img {
	border-radius: 50%;
	border: 6px solid #FFFFFF;
	transition: border linear 0.25s;
}
 
@media (min-width: 420px)
{     
	.miniaturarelacionada {
		width: 49%;
		margin-left: 0;
	}
	.miniaturarelacionada:nth-child(odd) {
		margin-right: 0;
	}
}

@media (min-width: 680px)
{     
	.miniaturarelacionada {
		width: 23.5%;
		margin-bottom: 0;
		margin-top: 0;
		margin-right: 2% !important;
	}
	
	.miniaturarelacionada:last-child {
		margin-right: 0 !important;
	}
}

8 comentarios en «Mostrar entradas relacionadas sin plugin»

  1. Muchas gracias por el código, después de probar varios este si me funciono perfecto!

    Si quisiera que las miniaturas se mostraran en cuadro en lugar de círculo que debo modificar?

    Saludos.

    Responder
  2. Muchas gracias, funciona perfecto! De hecho, ya lo he implementado, pero me surge una duda y es que en la versión mobile excede los límites del ancho de la pantalla . ¿Cómo puedo solucionarlo?

    ¡Gracias de antemano, saludos!

    Responder
    • ¡Hola Flor!

      He probado a revisar tu web eljardinencasa.com y no veo que de fallo ¿quizá lo has solucionado ya? Ya me comentarás.

      Saludos 😉

  3. Hola! Antes que nada, quiero agradecer el que te hayas ocupado en verlo y contestarme. Antes de conocer tu blog, yo había puesto un plugin que luego desactivé (pero no eliminé), para ver si podía hacerlo sola, con los códigos que pusiste en este artículo. Hasta que finalmente lo borré y ahí sí, quedó y se veía de maravilla. Y digo “quedó”, porque las líneas de código tuve que ponerlas en el tema Astra y no pude ponerlo en el tema hijo. Había quedado hermoso, hasta que actualicé wordpress… El single.php (que es donde debería poner el código), tiene el layout, pero sólo en el tema padre. Tienes idea de cómo resolverlo? Muchísimas gracias!

    Responder
  4. Hola nuevamente! No me había dado cuenta, pero ya copié la carpeta completa de Astra en el tema hijo y ahí sí está el layout, que es donde puse el código.
    Muchísimas gracias, has sido muy didáctico, excelente artículo!

    Responder
    • ¡Hola de nuevo, Flor!

      Para hacer un tema hijo nunca debes copiar toda la carpeta del tema padre. Tan solo el archivo que quieras modificar, en este caso, el archivo single.php (todo esto con matices que ahora te explico).

      PD: Llega hasta el final, aunque te explico, te doy la solución “fácil”.

      Un tema hijo es un tema que hereda todos los archivos del padre que no contenga sí mismo. Es un caso así, heredaría todos los archivos a excepción del archivo single.php.

      Ahora vienen los matices.

      El primero es que todo tema (incluso un tema hijo) debe tener un archivo style.css. Este archivo, además de dar los estilos a un tema, aporta información a WordPress sobre el tema en cuestión. En este caso, además del nombre, le diría a WordPress de qué tema es hijo. Recuerda que los archivos del tema hijo sobrescriben a los archivos del padre, por eso, en este caso, estaríamos “anulando” el estilo del tema padre, esto habrá que resolverlo diciéndole que lo herede del tema padre, y hay que hacerlo ex professo (luego te nombro un par de métodos para que el hijo herede los estilos del padre); y como todo, existen casos y excepciones.

      Otro matiz, decía que todos los archivos se heredan, excepto los que se encuentran en el tema hijo; bien, pues es existe una excepción, el archivo functions.php no se hereda, sino que se utilizarían los dos, el del padre y el del hijo (y aquí entrarían en juego otras cuestiones que no nombraré ahora, como las prioridades de cada archivo y función).

      Visto así, un tema hijo deberá tener siempre, al menos, un archivo, el archivo style.css, además de los archivos que quieras “modificar” del tema padre. Y además, tendrás que encargarte de que el tema hijo herede los estilos del tema padre.

      Puedes encargarte de que el tema hijo herede los estilos del padre con la regla @import en el archivo style.css del hijo, o bien (lo que te recomendaría) mediante una función en el archivo functions.php a través del gancho de acción wp_enqueue_scripts.

      Puedes ver más información aquí: https://developer.wordpress.org/themes/advanced-topics/child-themes/ y aquí: https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post

      Y también existen plugins como https://es.wordpress.org/plugins/child-theme-configurator/ que te ayudarán a generar un tema hijo de Astra a golpe de clic.

  5. Alejandro, me has dejado sin palabras…

    Realmente, una clase magistral de tu parte, que agradezco y ya mismo me apunto para no perderme de ningún detalle. Ten por seguro que lo tendré en cuenta…

    Muchísimas gracias! : )

    Responder

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.