Cuando tengamos en marcha nuestro sitio web, nos interesará que el visitante permanezca el máximo tiempo posible en él. Una forma de conseguirlo es mediante las entradas relacionadas, la anterior y la posterior. Vamos a completar así el archivo single.php.
Entradas anterior y posterior
[indice]Hola que tal[/indice]Empecemos por las entradas anterior y posterior, ya que, en este caso, las ubicaremos en la parte superior, por encima del título del artículo.
La función the_post_navigation
the_post_navigation( $args ) muestra vínculos a los posts anterior y posterior, según el formato que le indiquemos en los $args. Debe ir dentro del ‘loop’. Los argumentos se pasan en una matriz $args que contiene los siguientes valores:
- ‘prev_text’ cadena de texto a mostrar en el enlace al post anterior. Por defecto ‘%title’.
- ‘next_text’ cadena de texto a mostrar en el enlace al post siguiente. Por defecto ‘%title’.
- ‘in_same_term’ valor lógico que indica si el enlace debe ser de la misma taxonomía. Por defecto es falso.
- ‘excluded_terms’ matriz o lista de IDs separados por comas.
- ‘taxonomy’ taxonomía, si ‘in_same_term’ es verdadero. Por defecto es ‘category’.
- ‘screen_reader_text’ texto de lectura en pantalla para el elemento ‘nav’. Por defecto es ‘Post navigation’.
En el tema que actualmente estoy utilizando en sergiotoca.com, ‘Twenty Sixteen’ se emplea esta función en el archivo single.php, como se ve a continuación:
|
1 2 3 4 5 6 7 8 |
the_post_navigation( array( 'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentysixteen' ) . '</span> ' . '<span class="screen-reader-text">' . __( 'Next post:', 'twentysixteen' ) . '</span> ' . '<span class="post-title">%title</span>', 'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentysixteen' ) . '</span> ' . '<span class="screen-reader-text">' . __( 'Previous post:', 'twentysixteen' ) . '</span> ' . '<span class="post-title">%title</span>', ) ); |
Sin embargo, para mi parecer, está mal empleado. Os explico porqué. Yo tengo diferentes categorías de posts, en las que escribo indistintamente, y queda muy mal que se entremezclen posts de esta categoría, por ejemplo, con posts acerca de la hidrosadenitis supurativa, enfermedad que padezco y sobre la que también escribo.
Pero volvamos al tema que estamos desarrollando. Nosotros vamos a instalar los enlaces a posts anterior y posterior encima del indicador ‘Inicio ->…’. Este indicador es una guía que, en términos programadores se llama un ‘breadcrumbs’, algo así como ‘camino de migas de pan’.
El archivo single.php queda como sigue:
|
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 |
<?php get_header(); ?> <section id="main" class="articulosolo"> <?php while (have_posts()) : the_post(); the_post_navigation( array( 'prev_text' => '<h3> << %title</h3>', 'next_text' => '<h3>%title >> </h3>', 'in_same_term' => true, ) ); ?> <p class="breadcrumbs">Inicio -> <?php the_category( ' -> ', 'multiple' ); ?></p> <h2><?php the_title(); ?></h2> <p>Publicado por <?php the_author_posts_link(); ?> el <?php the_date(); ?></p> <?php the_content(); ?> <?php // Después del artículo, los comentarios if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; ?> </section> <!-- Fin de la sección main --> <?php get_sidebar(); get_footer(); ?> |
Para arreglarlo visualmente, añadimos lo siguiente a style.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* Barra superior de navegación */ .nav-previous { width: 33%; float: left; } .nav-next { width: 33%; float: right; } .nav-previous a, .nav-next a { text-decoration: none; } .breadcrumbs { clear: both; } |
Y el resultado final es este:
Entradas relacionadas
En la subcarpeta de nuestro tema ‘partes’ creamos el siguiente archivo relacionadas.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 |
<?php $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), 'showposts' =>5, // Number of related posts that will be shown. 'caller_get_posts' =>1 ); $my_query = new wp_query($args); if( $my_query->have_posts() ) { echo '<h3>Artículos relacionados</h3><ul>'; while ($my_query->have_posts()) { $my_query->the_post(); ?> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li> <?php } echo '</ul>'; } wp_reset_query(); } ?> |
NOTA: Este código es un copia/pega extraído tal cual del blog eSandra.com. Lo he probado y funciona, y aquí lo muestro para quien lo quiera estudiar y adaptar.
En caso de integrarlo en nuestro tema, en el archivo single.php, dentro del ‘loop’, justo antes de los comentarios, añadimos:
|
1 2 |
// Las entradas relacionadas get_template_part( 'partes/relacionadas' ); |
Sandra Sanmartí, en su blog, integra todo el código directamente en el archivo single.php. Yo, por el contrario, por el principio de modularidad, lo hago incorporando partes de código.
Este código funciona por etiquetas, no por categorías. Relaciona los artículos que comparten una misma etiqueta.
No voy a editar el código de estilos para este apartado, ya que existe otra forma, mucho más fácil de utilizar, que es mediante el plugin ‘Jetpack’, que incorpora multitud de funcionalidades a nuestro sitio WordPress, y que es el que yo aconsejo utilizar, pues nos ahorrará infinidad de líneas de código.
Pero eso se verá en el próximo artículo, en el que hablaremos acerca de plugins, widgets y shortcodes. Hasta entonces, salu2.
