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

Deja un comentario