X

Paginación sin plugin

Snippets by IsItWP

¿Está buscando una manera de crear paginación manual sin plugin? Si bien es probable que haya un plugin para esto, hemos creado un fragmento de código rápido que puede utilizar para crear una navegación de paginación clásica y controlar la salida de su contenido en WordPress.

Instrucciones:

Todo lo que tienes que hacer es añadir este código al archivo functions.php de tu tema o en un plugin específico del sitio:

function pagination($prev = '«', $next = '»') {
    global $wp_query, $wp_rewrite;
    $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
    $pagination = array(
        'base' => @add_query_arg('paged','%#%'),
        'format' => '',
        'total' => $wp_query->max_num_pages,
        'current' => $current,
        'prev_text' => __($prev),
        'next_text' => __($next),
        'type' => 'plain'
);
    if( $wp_rewrite->using_permalinks() )
        $pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );

    if( !empty($wp_query->query_vars['s']) )
        $pagination['add_args'] = array( 's' => get_query_var( 's' ) );

    echo paginate_links( $pagination );
};

Opcionalmente, utilice este código para la matriz $pagination para mostrar un aspecto diferente:

$pagination = array(
  'base' => @add_query_arg('paged','%#%'),
  'format' => '',
  'total' => $wp_query->max_num_pages,
  'current' => $current,
  'prev_text' => __('« Previous'),
  'next_text' => __('Next »'),
  'end_size' => 1,
  'mid_size' => 2,
  'show_all' => true,
  'type' => 'list'
);

A continuación puedes añadir la paginación usando la función pagination(). Puedes añadirla en algún lugar fuera del bucle, pero dentro de la sentencia if( have_post() ) de tu archivo de plantilla.

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        // post goes here
    <?php endwhile; ?>

    <div class="pagination"><?php pagination('»', '«'); ?></div>

<?php endif; ?>

WordPress también te permite añadir clases CSS personalizadas que puedes utilizar para gestionar el aspecto de tu nueva navegación. Vea este ejemplo CSS para averiguar cómo darle estilo:

.page-numbers { font-size: 15px; }
.page-numbers.current { color: #222; }
.page-numbers .dots { letter-spacing: 1px }
a.page-numbers  { font-size: 14px; color: #3888ff; }

Nota: Si es la primera vez que añade fragmentos de código en WordPress, consulte nuestra guía sobre cómo añadir correctamente fragmentos de código en WordPress, para no romper accidentalmente su sitio.

Si te ha gustado este fragmento de código, por favor considere revisar nuestros otros artículos en el sitio como: 43 mejores temas de fotografía para WordPress y cómo cambiar fácilmente de Squarespace a WordPress.

Comentarios   Deja una respuesta

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Tenga en cuenta que todos los comentarios se moderan de acuerdo con nuestra política de privacidad , y que todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

WordPress Launch Checklist

La lista definitiva para lanzar WordPress

Hemos recopilado todos los elementos esenciales de la lista de comprobación para el lanzamiento de su próximo sitio web de WordPress en un práctico ebook.
Sí, envíeme el ¡gratuito!