¿Cómo puedo envolver los números de página de the_posts_pagination en WordPress en mi propio div?

4 minutos de lectura

avatar de usuario
Darren Bachan

En WordPress, estoy usando the_posts_pagination para escupir los botones anterior/siguiente y los números de página intermedios. No me gusta cómo WordPress escupe su propio marcado cuando me gustaría agrupar ciertos elementos en divs.

Este es mi código actual:

PHP

<?php the_posts_pagination( array(
   'mid_size' => 2,
   'prev_text' => __( 'Previous Page', 'textdomain' ),
   'next_text' => __( 'Next Page', 'textdomain' ),
   'screen_reader_text' => ( '' )
) ); ?> 

Escupe esto:

HTML

<nav class="navigation pagination" role="navigation">
        <div class="nav-links">
        <a class="prev page-numbers" href="#">Prev Page</a>
        <a class="page-numbers" href="#">1</a>
        <span class="page-numbers current">2</span>
        <a class="page-numbers" href="">3</a>
        <a class="page-numbers" href="">4</a>
        <a class="next page-numbers" href="">Next Page</a>
    </div>
</nav>

Me gustaría la capacidad de hacer que se vea así:

<nav class="navigation pagination" role="navigation">
        <div class="nav-links">
        <a class="prev page-numbers" href="#">Prev Page</a>
        <div class="page-numbers-container">
             <a class="page-numbers" href="#">1</a>
             <span class="page-numbers current">2</span>
             <a class="page-numbers" href="">3</a>
             <a class="page-numbers" href="">4</a>
        </div>
        <a class="next page-numbers" href="">Next Page</a>
    </div>
</nav>

Incluso si pudiera envolver los enlaces siguiente y anterior en un div, eso también sería genial. No quiero tener que editar nada de los archivos principales de WordPress. ¿Necesitaría escribir una función?

EDITAR

Esto está en mi index.php

<?php the_posts_pagination( wp_custom_pagination(['prev_text' => __( 'Previous Page', 'textdomain' ), 'next_text' => __( 'Next Page', 'textdomain' )])); ?>

Esto es lo que puse dentro de functions.php

function wp_custom_pagination($args = [], $class="pagination") {

            if ($GLOBALS['wp_query']->max_num_pages <= 1) return;

            $args = wp_parse_args( $args, [
                'mid_size'           => 2,
                'prev_next'          => false,
                'prev_text'          => __('Older posts', 'textdomain'),
                'next_text'          => __('Newer posts', 'textdomain'),
                'screen_reader_text' => __('Posts navigation', 'textdomain'),
            ]);

            $links     = paginate_links($args);
            $next_link = get_previous_posts_link($args['next_text']);
            $prev_link = get_next_posts_link($args['prev_text']);
            $template  = apply_filters( 'navigation_markup_template', '
            <nav class="navigation %1$s" role="navigation">
                <h2 class="screen-reader-text">%2$s</h2>
                <div class="nav-links">%3$s<div class="page-numbers-container">%4$s</div>%5$s</div>
            </nav>', $args, $class);

            echo sprintf($template, $class, $args['screen_reader_text'], $prev_link, $links, $next_link);

        }

the_posts_pagination() usos paginar_enlaces() que no tiene filtro para alterar la salida como quieras.

Entonces, creemos una plantilla de paginación personalizada:

function the_so37580965_wp_custom_pagination($args = [], $class="pagination") {

    if ($GLOBALS['wp_query']->max_num_pages <= 1) return;

    $args = wp_parse_args( $args, [
        'mid_size'           => 2,
        'prev_next'          => false,
        'prev_text'          => __('Older posts', 'textdomain'),
        'next_text'          => __('Newer posts', 'textdomain'),
        'screen_reader_text' => __('Posts navigation', 'textdomain'),
    ]);

    $links     = paginate_links($args);
    $next_link = get_previous_posts_link($args['next_text']);
    $prev_link = get_next_posts_link($args['prev_text']);
    $template  = apply_filters( 'the_so37580965_navigation_markup_template', '
    <nav class="navigation %1$s" role="navigation">
        <h2 class="screen-reader-text">%2$s</h2>
        <div class="nav-links">%3$s<div class="page-numbers-container">%4$s</div>%5$s</div>
    </nav>', $args, $class);

    echo sprintf($template, $class, $args['screen_reader_text'], $prev_link, $links, $next_link);

}

Pruébalo. Además, eche un vistazo a paginar_enlaces() función, hay muchos más argumentos que puede necesitar.

  • ¿Cómo llamo a esto en mi index.php?

    – Darren Bachan

    4 de junio de 2016 a las 1:11

  • @DarrenBachan Solo necesita reemplazar el the_posts_pagination(...) código con the_so37580965_wp_custom_pagination(['prev_text' => __( 'Previous Page', 'textdomain' ), 'next_text' => __( 'Next Page', 'textdomain' )]). Eso es todo.

    – dan9vu

    4 de junio de 2016 a las 1:15

  • Edité el OP para mostrarte lo que estoy haciendo, recibí un error fatal que decía una función indefinida wp_custom_pagination(). Cambié un poco, el so37580965 era demasiado, a menos que sea necesario.

    – Darren Bachan

    4 de junio de 2016 a las 1:28

  • En mis funciones.php

    – Darren Bachan

    4 de junio de 2016 a las 1:35

  • Disculpas, no sé qué pasó, recargué la página y simplemente comenzó a funcionar. ¡Gracias!

    – Darren Bachan

    4 de junio de 2016 a las 1:39

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad