Artículos relacionados por categoría

En WordPress tenemos muchas opciones para que nuestro Theme sea más Seo friendly, una de las cosas más importantes que necesitamos hacer es mostrar al usuario contenido, cuanto más contenido de interés para el mejor será su experiencia con nuestro sitio y más tiempo permanecerá en el, para conseguir esto podemos por ejemplo mostrar al usuario artículos relacionados con el que está leyendo en cada momento, y eso es lo que veremos hoy.

Para conseguir mostrar artículos relacionados en WordPress podemos echar mano de decenas de Plugins que existen en el repositorio de WordPress, la mayoría de ellos gratuitos, pero nosotros lo haremos como siempre, a base de código puro y duro, que es la mejor manera de aprender y de tener un WordPress rápido.

Lo que normalmente encontramos por internet es como mostrar artículos relacionados por Tags en WordPress, nosotros veremos como mostrar artículos relacionados por Categorías en WordPress, ya que como sabemos los Tags ya no se utilizan tanto como antes, en cambio las Categorías siguen siendo una parte fundamental de nuestro sistema de navegación de WordPress.

Pues bien, vamos a ello, como siempre hacemos, con nuestro ID de programación favorito vamos a la raíz de nuestro Theme y abrimos nuestro archivo single.php, es muy importante que tengamos localizado el loop de dicho archivo, nosotros hemos puesto el código justo antes del cierre del loop, ya que así se mostrarán los artículos relacionados después del contenido, para ello localiza el siguiente código.




<?php
endwhile; endif;
?>

Justo antes de dicho código es donde debemos añadir nuestros artículos relacionados por categoría, para ello copiaremos y pegaremos el siguiente código justo antes del final del loop.




<?php
 
echo '<article class="related">';
     echo 
'<h3>Artículos relacionados</h3>';
     
$related get_posts( array( 'category__in' => wp_get_post_categories($post->ID), 'numberposts' => 3'post__not_in' => array($post->ID) ) );
     if( 
$related ) foreach( $related as $post ) {
         
setup_postdata($post);
         echo 
'<ul>'
             echo 
'<li>';
                 echo 
'<a class="reltitle" href="'.get_the_permalink().'">'.get_the_post_thumbnail().'</a>';
                 echo 
'<a class="reltitle" href="'.get_the_permalink().'">'.get_the_title().'</a>';
                 echo 
'<p>'.get_the_date().'</p>';
              echo 
'</li>';
          echo 
'</ul>';   
      }
      
wp_reset_postdata();
echo 
'</article>';
?>

Como podemos ver lo primero que hacemos es crear una variable que hace la llamada get_post, en ella incluimos las categorías del mismo post que estamos leyendo, le damos la cantidad de post a mostrar en cada article, en este caso mostramos tres, podéis cambiar esto a vuestro gusto, y por último excluimos del listado el post que se está leyendo para que no se muestre de nuevo.

Luego mostramos la imagen destacada del artículo en primer lugar, el título de de cada artículo y por último la fecha de última edición de cada artículo mostrado, así conseguimos un buen listado de tres artículos relacionados por categoría, pero todavía nos falta un poco de CSS para que todo quede bien cuadrado, en nuestro caso hemos utilizado el siguiente.




<style>
.related{
    display:block;
    overflow:hidden;
    width:70%;
    float:left;
    background-color:#fff;
    box-sizing:border-box;
    padding:20px 20px 20px 20px;
    margin-bottom:40px;
}
.related h3{
    text-align:center;
    text-transform:uppercase;
    font-family: "Oswald",sans-serif;
    font-size:14px;
    color:#000;
    font-weight:normal;
    letter-spacing: 2px;
    margin-bottom:20px;
}
.related li{
    width:30%;
    float:left;
    margin-left: 3%;
}
.related li img{
    width:100%;
    height:150px;
}
.related .reltitle{
    font-family: "Oswald",sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
}
.related .reltitle:hover{
    text-decoration:underline;
}
.related p{
    font-size: 11px;
    font-style: italic;
    color: #999;
    font-family: 'Open Sans', sans-serif;
}
@media (max-width: 800px){
    .related{
        width:100%;
        float:none;
    }
}
</style>

El efecto de dicho CSS en los artículos relacionados lo podéis ver en funcionamiento en Alna Virtual, creo que de este apartado no hay mucho que comentar, es un CSS base para que vosotros lo cambiéis a vuestro gusto y se asemeje más a vuestro Theme.

239 Visitas

8 abril, 2020 por ricard

ricard
Soy Ricard FS, me dedico a la programación desde el año 2000, me dediqué en pleno a WordPress desde el año 2015, ahora creo Plugins y Theme para WordPress desde código cero, y me gusta la divulgación de código, por ello la creación de este blog.

Deja tu comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: