Existen una gran cantidad de plugins para entradas relacionadas para WordPress que puedes encontrar con hacer una simple búsqueda, pero si voy a trabajar con el framework de Genesis porque quiero mejorar el rendimiento y la velocidad de carga del sitio web, lo correcto es añadir un script muy simple de entradas relacionadas. El concepto que vamos a utilizar sólo tiene 2 cosas a tener en cuenta, que tag es del post que esta utilizando y en qué categoría se encuentra. El script trata de utilizar las etiquetas que las entradas pueden compartir y agruparlos.
Entradas relacionadas con Génesis
El funcionamiento de este script es bastante simple. En primer lugar, encuentra las etiquetas de un post y se le asigna a continuación, después intenta encontrar otros post que utilizan esa misma etiqueta. Si encuentra suficientes entradas se detiene. Mas adelante se verifica la categoría de más posts para terminar el número total de entradas relacionadas que va a mostrar. La sobrecarga de código total es bastante escasa, y debido a la forma en que utiliza las etiquetas y categorías, realiza un muy buen trabajo en la construcción de las entradas relacionadas.
¿Interesado en probarlo? He aquí algunos pasos sencillos para hacerlo y que se ejecute en vuestro sitio.
Añadir ampliar imágen
Dado que este código muestra imágenes, no sólo de texto, es necesario agregar una línea de código a nuestro archivo functions.php de nuestro tema hijo para cambiar el tamaño de la imagen. Vamos a incluir un tamaño de 95 × 70 como tamaño estardar, pero si estás usando diferentes diseños o de otra manera necesitas ajustar el tamaño de la imagen, hazlo ahora. Sólo hay que poner el código en el functions.php después de esta línea «// Add new image sizes» donde verás mas lineas de código que empiezan con esto add_image_size.
add_image_size( 'related', 95, 70, true );
Recuerda que cada vez que agreges o cambies los tamaños de imagen, debe ejecutar la regeneración de miniaturas con el plugin regenerate thumbnails para reconstruir las imágenes con el tamaño de la imagen. Una vez finalizado el proceso puedes eliminar el plugin de nuevo para no ocupar mas enpacio en el servidor.
El código para los posts relacionados
Mientras que tenemos el archivo functions.php abierto, es necesario añadir algo más de código que el anterior.
Dado que este es un consejo rápido, yo no voy a explicar todo esto línea por línea. Este código hace toda la magia. En mi sitio se carga en el gancho genesis_after_post_content, pero se puede usar cualquier otro gancho. Dado que esto funciona a través de etiquetas y categorías, no deja que se cargue en las páginas o en los archivos.
//for XHTML themes
add_action( 'genesis_after_post_content', 'child_related_posts' );
//for HTML5 themes
add_action( 'genesis_after_entry_content', 'child_related_posts' );
/**
* Outputs related posts with thumbnail
*
* @author Nick the Geek
* @url http://designsbynickthegeek.com/tutorials/related-posts-genesis
* @global object $post
*/
function child_related_posts() {
if ( is_single ( ) ) {
global $post;
$count = 0;
$postIDs = array( $post->ID );
$related = '';
$tags = wp_get_post_tags( $post->ID );
$cats = wp_get_post_categories( $post->ID );
if ( $tags ) {
foreach ( $tags as $tag ) {
$tagID[] = $tag->term_id;
}
$args = array(
'tag__in' => $tagID,
'post__not_in' => $postIDs,
'showposts' => 5,
'ignore_sticky_posts' => 1,
'tax_query' => array(
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => array(
'post-format-link',
'post-format-status',
'post-format-aside',
'post-format-quote'
),
'operator' => 'NOT IN'
)
)
);
$tag_query = new WP_Query( $args );
if ( $tag_query->have_posts() ) {
while ( $tag_query->have_posts() ) {
$tag_query->the_post();
$img = genesis_get_image() ? genesis_get_image( array( 'size' => 'related' ) ) : '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/related.png" alt="' . get_the_title() . '" />';
$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . $img . get_the_title() . '</a></li>';
$postIDs[] = $post->ID;
$count++;
}
}
}
if ( $count <= 4 ) {
$catIDs = array( );
foreach ( $cats as $cat ) {
if ( 3 == $cat )
continue;
$catIDs[] = $cat;
}
$showposts = 5 - $count;
$args = array(
'category__in' => $catIDs,
'post__not_in' => $postIDs,
'showposts' => $showposts,
'ignore_sticky_posts' => 1,
'orderby' => 'rand',
'tax_query' => array(
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => array(
'post-format-link',
'post-format-status',
'post-format-aside',
'post-format-quote' ),
'operator' => 'NOT IN'
)
)
);
$cat_query = new WP_Query( $args );
if ( $cat_query->have_posts() ) {
while ( $cat_query->have_posts() ) {
$cat_query->the_post();
$img = genesis_get_image() ? genesis_get_image( array( 'size' => 'related' ) ) : '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/related.png" alt="' . get_the_title() . '" />';
$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . $img . get_the_title() . '</a></li>';
}
}
}
if ( $related ) {
printf( '<div class="related-posts"><h3 class="related-title">Related Posts</h3><ul class="related-list">%s</ul></div>', $related );
}
wp_reset_query();
}
}
<strong>Añadir una imagen por defecto</strong>
El primer sitio que tuve lo hice con blogger, pero no se lo digas a nadie :D. También ha habido algunos problemas que surgieron con un movimiento de servidor y el cambio de plataforma a WordPress. Además estaba utilizado un tema que inserta la imagen utilizando un campo personalizado. Todo esto significa que varias de mis entradas no tienen una imagen adjunta. Por suerte todo tiene una solución, y no es otra que añadir una imagen por defecto personalizada que se muestra en mis posts relacionados cuando la entrada no tiene una imagen.
Para utilizar la imagen por defecto, es importante hacer una imagen en el mismo tamaño que el add_image_size para los posts relacionados. Si no estás editando el código será 95 x 70. Guarda el archivo como related.png y subelo al directorio de imágenes del tema hijo.
Ah, y si lo que deseas es utilizar la imagen predeterminada que estoy usando en mi sitio, puedes guardar la imagen de la izquierda.
Los estilos
Si acabas de añadir el código tal cual, sin ningún CSS, vas a obtener una lista de aspecto bastante interesante de imágenes. Es necesario aplicar reglas CSS para convertirla en una fila de imágenes con un espaciado uniforme. Si tu sitio no está utilizando el mismo tema hijo , o si se han realizado grandes cambios en este, tendrás que editar este seguro. Si estamos usando un tamaño de imagen diferente, tendrás que editarlo. Este CSS es para un sitio en concreto, así que no copies el código a ciegas, utiliza este como una plantilla para tus propios posts relacionados.
Si aún así quieres probar como queda en tu theme y realizar luego los cambios, abre la hoja de estilo y agrega esto, la parte inferior del archivo por lo general funciona bien a menos que haya un error en la CSS.
/************ Related Posts *************/
.related-posts {
overflow: hidden;
margin: 0 0 10px;
}
.related-list li {
float: left;
list-style-type: none;
margin: 0 10px 0 0;
text-align: center;
width: 105px;
}
.related-list img {
background: none repeat scroll 0 0 #6FA1B1;
border: 2px solid #2B5D6C;
display: block;
margin: 0 auto;
padding: 5px;
}
¿Por qué utilizar el código que tengo que editar para mi sitio?
En el comienzo de este post mencioné que existen varios plugins de tipo post relacionados. Algunos funcionan de manera similar a este código, y sinceramente algunos probablemente son mucho, mucho más fáciles de instalar. Puede ser que tengan una forma de subir una imagen predeterminada o trabajan con campos personalizados para los viejas entradas que siguen utilizando campos personalizados. Puede ser que utilicen otros métodos de búsqueda de mensajes relacionados, y es posible que no tenga que hacer cualquier edición de CSS. Lo más importante, no tienes que hacer ninguna codificación personalizada.
Esas son todas buenas razones para utilizar un plugin, y he utilizado plugins de Related Posts antiguamente por esas mismas razones. Pero cuando yo queria imágenes, el plugin no apoyaba las imágenes y tenia que buscar otro plugin para esto. Todas esas opciones significan sobrecarga de código extra. Un trabajo duro de codificación de la imagen por defecto, CSS, y el uso de un conjunto muy simple de consultas para obtener los mensajes relacionados significa mucho menos código cada vez que mis páginas cargan.
Esto es lo que pasa con la programación. La cosa más fácil de usar es la que más trabajo necesita, pero los resultados en usabilidad se hacen notar.
Este código no es para todos. Como he dicho antes es imposible explicar cada línea sin que me crezca la barba, si no entiendes nada de código probablemente no es para ti. Si quieres hacer una tonelada de cambios en el código, pero la CSS te parece muy complejo, esto probablemente no es para ti. Si está dispuesto a romper las cosas y luego averiguar por qué se rompió a medida que trabajas exactamente como quieres en tu sitio, a continuación, utiliza este código como base para tu propia solución personalizada.
Gracias a Nick the Geek por el desarrollo de este código.
Eliminar banner de un tema en la barra superior de WordPress
Como crear un Tema de WordPress desde una plantilla HTML
Que es un Framework para WordPress y que ventajas tiene
Como Cambiar el Color de los Botones en WooCommerce
6 plugins para el diseño y desarrollo del Framework de Genesis
Como podría modificar este código para que me muestre artículos relacionados al final en la página de archives, ya logre que los muestre en archives, pero me los imprime enseguida de cada post en la categoría o etiqueta y me gustaría que solo fuese al final del listado de etiquetas o de categorías.
Saludos
Hola Guillermo. Me lo puedes explicar mejor? No entiendo que me quieres decir. Saludos!