Mostrar entradas relacionadas sin necesidad de plugins

La mayoría de los blogs que podrás observar por Internet, tienen un elemento común, este es una lista de entradas relacionadas a la actual al final de los artículos.

Estas entradas relacionadas hacen que puedas conseguir un menor porcentaje de rebote en tu blog (personas que entran en una página y no visitan más). Esto ayudará a tu SEO ya que el porcentaje de rebote es uno de los factores importantes que se tienen en cuenta últimamente (cuanto mayor SEO peor es).

Si a una persona que ha llegado a un artículo (bien porque lo ha visto en redes sociales o porque lo ha encontrado en un buscador) le ofreces, una vez que termina de leerlo, otros artículos que tienen que ver con él, hay muchas probabilidades de que pulse sobre alguno de ellos para seguir leyendo. Es por eso que pienso que es muy importante ese elemento en un blog y seguro que la mayoría de vosotros lo tenéis en el vuestro.

Pues bien, hay muchos plugins que te dan esa funcionalidad y de forma fácil podrás tener una lista de entradas relacionadas en tu blog. Pero a mi me gusta ir más allá, y como muchos sabéis, llevo un tiempo desarrollando mi propio código para deshacerme de los plugins que añaden mucha carga extra al blog, lo que afecta a la velocidad a la que se abre el mismo.

En esta ocasión lo que os voy a comentar, siguiendo con la serie de Pluginsfree, es cómo desarrollar esa funcionalidad de entradas relacionadas, con un simple código y sin necesitar incluir toda la carga extra que supone un plugin completo de WordPress. Además tendréis total libertad para personalizarlo a vuestro gusto.

Para ello, como siempre tendréis que tener un poco de soltura moviéndoos por los archivos de código de vuestro WordPress. En concreto deberemos tocar:

• archivo de funciones del tema functions.php.
• archivo de artículos individuales single.php.
• hoja de estilos style.css.

Pasos para añadir entradas relacionadas en un blog sin plugins.

Lo primero que tendremos que hacer será editar el fichero functions.php que encontrarás en la ruta:

wp-content/themes/<nombre_tema>/functions.php.

Ahí escribimos el siguiente código:

/*obtenemos los artículos relacionados*/
function getRelatedPosts ($post_id,$post_title){

global $wpdb;

$query = «SELECT DISTINCT ID,post_title,post_date,post_content,MATCH(post_title,post_content) AGAINST (‘$post_title’) AS score FROM $wpdb->posts a WHERE MATCH (post_title,post_content) AGAINST (‘$post_title’) AND post_status = ‘publish’ AND id != $post_id ORDER BY score DESC limit 4«;
$resultado = $wpdb->get_results($query);

if ($resultado!=null){
foreach ($resultado as $relatedPost) {

$postid = $relatedPost->ID;
$posttitle = $relatedPost->post_title;

?><br><a href=»<?php echo get_permalink($postid); ?>» title=»Leer art&iacute;culo <?php echo $posttitle ?>»><b><?php echo $posttitle ?></b></a>:<br>
<? echo get_post_meta($postid, ‘_aioseop_description’, true); ?><br> <?php
}
}

}

Comentaré algo acerca de los textos que he puesto en negrita.

La parte de «limit 4» indicará el número de artículos que vais a mostrar. Podéis poner ese dato al número que queráis para mostrar más o menos.

La segunda parte de texto en negrita es la que pinta el texto con los enlaces en el artículo (o donde lo queráis añadir). Esa parte es totalmente personalizable por si queréis añadir algún elemento más, como la imagen del artículo por ejemplo.

Además dejo claro que en este caso yo estoy usando la descripción del artículo que extraigo gracias al plugin «All in one SEO». Eso es lo reflejado con la sentencia:

<? echo get_post_meta($postid, ‘_aioseop_description’, true); ?>

Sino usáis el plugin AIOSEO o quieres mostrar, por ejemplo los primeros caracteres del artículo, podrás cambiarlo por:

<?php excerpt(); ?>

Una vez ya tenemos la funcionalidad creada, ahora tendremos que ser capaces de llamarla desde donde queramos incluir esas entradas. Como veréis, en mi caso están al final de cada artículo bajo el título «Post relacionados que te pueden interesar».

Para ello editamos el fichero single.php y añadimos el siguiente código en la parte en la que queramos que aparezcan:

<div class=»related_posts»>
<?php
getRelatedPosts ( get_the_ID() , get_the_title(get_the_ID()) ) ;
?>
</div>

Como veis, he añadido una capa llamada «related_posts». Eso es lo que me va a permitir dar forma al formato en el que se muestran a través del archivo de estilos. Ahí es donde entra el tercer y último paso:

Editar el fichero style.css:

Ahí podréis ponerlo cómo queráis. Podéis personalizar el color, tipo de fuente, espaciado, o lo que queráis. A modo de ejemplo os dejo cómo lo tengo yo puesto:

.content .related_posts {width: 580px; font-size:10pt;font-family: Arial; font-size: 11px; color: #333;}
.content .related_posts a {color: #2f99c9;}

Es posible que según sea vuestra plantilla no os haga falta añadir el «.content»  ya que esto depende de la estructura de capas en la que se encuentre el elemento.

Con estos tres simples pasos, podréis tener las entradas relacionadas que más cuadren con el artículo que se está leyendo en ese momento en el pie del mismo, tal y cómo veis que yo lo tengo. Además la carga será muy rápida ya que solo necesita una consulta en la base de datos en vez de todo lo que lleva con sí un plugin completo de WordPress.

Espero que os parezca interesante y si así fuera, agradeceré que lo compartáis con vuestros contactos en redes sociales o como prefiráis. También podréis opinar sobre el mismo en los comentarios de la entrada o en Twitter con el Hashtag #pluginsfree.

Podéis leer el resto de entradas sobre mi iniciativa Pluginsfree en los artículos para sustituir plugins de WordPress y mejorar la carga del blog.