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;
	}
}

2 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

Deja un comentario

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