Enlaces a entrada siguiente y anterior dentro de la misma categoría

Publicado Por Fernando Tellado el 11 Jun, 2019

Cuando estás viendo una entrada en un sitio creado con WordPress, los temas suelen incluir enlaces para navegar a las entradas anterior y siguiente, lo que es un modo estupendo de mantener a tus lectores visitando tus contenidos.

Índice de contenidos

1 ¿Hay algún problema?
2 La solución
3 ¿No se puede hacer de otra manera?
4 ¿Y no hay plugins para esto?

¿Hay algún problema?

Sin embargo, estos enlaces solo atienden, por defecto, al criterio cronológico, pues enlazan a las entradas anterior y siguientes por fecha de publicación, no tienen en cuenta ningún otro criterio de coherencia de contenidos.

Dicho esto, ¿a que tendría todo el sentido que estos enlaces se restringiesen a las entradas anterior y siguiente de la misma categoría?

De este modo el lector siempre tendría algo que leer relacionado con el contenido que inicialmente eligió.

La solución

Si esto supone un problema para ti, o simplemente quieres mejorar la relación semántica entre los contenidos que enlazas, la solución pasa por modificar las funciones que generan esos enlaces de navegación, que serán:

O utiliza previous_post_link y next_post_link
O usa get_the_post_navigation
O también puede usar get_adyacent_post

Dependiendo de tu tema se usará uno de los métodos anteriores para los enlaces, pero con cualquiera de ellos puedes aplicar el atributo in_same_term, para que el enlace a las entradas anteriores y posteriores se restrinjan a la taxonomía de la entrada actual.

Cambiarlo si el tema utiliza `previous_post_link` y `next_post_link`

De este modo, si quieres aplicarlo a las funciones previous_post_link o next_post_link se haría así:

<?php previous_post_link( '%link', '%title', TRUE); ?>

1	<?php previous_post_link( '%link', '%title', TRUE); ?>

En este ejemplo el enlace a la entrada anterior (%link) tendrá el título de la entrada (%title), y estará en la misma taxonomía (TRUE).

La estructura de los argumentos que puedes utilizar sería esta:

<?php previous_post_link( $format, $link, $in_same_term = false, $excluded_terms = '', $taxonomy = 'category' ); ?>

1	<?php previous_post_link( $format, $link, $in_same_term = false, $excluded_terms = '', $taxonomy = 'category' ); ?>

En el caso de la función next_post_link se hace exactamente igual. Los argumentos serían los mismos, estos:

<?php next_post_link( $format, $link, $in_same_term = false, $excluded_terms = '', $taxonomy = 'category' ); ?>

1	<?php next_post_link( $format, $link, $in_same_term = false, $excluded_terms = '', $taxonomy = 'category' ); ?>

Si el tema utiliza `get_the_post_navigation`

En este caso debemos sustituir la función actual del tema por algo así:

function get_the_post_navigation( $args = array() ) {
    $args = wp_parse_args(
        $args,
        array(
            'prev_text'          => '%title',
            'next_text'          => '%title',
            'in_same_term'       => true,
            'excluded_terms'     => '',
            'taxonomy'           => 'category',
            'screen_reader_text' => __( 'Navegación' ),
        )
    );
 
    $navigation = '';
 
    $previous = get_previous_post_link(
        '<div class="nav-previous">%link</div>',
        $args['prev_text'],
        $args['in_same_term'],
        $args['excluded_terms'],
        $args['taxonomy']
    );
 
    $next = get_next_post_link(
        '<div class="nav-next">%link</div>',
        $args['next_text'],
        $args['in_same_term'],
        $args['excluded_terms'],
        $args['taxonomy']
    );
 
    // Añade marcado solo si algo a donde navegar.
    if ( $previous || $next ) {
        $navigation = _navigation_markup( $previous . $next, 'post-navigation', $args['screen_reader_text'] );
    }
 
    return $navigation;
}

function get_the_post_navigation( $args = array() ) {

$args = wp_parse_args(

$args,

array(

'prev_text' => '%title',

'next_text' => '%title',

'in_same_term' => true,

'excluded_terms' => '',

'taxonomy' => 'category',

'screen_reader_text' => __( 'Navegación' ),

)

);

$navigation = '';

$previous = get_previous_post_link(

'<div class="nav-previous">%link</div>',

$args['prev_text'],

$args['in_same_term'],

$args['excluded_terms'],

$args['taxonomy']

);

$next = get_next_post_link(

'<div class="nav-next">%link</div>',

$args['next_text'],

$args['in_same_term'],

$args['excluded_terms'],

$args['taxonomy']

);

// Añade marcado solo si algo a donde navegar.

if ( $previous || $next ) {

$navigation = _navigation_markup( $previous . $next, 'post-navigation', $args['screen_reader_text'] );

}

return $navigation;

}

Como hacerlo con `get_adyacent_post`

Si tu tema utiliza la función get_adyacent_post, tendrías que modificar la función incluida en tu tema a algo similar al siguiente código:

<?php $prev_post = get_adjacent_post( true, '', true, '' ); ?>
 <?php if ( is_a( $prev_post, 'WP_Post' ) ) { ?>
 	<a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php echo get_the_title( $prev_post->ID ); ?></a>
 <?php } ?>
