Artículos relacionados sin plugin en WordPress

Hola amigos, como va todo? Yo he estado muy ocupado estos días. Hoy os traigo un artículo para añadir una sección de artículos relacionados sin plugin para WordPress!

He estado trabajando en varios proyectos en mi ámbito profesional y también he estado actualizando mi skin de rainmeter en el ámbito ocio/personal, esa es la razón de mi ausencia  🙂

Se que existen muchos plugins, que hacen esta función muy bien, pero muchos de ellos tienen o dan errores en el servidor y hacen que la web cargue mas lenta.

Yo mismo estaba hasta hace poco utilizando un plugin para los artículos relacionados, hasta que me di cuenta de los errores que causaba en el servidor, revisando el archivo error_log.

Artículos relacionados sin plugin

Bueno, si quieres ver un ejemplo practico de los “Artículos relacionados”, baja hasta el final de este artículo.

Por Internet, Googleando, encontrarás muchos códigos sobre cómo añadir la sección de artículos relacionados sin plugin para WordPress.

Pero te pasará como a mi, que solo encontrarás el código PHP y tendrás que buscarte la vida para el código CSS.

Y para eso estoy escribiendo este artículo, para ahorrarte la búsqueda y el trabajo  😉

Añadir código PHP

Muy bien, primero de todo vamos a localizar el archivo single.php de nuestro tema activo en WordPress.

Si estás utilizando una plantilla de tema profesional, puede que en el archivo single.php encuentres el nombre del archivo necesario a editar, ya que en los temas profesionales suele estar modificado para los distintos tipo de artículo.

Utilizando como ejemplo el archivo single.php del tema twentytwelve debemos buscar la siguiente línea:

</nav><!-- .nav-single -->

En el tema twentyfifteen el archivo single.php vuelve a cambiar, en este caso deberemos buscar la línea:

get_template_part( 'content', get_post_format() );

Como verás, siempre debemos buscar la línea final donde se declara que termina el artículo, justo antes de la línea con el siguiente código <?php comments_template(); ?> que declara los comentarios.

Una vez localizada la línea, justo debajo añadiremos el siguiente código:

<div class="entradasrelacionadas">
<h3>Artículos relacionados</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="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
                <?php the_title(); ?>
                </a>
        </div>
        
        <? }
        }
        $post = $orig_post;
        wp_reset_query();
        ?>
</div>

Editando el código

Antes de guardar los cambios, puedes modificar el código nuevo en las siguientes secciones:

Artículos a mostrar

‘post_per_page’= 4,

Obviamente, esta línea de código se encarga de declarar cuantos artículos relacionados se van a mostrar. Yo por defecto lo he dejado en 4.

Título del widget

<h3>Artículos relacionados</h3>

Puedes cambiar el texto entre las etiquetas h3 para poner el que mas te convenga.

Imagen destacada

the_post_thumbnail(array(150,100));

Este código declara el tamaño de la imagen destacada del artículo. Por defecto esta en ‘150,100’. A continuación dejo las posibles opciones:

//Default WordPress
the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' );  // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' );         // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' );          // Full resolution (original size uploaded)

the_post_thumbnail(array(150,100));    // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail(array(300,300));    // Thumbnail (300 x 300 hard cropped)

Añadir código CSS

Una vez añadido el código PHP y configurado, deberás añadir el siguiente código CSS al final del archivo style.css de tu tema actual.

.entradasrelacionadas {max-width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.entradasrelacionadas h3 {font-size: 20px; margin: 0 0 5px 0; }
.miniaturarelacionada {margin: 0 1px 0 1px; float: left; }
.miniaturarelacionada img {margin: 0 0 3px 0; padding: 0;}
.miniaturarelacionada a {color :#333; text-decoration: none; display:block; padding: 4px; max-width: 150px;}
.miniaturarelacionada a:hover {background-color: #ddd; color: #000;}

Con este código CSS tendremos la sección de artículos relacionados en modo responsive y con algo de estilo.

Conclusión

Bueno, espero que con esto puedas añadir la sección de artículos relacionados sin plugin en tu WordPress y que no te pase como a mí.

Y eso es todo. Por supuesto que puedes editar aún más el código, pero eso lo dejo en tus manos!