Navegación entre páginas hijas en WordPress

Rate this post

Índice del artículo

Mejorando la navegación entre páginas hijas en WordPress

La función de este código es mostrar la navegación entre páginas, tanto hacia la página anterior como hacia la página siguiente, junto con sus títulos, dentro de una jerarquía de páginas.

La idea es mostrar una navegación entre las páginas hijas de una página principal. Por lo que es necesario tener esa configuración de páginas.

La navegación se mostrará también en la página padre, pudiendo así «empezar a navegar» desde esa misma página.

El codigo trabaja a partir del menu_order de las páginas hijas, excluyendo las páginas con el orden de menú a 0. Por lo que si se quiere no usar esta navegación en un grupo de subpaginas, es tan fácil como dejar el menu_order a cero.

Implementación de la navegación entre páginas hijas en WordPress

Explicación del código.

Se obtiene el ID de la página actual utilizando la función get_the_ID() y se inicializan algunas variables para almacenar la información de la página anterior y siguiente.

$current_id = get_the_ID();
$next_id = '';
$next_title = '';
$next_link = '';
$class = '';

Se verifica si la página actual tiene un padre utilizando la función wp_get_post_parent_id(). Si tiene un padre, significa que se encuentra dentro de una jerarquía de páginas.

if ( wp_get_post_parent_id( $current_id ) ) :

Si la página actual tiene un padre, se obtiene el ID del padre y se obtiene el orden de la página actual utilizando la función get_post_field(). También se calculan los valores de orden para la página anterior y siguiente.

$parent_id = wp_get_post_parent_id( $current_id );
    $current_order = get_post_field( 'menu_order', $current_id );
    $current_order_prev = $current_order - 1;
    $current_order_next = $current_order + 1;

Se obtienen todas las páginas hijas del padre utilizando la función get_pages() y se recorre el arreglo de páginas para encontrar la página anterior y siguiente basándose en el orden.

$pages = get_pages( array(
    'child_of' => $parent_id,
    'post_status' => 'publish',
) );

if ( 0 < $current_order_prev ) :
    foreach( $pages as $page ) :

Si el valor de $current_order_prev es mayor que 0, significa que hay una página anterior, por lo que se asigna su ID, título y enlace a las variables correspondientes. Si no hay una página anterior, se asigna el ID, título y enlace del padre.

$pages = get_pages( array(
    'child_of' => $parent_id,
    'post_status' => 'publish',
) );

if ( 0 < $current_order_prev ) :

    foreach( $pages as $page ) :
        if ( $page->menu_order == $current_order_prev ) :

            $prev_id = $page->ID;
            $prev_title = $page->post_title;
            $prev_link = get_permalink( $prev_id );

            break;
        endif;
    endforeach;

else :

    $prev_id = $parent_id;
    $prev_title = get_the_title( $prev_id );
    $prev_link  = get_permalink( $prev_id );

endif;

Se busca la página siguiente basándose en el orden y se asigna su ID, título y enlace a las variables correspondientes.

foreach( $pages as $page ) :
    if ( $page->menu_order == $current_order_next ) :

        $next_id = $page->ID;
        $next_title = $page->post_title;
        $next_link = get_permalink( $next_id );

        break;
    endif;
endforeach;

Si la página actual no tiene un padre, se asigna la clase CSS «only-next» para mostrar solo el enlace a la página siguiente.

else :
$class = ' only-next';

Se obtienen todas las páginas hijas de la página actual y se busca la página con orden 1 para asignar su ID, título y enlace a las variables correspondientes.

$pages = get_pages( array(
    'child_of' => $current_id,
    'post_status' => 'publish',
) );

foreach( $pages as $page ) :
    if ( $page->menu_order == 1 ) :

        $next_id    = $page->ID;
        $next_title = $page->post_title;
        $next_link  = get_permalink( $next_id );

        break;
    endif;
endforeach;

endif;

