Mostrar entradas relacionadas sin plugin
14/09/2020
Una buena manera de mantener a los usuarios más tiempo en tu blog es ofreciéndole la posibilidad de acceder a contenido que tenga alguna relación con el post que acaba de leer.
Incorporar una sección de post relacionados con el artículo que el visitante está leyendo es una de las mejores prácticas que puedes aplicar a tu WordPress. Esta aportación al blog de esta sección ofrece múltiples ventajas que convierten esta sección en imprescindible:
- Disminuye la tasa de rebote. Los lectores no abandonan el sitio web ya que mantienen en la web navegando por los distintos artículos. Si a un usuario se le ofrece contenido relacionado con el artículo que acaba de leer hay muchas posibilidades de que clique sobre él.
- Aumenta la cantidad de enlaces internos lo que beneficia al SEO y aumenta las posibilidades de mejorar el SERP en los motores de búsqueda como Google.
- Se mejora la experiencia del usuario ofreciendo más contenido relevante según su interés.
Hay muchos plugins desarrollados para esta finalidad, pero ya hemos hablado en este blog de las ventajas de sustituir un plugin por código. Limitar el número de plugins que tenemos instalados libera de carga extra al blog, recuerda que una gran cantidad de plugins instalados afecta a la velocidad del sitio web.
Añadir una sección de entradas relacionadas sin plugins en tu WordPress
Para añadir la sección mediante código es añadir este código al archivo functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/** * Related posts * * @global object $post * @param array $args * @return */ function wcr_related_posts($args = array()) { global $post; // default args $args = wp_parse_args($args, array( 'post_id' => !empty($post) ? $post->ID : '', 'taxonomy' => 'category', 'limit' => 3, 'post_type' => !empty($post) ? $post->post_type : 'post', 'orderby' => 'date', 'order' => 'DESC' )); // check taxonomy if (!taxonomy_exists($args['taxonomy'])) { return; } // post taxonomies $taxonomies = wp_get_post_terms($args['post_id'], $args['taxonomy'], array('fields' => 'ids')); if (empty($taxonomies)) { return; } // query $related_posts = get_posts(array( 'post__not_in' => (array) $args['post_id'], 'post_type' => $args['post_type'], 'tax_query' => array( array( 'taxonomy' => $args['taxonomy'], 'field' => 'term_id', 'terms' => $taxonomies ), ), 'posts_per_page' => $args['limit'], 'orderby' => $args['orderby'], 'order' => $args['order'] )); include( locate_template('related-posts-template.php', false, false) ); wp_reset_postdata(); } |
Cree un archivo llamado related-posts-template.php con el siguiente contenido:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php if (!empty($related_posts)) { ?> <div class="related-posts"> <h3 class="widget-title"><?php _e('Related articles', 'wpcrumbs'); ?></h3> <ul class="related-posts-list"> <?php foreach ($related_posts as $post) { setup_postdata($post); ?> <li> <a class="title" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php if (has_post_thumbnail()) { ?> <div class="thumb"> <?php echo get_the_post_thumbnail(null, 'medium', array('alt' => the_title_attribute(array('echo' => false)))); ?> </div> <?php } ?> <h4><?php the_title(); ?></h4> </a> </li> <?php } ?> </ul> <div class="clearfix"></div> </div> <?php } |
Por último sólo tenemos que llamar a la función en el archivo deseado.
|
1 |
<?php wcr_related_posts(); ?> |
Si queremos mostrar un número de 5 publicaciones relacionadas en base a las etiquetas de las publicaciones el código quedaría así:
|
1 2 3 4 5 6 |
<?php wcr_related_posts(array( 'taxonomy' => 'post_tag', 'limit' => 5 )); ?> |
Si lo que queremos es mostrar publicaciones relacionadas en base a las categorías
|
1 2 3 4 5 6 |
<?php wcr_related_posts(array( 'taxonomy' => 'category', 'limit' => 5 )); ?> |
Por último se puede trabajar sobre el archivo .CSS para poder adaptar el diseño. Los post relacionanos se estructuran dentro de una lista por lo que los elementos que compondrán la sección quedan de esta manera que, por descontado, necesitarás ajustarlo a tus necesidades.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
ul.related-posts-list { list-style: none; margin: 30px 0px; padding: 0px; float: left; } .related-posts-list li { width: 23% !important; margin: 0 1.9% 20px 0 !important; clear: none !important; float: left; line-height: 17px; min-height: 220px; -webkit-box-shadow: 0px 25px 63px 20px rgba(0,0,0,0.5); } related-posts-list li a .thumb img { height: auto !important; width: 100% !important; transform: translate(-50%, -50%); position: relative; top: 50%; left: 50%; max-width: none; } .related-posts-list li a.title { font-size: 14px !important; font-weight: normal; margin-top: 10px; float: left; margin-bottom: 10px; color: #3a404b !important; text-align: center; width: 100%; } |
¿Nos ayudas a mejorar la calidad del blog?
Déjanos una valoración sobre este post para poder seguir mejorando
(4 votos, promedio: 5,00 de 5)
Cargando...
(4 votos, promedio: 5,00 de 5)Cargando...