Cómo agregar artículos relacionados en WordPress sin plugin?

Esta guía, orientada a implementar una sección de artículos relacionados, está relacionada con mejorar la navegación en tu página web.

La navegación intuitiva es algo que no debes olvidar cuando desarrollas una web, una web orientada para una navegación intuitiva mejorará el tiempo de visita y además reducirá la frustración que los usuarios, al encontrarse con una web mal estructurada, experimentan constantemente.

1. Agregar el código en functions.php.

El archivo functions.php está ubicado en la carpeta raiz del tema que estás utilizando en WordPress wp-content/themes/nombre_del_tema/functions.php. Si eres de los que utiliza el dashboard, puedes ubicar el archivo ingresando a apariencia > editor y en la parte derecha aparecerá un listado de archivos php, uno de ellos es 'funciones del tema' functions.php.

Código:

//Funcion para agregar articulos relacionados con thumbnail
function related_posts_with_thumb($content){
    global $post;
    if( is_single() ){
        $rel_posts = '';
        $categories = get_the_category();
            foreach($categories as $category){
            $rel_cat[] = $category->cat_ID;
            }
        $rep_args = array(
            'post__not_in' => array($post->ID), #No mostrar post actual.
            'category__in' => $rel_cat, #Obtener posts dentro de la categoría actual.
            'posts_per_page' => 4, #Número de post a mostrar.
            'orderby' => 'rand' #Mostrar post aleatorios.
        );

        $rep_query = new wp_query($rep_args);

            if($rep_query->have_posts()){
                while($rep_query->have_posts()) : $rep_query->the_post();
                $rel_img =  get_the_post_thumbnail($post->ID, 'thumbnail'); #Obtener imagen destacada con tamaño por defecto 
                $rel_title =  get_the_title(); #Obtener título del post.
                $rel_link = get_permalink(); # Obtener enlace del post.    
                $rel_posts .= "<div id='content_rel_posts'> <a href='$rel_link'>$rel_img</a> <p><a href='$rel_link'> $rel_title </a></p></div>";
                endwhile;
                wp_reset_postdata();
            }

        $content .= "<h2 class='heading_rel_posts'>Artículos relacionados</h2> $rel_posts";
    }
    return $content;
}
add_filter('the_content', 'related_posts_with_thumb', 2);

Si quieres cambiar el número de post a mostrar, reemplaza el número "4" en posts_per_page.

2. Agregar los estilos en style.css

El archivo style.css, al igual que functions.php, puedes encontrarlo en wp-content/themes/nombre_del_tema/style.css o en apariencia > editor.

Código:

#content_rel_posts{
    width:22%;
    float:left;
    margin:5px 12px 5px 0;
    padding:0px;
}
#content_rel_posts p {
    font-size:0.9em;
    line-height:120%;
    padding:5px 0 0 0;
    margin:0px;
}
#content_rel_posts a{
    text-decoration:none;
    color:#21759b;
}
#content_rel_posts img{
    float:none;
    display:block;
    padding:0px;
    border-radius: 3px; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
    height: auto;
    max-width: 100%;
}
h2.heading_rel_posts{
    padding:0px;
    margin:0px;
    font-size:1.4em;
    color:#666;
}

Con eso ya debería aparecer, al final de cada post, una sección de artículos relacionados. Puedes ver como nos quedo en LOQUEVE.

Si necesitas ayuda, no dudes en dejarnos un comentario.

Nota: el código es de la web 'orbitingweb' y fue editado por mi, puedes ver el post original aquí .