Entradas relacionadas o related posts: Una de las mayores ventajas de usar WordPress son los plugins. Los plugins de WordPress cubren casi todo lo que puedas imaginar, desde explandir tu blog a un auténtico CMS, hasta añadir elegantes características y optimizando tu blog para los motores de búsqueda (SEO) – las posibilidades no tienen fin (sin olvidar los diferentes temas que hay disponibles).
Pero usando demasiados plugins, corres el riesgo de saturar tu blog de WordPress, y lo peor de todo, lo puedes romper. Hay muchas instancias de plugins que no son compatibles con otras de otros plugins, así como que los plugins pueden ralentizar tu blog.
Algunos de las categorías más populares de plugins de WordPress se basan en la idea de las entradas relacionadas. Es una pena que WordPress no implemente por defecto esta funcionalidad, lo que obliga a buscar algún tipo de plugin para mostrar entradas relacionadas en nuestro blog.
Este artículo te enseñará cómo añadir entradas relacionadas con imágenes en miniatura en tu blog sin utilizar plugins, manteniendo todo sencillo, ligero y accesible. Empecemos!
Lectura recomendada (está en inglés): 3rd Party «Related Links» Widgets For Websites – Best Of
Pero primero, ¿por qué evitar plugins?
Hay un montón de razones por las que siempre deberías probar y utilizar el acceso al código que viene implementado por defecto en WordPress antes que tirar de plugins. El mayor beneficio es no tener que confiar en un tercero (el desarrollador del plugin) para que tu blog funcione. Hay muchos casos en los que plugins populares son abandonados por sus desarrollados, dejando un sinfín de propietarios de blogs colgados con un software anticuado y potencialmente vulnerable a ataques.
Otra razón es que no estás corriendo el riesgo de usar un plugin hinchado de código innecesario (con publicidad en la parte de administración, registro de uso oculto para uso y disfrute del desarrollador, enlaces ocultos a otros sites, etc) que puede ralentizar tu blog, o incluso peor, contener un parte de código malicionso, aunque esto es raro si siempre descargas los plugins desde el directorio oficial que pone a disposición WordPress.
Manos a la obra: Entradas relacionadas con imágenes en miniatura
La característica de entradas relacionadas, como muchas otras, está diseñada para situarse en una página de artículo (single.php), pero puedes usarla en cualquier parte, siempre y cuando se mantenga dentro del bucle WordPress. Con el fin de obtener los mensajes relacionados, vamos a utilizar las etiquetas que se dan a los distintos artículos.
Miniaturas
WordPress incluye desde sus últimas versiones un sistema de miniaturas, del que nos apoyaremos ahora. A fin de permitirlo, agrega este código al archivo functions.php en tu carpeta del tema (en la mayoría de los casos, ya está allí).
add_theme_support( 'post-thumbnails' );
Puedes incluso configurar el ancho y el alto de la miniatura añadiendo una linea extra al código:
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 100, 50, true );
Importante: Cuando añadas imágenes a tus entradas, a fin de crear la miniatura, debes seleccionar en el panel de subida «Usar como imagen destacada». Esto creará automáticamente la miniatura para la entrada.
El código
<div class="relatedposts">
<h3>Entradas relacionadas</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, // Numero de entradas relacionadas que mostrar
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<div class="relatedthumb">
<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>
El fragmento del código the_post_thumbnail(array(150,100) establece el tamaño de la miniatura que será mostrado, en este caso, 150px ancho, 100px alto.
CSS
Tenemos dos clases DIV aquí «.relatedposts», que es el contenedor div general, y «.relatedthumb», que es la imagen individual y enlace dentro de los.relatedposts. Vamos a suponer que el ancho de la columna es el estándar de 640px. El CSS:
.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.relatedthumb a:hover {background-color: #ddd; color: #000;}
El CSS anterior hará las miniaturas con 150px de ancho, lo que significa que necesitaremos 4 miniaturas para llenar el ancho de 640px de la entrada (incluyendo el margen entre ellos). Puedes ajustar esto a tu gusto, si quieres 5 miniaturas, relatedthumb tendrá una anchura de aproximada de 125px.
Importante: Asegúrate de ajustar el ancho de las miniaturas que se generan en los ajustes del soporte de WordPress para que coincida con los que ha establecido en el CSS. Además, tiene que coincidir con el tamaño especificado en el código PHP: the_post_thumbnail(array(150,100).
Ejemplo
Las entradas relacionadas aparecen más o menos con el aspecto de este blog que lees (que usa exactamente la técnica descrita en este artículo):
Técnicas similares
Esta no es la única manera de hacer posts relacionados sin plugins – hay un montón de técnicas y guías por ahí que te muestran cómo agregar mensajes relacionados sin plugins, aquí están algunos de ellos:
- Show related posts without plugins (inglés)
- Related posts w/thumbnails in WordPress without plugin (inglés)
- How to: related posts with thumbnails in WordPress without plugins (ingles – ideal principiantes)
- How to add Related Posts with thumbnail without plugin (inglés)
Conclusiones
Podemos hacer mucho con las características integradas que ofrece WordPress, y en muchos casos, no es necesario recurrir a plugins de terceros para hacer el trabajo. La próxima vez que necesites un plugin para tu blog de WordPress, mira a ver antes si puedes lograr la misma funcionalidad sin recurrir al plugin. Investiga, buscar en la web una alternativa, doctor Google o incluso consúltanos a nosotros. Te sorprenderías de las posibilidades que ofrece WordPress en sí mismo.
Vía Hongkiat.
