WordPress: Mostrar entradas relacionadas con imagen sin plugins

junio 26, 2015 | Wordpress

si has notado esta función de mostrar entradas o post relacionados en WordPress, es una practica muy común en todos los que tenemos un blog, por que es una manera de retener al usuario mostrando le post relacionados al que se encuentra leyendo, también es cierto que hay infinidades de plugins para hacer lo mencionado, pero la contra de esto es que sobre cargas tu sitio con elemento externos adecuados a tu wordpress.

como sabrás en WordPress hay infinidades de plugins que hacen esta labor como ya mencione, pero este no es caso, por que hoy te enseñare a mostrar tus entradas relacionadas sin necesidad de plugins, vamos al código.


<?php
function getRelatedPosts ($post_id){
 $taxs = wp_get_post_tags( $post_id );

if ( $taxs ) {
 $tax_ids = array();
 foreach( $taxs as $individual_tax ) $tax_ids[] = $individual_tax->term_id;
 $args = array(
 'tag__in' => $tax_ids,
 'post__not_in' => array( $post->ID ),
 'showposts' => 5,
 'ignore_sticky_posts' => 1
 );

$my_query = new wp_query( $args );
 if( $my_query->have_posts() ) {

while ($my_query->have_posts()) : $my_query->the_post();
 ?>
 <li>
 <a href="<?php the_permalink();?>">
 <?php the_post_thumbnail('thumbnail');?>
 </a>
 <p>
 <a href=" <?php the_permalink();?> " rel="bookmark" title=" <?php the_title(); ?> "> <?php the_title() ?></a>
 </p>
 </li>
 <?php
 endwhile;
 } else {
 echo "<h4>No hay clases relacionadas</h4>";
 }
 }

$post = $backup;
 wp_reset_query();
}
?>

Explicando el código: básicamente lo que realiza esta función es relacionar por tags (etiqueta) y mostrar las 5 entradas o post relacionadas con las etiquetas similares a las que el usuario esta leyendo, puedes modificar el numero de post relacionados cambiando el siguiente parámetro 'showposts => 5,' cambia el numero «5» por otro valor en números para mostrar el numero de entradas relacionadas que deseas.
Recuerda que este código tiene que estar en el archivo functions.php de tu theme.

 

Ahora solo queda llamar a las entradas relacionadas en tu theme.


<?php getRelatedPosts ( get_the_ID() ); ?>

Explicando el código: tienes que hacer la llamada de las entradas relacionadas en el single.php  de tu theme por que como sabrás ese archivo es el que se usa para poder mostrar el contenido de las entradas o post de WordPress.

Bueno ahora que sabemos como mostrar las entradas o post relacionados con imagen o thumbnail en wordpress vamos a ponerle algo de estilos css para que se vea mas bonito, esto es solo un ejemplo.


<section class="post-relacionados">
<h3>Post Relacionados</h3>
<ul>
<?php getRelatedPosts ( get_the_ID() ); ?>
</ul>
</section>

Explicado el código: como puede ver he creado un section con la clase post-relacionados dentro de ello un h3 con el titulo post-relacionados, y como contenedor de nuestros post relacionado un ul, por que  imprime los títulos encapsulado con un li, gracias a esa estructura procederemos a darle estilos css.


.post-relacionados {
background: #fff;
border-radius: 5px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
overflow: hidden;
padding: 1em;
margin-bottom: 2em;
}
.post-relacionados h3 {
margin-bottom: 10px;
}
.post-relacionados ul li {
position: relative;
clear: both;
}
.post-relacionados ul li a {
position: relative;
line-height: 26px;
}
.post-relacionados ul li img {
width: 60px;
height: 60px;
float: left;
margin: 0 1em 0.5em 0;
}

con eso tienes tus post relacionados con su respectivo thumbnail (imagen) de manera ordenada, ya de penderá de ti los estilos, solo puse un ejemplo para que se vean mejor.

Relacionados