<?php $next_post = get_adjacent_post( true, '', false, '' ); ?>
 <?php if ( is_a( $next_post, 'WP_Post' ) ) {  ?>
 	<a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo get_the_title( $next_post->ID ); ?></a>
 <?php } ?>

<?php $prev_post = get_adjacent_post( true, '', true, '' ); ?>

<?php if ( is_a( $prev_post, 'WP_Post' ) ) { ?>

<?php } ?>

<?php $next_post = get_adjacent_post( true, '', false, '' ); ?>

<?php if ( is_a( $next_post, 'WP_Post' ) ) { ?>

<?php } ?>

El patrón que se utiliza para incluir los atributos es:

<?php get_adjacent_post( $in_same_term, $excluded_terms, $previous, $taxonomy ) ?>

1	<?php get_adjacent_post( $in_same_term, $excluded_terms, $previous, $taxonomy ) ?>

Sea cual sea el método que use tu tema tienes la documentación completa sobre cada función en los enlaces que te he puesto la primera vez que los cito en el artículo.

¿No se puede hacer de otra manera?

¡Esto es una fiesta!, y en WordPress siempre hay varias maneras de hacer todo, es la gloria de tener todo el código libre y abierto.

Otra manera es sustituir la función que genere los enlaces a las entradas anterior y siguiente en tu tema por una nueva.

Para ello copia la plantilla single.php de tu tema al tema hijo y añade lo siguiente:

<?php
$post_id = $post->ID; // ID de la entrada actual
$cat = get_the_category(); 
$current_cat_id = $cat[0]->cat_ID; // ID de la categoría actual 

$args = array( 
    'category' => $current_cat_id,
    'orderby'  => 'post_date',
    'order'    => 'DESC'
);
$posts = get_posts( $args );
// obtenemos los IDs de las entradas recuperadas con get_posts
$ids = array();
foreach ( $posts as $thepost ) {
    $ids[] = $thepost->ID;
}
// obtenemos y mostramos la entrada siguiente y anterior de la misma categoría
$thisindex = array_search( $post_id, $ids );
$previd    = isset( $ids[ $thisindex - 1 ] ) ? $ids[ $thisindex - 1 ] : 0;
$nextid    = isset( $ids[ $thisindex + 1 ] ) ? $ids[ $thisindex + 1 ] : 0;

if ( $previd ) {
    ?><a rel="prev" href="<?php echo get_permalink($previd) ?>">Anterior</a><?php
}
if ( $nextid ) {
    ?><a rel="next" href="<?php echo get_permalink($nextid) ?>">Siguiente</a><?php
}

<?php

$post_id = $post->ID; // ID de la entrada actual

$cat = get_the_category();

$current_cat_id = $cat[0]->cat_ID; // ID de la categoría actual

$args = array(

'category' => $current_cat_id,

'orderby' => 'post_date',

'order' => 'DESC'

);

$posts = get_posts( $args );

// obtenemos los IDs de las entradas recuperadas con get_posts

$ids = array();

foreach ( $posts as $thepost ) {

$ids[] = $thepost->ID;

}

// obtenemos y mostramos la entrada siguiente y anterior de la misma categoría

$thisindex = array_search( $post_id, $ids );

$previd = isset( $ids[ $thisindex - 1 ] ) ? $ids[ $thisindex - 1 ] : 0;

$nextid = isset( $ids[ $thisindex + 1 ] ) ? $ids[ $thisindex + 1 ] : 0;

if ( $previd ) {

?><a rel="prev" href="<?php echo get_permalink($previd) ?>">Anterior</a><?php

}

if ( $nextid ) {

?><a rel="next" href="<?php echo get_permalink($nextid) ?>">Siguiente</a><?php

}

A continuación, si lo deseas, puedes añadir algo de CSS a la hoja de estilos del tema hijo, más que nada para hacer los enlaces más estilosos:

a.previous-post, a.next-post {
    color: #fff;
    background-color: #4498e7;
    text-align: center;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    border: 1px solid;
    padding: 0 20px;
    margin-bottom: 30px;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: bold;
}

a.previous-post:hover, a.next-post:hover {
    color: #4498e7;
    background-color: #fff;
}

a.previous-post {
    float: left !important;
}

a.next-post {
    float: right !important;
}

a.previous-post, a.next-post {

color: #fff;

background-color: #4498e7;

text-align: center;

height: 34px;

line-height: 34px;

font-size: 14px;

border: 1px solid;

padding: 0 20px;

margin-bottom: 30px;

text-transform: uppercase;

border-radius: 4px;

font-weight: bold;

}

a.previous-post:hover, a.next-post:hover {

color: #4498e7;

background-color: #fff;

}

a.previous-post {

float: left !important;

}

a.next-post {

float: right !important;

}

¿Y no hay plugins para esto?

Bueno sí, alguno hay.

Que yo sepa están estos dos plugins que permiten cambiar el comportamiento por defecto de los enlaces a entrada anterior y siguiente para que estén dentro de la misma categoría:

Verás que llevan tiempo sin actualizarse pero deberían funcionar igualmente.