Después de obtener toda la información necesaria, se muestra la navegación utilizando la estructura HTML dentro de un elemento <nav></nav>. Se comprueba si existe una página anterior o siguiente utilizando la condición if (!empty($prev_id) || !empty($next_id)). Si existe al menos una de ellas, se muestra la navegación.

<?php if ( ! empty( $prev_id ) || ! empty( $next_id ) ) : ?>
    <nav class="page-navigation<?php echo $class; ?>" role="navigation">

Dentro de la navegación, se muestra el enlace a la página anterior si existe, seguido del título de la página anterior y una flecha hacia la izquierda. Luego se muestra el enlace a la página siguiente si existe, seguido de una flecha hacia la derecha y el título de la página siguiente.

if ( ! empty( $prev_id ) ) :
    echo '<a class="prev" href="' . $prev_link . '" title="">';
        echo '<span class="pagination-meta">' . __( 'Read:', 'tms' ) . ' ' . $prev_title . '</span>' . ap_get_svg_icon( array( 'icon' => 'arrow-left' ) );
    echo '</a>';
endif;

if ( ! empty( $next_id ) ) :
    echo '<a class="next" href="' . $next_link . '" title="">';
        echo ap_get_svg_icon( array( 'icon' => 'arrow-right' ) ) . '<span class="pagination-meta">' . __( 'Read:', 'tms' ) . ' ' . $next_title . '</span>';
    echo '</a>';
endif;

Optimizando la experiencia de navegación en jerarquías de páginas en WordPress

El codigo completo para copiar.

<?php
$current_id = get_the_ID();
$next_id    = '';
$next_title = '';
$next_link  = '';
$class      = '';

if ( wp_get_post_parent_id( $current_id ) ) :

    $parent_id          = wp_get_post_parent_id( $current_id );
    $current_order      = get_post_field( 'menu_order', $current_id );
    $current_order_prev = $current_order - 1;
    $current_order_next = $current_order + 1;

    // Prev

    $pages = get_pages( array(
        'child_of'    => $parent_id,
        'post_status' => 'publish',
    ) );

    if ( 0 < $current_order_prev ) :

        foreach( $pages as $page ) :
            if ( $page->menu_order == $current_order_prev ) :

                $prev_id    = $page->ID;
                $prev_title = $page->post_title;
                $prev_link  = get_permalink( $prev_id );

                break;
            endif;
        endforeach;

    else :

        $prev_id    = $parent_id;
        $prev_title = get_the_title( $prev_id );
        $prev_link  = get_permalink( $prev_id );

    endif;

    // Next

    foreach( $pages as $page ) :
        if ( $page->menu_order == $current_order_next ) :

            $next_id    = $page->ID;
            $next_title = $page->post_title;
            $next_link  = get_permalink( $next_id );

            break;
        endif;
    endforeach;

else :

    $class = ' only-next';

    $pages = get_pages( array(
        'child_of'    => $current_id,
        'post_status' => 'publish',
    ) );

    foreach( $pages as $page ) :
        if ( $page->menu_order == 1 ) :

            $next_id    = $page->ID;
            $next_title = $page->post_title;
            $next_link  = get_permalink( $next_id );

            break;
        endif;
    endforeach;

endif;
?>

<?php if ( ! empty( $prev_id ) || ! empty( $next_id ) ) : ?>

    <nav class="page-navigation<?php echo $class; ?>" role="navigation">

    <?php
        if ( ! empty( $prev_id ) ) :
            echo '<a class="prev" href="' . $prev_link . '" title="">';
                echo '<span>←</span>' . '<span class="pagination-meta">' . __( 'Read:', 'tms' ) . ' ' . $prev_title . '</span>';
            echo '</a>';
        endif;

        if ( ! empty( $next_id ) ) :
            echo '<a class="next" href="' . $next_link . '" title="">';
                echo '<span class="pagination-meta">' . __( 'Read:', 'tms' ) . ' ' . $next_title . '</span>' '<span>→</span>';
            echo '</a>';
        endif;
        ?>

    </nav>

<?php endif; ?>