Cómo añadir paginación numérica en tu tema de WordPress

¿Quieres añadir paginación numérica en tu tema de WordPress?

Por defecto, los temas de WordPress añaden enlaces Siguiente / Anterior en la parte inferior de las páginas de archivo. El problema es que no son muy fáciles de usar. Por eso muchos blogs populares utilizan la paginación numérica para facilitar a los visitantes la navegación por sus páginas de archivo.

En este artículo, te mostraremos cómo añadir paginación numérica en tu tema de WordPress.

Cómo añadir paginación numérica en tu tema de WordPress

¿Por qué añadir paginación numérica en tu tema de WordPress?

La mayoría de los temas tienen una página de archivo que muestra una lista de publicaciones. A medida que publiques más entradas en tu blog de WordPress, tu página de archivo abarcará varias páginas.

Los enlaces de paginación ayudan a los visitantes a moverse entre las páginas de archivo, y suelen aparecer en la parte inferior de tu sitio web de WordPress.

Algunos temas de WordPress utilizan los enlaces "Entradas antiguas" y "Entradas nuevas" para la paginación. Sin embargo, esto sólo permite al visitante avanzar y retroceder una página.

Tampoco muestra la ubicación actual del visitante en el archivo. Esto puede dificultar a los visitantes la navegación por el archivo de tu blog.

Ahí es donde entra la paginación numérica.

En lugar de mostrar los enlaces "Antiguo" y "Nuevo", la paginación numérica muestra una serie de números que permiten a los visitantes saltar a una página concreta del archivo.

La paginación numérica también puede utilizar resaltados o diferentes colores para mostrar el número de la página actual, de modo que el visitante siempre sepa exactamente en qué parte del archivo se encuentra.

En WPMundobytes, utilizamos la paginación numérica y resaltamos el número de la página actual en color naranja. También proporcionamos enlaces directos a las 4 páginas que rodean a la página actual del visitante.

Incluso tenemos un enlace a la última página de nuestro archivo, para que los visitantes puedan ver rápida y fácilmente nuestros primeros posts, como puedes ver en la siguiente imagen.

Enlaces de paginación numérica en el sitio web de WPMundobytes

Según nuestra experiencia, este tipo de paginación numérica hace que tu sitio sea más fácil de navegar en comparación con los enlaces predeterminados "Mensajes antiguos" y "Mensajes nuevos".

Si tu tema de WordPress tiene la paginación "Más antiguo" y "Más nuevo", siempre recomendamos sustituirla por la paginación numérica.

En esta guía, cubriremos dos formas diferentes de añadir paginación numérica en tu tema de WordPress. Si prefieres ir directamente a un método concreto, puedes utilizar los enlaces que aparecen a continuación.

La forma más sencilla de añadir paginación numérica en WordPress es utilizando el botón WP-PageNavi plugin.

Para utilizar este plugin, todavía tendrás que hacer algunos cambios en el código de tu tema, pero es mucho más fácil que el método de código completo porque WP-PageNavi te da un control completo sobre la paginación de tu sitio.

Lo primero que tienes que hacer es instalar y activar el El plugin WP-PageNavi. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de activar el plugin ve a Configuración " PageNavi para configurar los ajustes del plugin.

Cómo añadir paginación numérica en WordPress

Aquí puedes sustituir cualquier texto de la paginación por defecto por tu propio texto. Por ejemplo, puedes cambiar el texto que tu sitio web utiliza para sus enlaces "Primera página" y "Última página".

También puedes personalizar los enlaces de paginación numérica.

En la sección "Número de páginas a mostrar", puedes elegir cuántas páginas mostrará el plugin en la sección de paginación de tu sitio web.

El plugin WP-PageNavi para WordPress

Está configurado por defecto en 5, lo que significa que WP-PageNavi mostrará enlaces directos a 5 páginas.

Como puedes ver en la captura de pantalla de abajo, si estás en la página 4, entonces verás enlaces a las páginas 2, 3, 4, 5 y 6.

Un ejemplo de paginación numérica en WordPress

Puede que quieras mostrar más o menos páginas. Para hacer este cambio, simplemente escribe el nuevo número en el campo "Número de páginas a mostrar".

Por defecto, el plugin mostrará varios números mayores. Esto permite a los visitantes avanzar por varias páginas, con un solo clic.

Por defecto, el plugin muestra tres números más grandes que aumentan de 10 en 10. Por ejemplo, 10, 20 y 30.

¿Quieres utilizar un intervalo diferente, como 5 o 20? Entonces sólo tienes que escribir el nuevo intervalo en el campo "Mostrar números de página más grandes en múltiplos de".

Personalizar la configuración de la paginación de WordPress

Cada sitio de WordPress es diferente, por lo que es una buena idea probar diferentes configuraciones para ver qué ajustes de paginación funcionan mejor para ti.

Si has realizado algún cambio en la configuración de WP-PageNavi, no olvides desplazarte hasta el final de la página y hacer clic en el botón Guardar cambios.

A continuación, tienes que añadir una etiqueta de plantilla en tu tema de WordPress. Para ello, te recomendamos crear un tema hijo y luego editar el código del tema hijo.

Al crear un tema hijo, puedes actualizar tu tema de WordPress de forma segura sin perder tu paginación numérica personalizada. Para saber más, consulta nuestra guía paso a paso sobre cómo crear un tema hijo de WordPress.

Independientemente de que elijas editar un tema padre o hijo, necesitarás un cliente FTP. Si es la primera vez que utilizas el FTP, puedes ver nuestra guía completa sobre cómo conectarte a tu sitio utilizando el FTP.

Cuando estés conectado a tu cuenta de alojamiento de WordPress mediante FTP, estarás listo para editar el código de tu tema de WordPress.

Estos pasos variarán en función de tu tema de WordPress. Sin embargo, normalmente tendrás que editar el código de tu archivo index.php o archive.php, además de cualquier otro archivo de plantilla de tu tema de WordPress.

Simplemente abre estos archivos y busca las etiquetas previous_posts_link y next_posts_link.

Si encuentras estas etiquetas, sustitúyelas por el siguiente fragmento de código:

Algunos temas pueden no tener la etiqueta previous_posts_link o next_posts_link.

Si no encuentras estas etiquetas en tu tema, busca en su lugar the_posts_navigation. Por ejemplo, encontrarás lo siguiente en el archivo archive.php del tema Twenty-One:

<?php /*twenty_twenty_one_the_posts_navigation();*/ 

A continuación, puedes sustituir esta línea por el siguiente fragmento de código:

Después de hacer estos cambios, guarda y cierra cualquier archivo de tema de WordPress que esté abierto.

Ahora, si visitas tu página de archivo de WordPress deberías ver tu nueva paginación numérica en vivo en tu sitio web

Llegados a este punto, puede que quieras cambiar el color y el estilo de la paginación numérica, para que se adapte mejor a tu tema o a la marca de tu sitio web.

Puedes hacerlo editando el código del plugin.

Sin embargo, te recomendamos pegar el código de WP-PageNavi en el archivo style.css de tu tema, y luego hacer tus cambios dentro del archivo del tema. Así no perderás tus personalizaciones cuando actualices el plugin WP-PageNavi.

Para copiar el código de tu plugin, dirígete a Configuración " PageNavi. A continuación, busca la sección "Usar pagenavi-css.css" y haz clic en el botón de opción "No" que hay junto a ella.

No olvides hacer clic en el botón 'Guardar cambios' para guardar los cambios.

Cambiar el estilo de paginación de WordPress

A continuación, ve a Plugins " Editor de archivos de plugins.

A continuación, puedes abrir el desplegable 'Seleccionar plugin para editar' y elegir 'WP-Page Navi'. Después de eso, estás listo para hacer clic en 'Seleccionar'

El editor de código de WordPress

En el menú de la derecha, haz clic en el archivo pagenavi-css.css.

A continuación, sigue adelante y copia todo el código de este archivo.

El editor de plugins de WordPress

A continuación, sólo tienes que ir a Apariencia " Editor de Archivos Temáticos.

En el menú de la derecha, haz clic en el archivo style.css de tu tema.

El editor de temas de WordPress

Ahora puedes pegar tu código pagenavi-css.css en el archivo style.css del tema, y empezar a hacer tus cambios.

Veamos un ejemplo. Aquí tienes una versión modificada del código de paginación numérica que puedes añadir al archivo style.css de tu tema:

wp-pagenavi {
    clear: both;
}
 
.wp-pagenavi a, .wp-pagenavi span {
    color: #FFF;
    text-decoration: none;
    background-color:#6FB7E9;
    border: 1px solid #B2D1E5;
    padding: 5px 5px;
    margin: 2px;
}
 
.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #E9F2F9;
    background-color:#6FB7E9;
}
 
.wp-pagenavi span.current {
    font-weight: bold;
    background-color:#3C8DC5;
}

En la siguiente imagen, puedes ver cómo se verá esta paginación numérica en tu sitio.

Paginación numérica personalizada en un tema de WordPress

Merece la pena probar diferentes estilos para ver cuál es el que mejor queda en tu sitio web de WordPress.

Cuando estés satisfecho con el aspecto de tu paginación numérica, haz clic en el botón Actualizar archivo para guardar los cambios.

Otra opción es añadir manualmente la paginación numérica en tu tema de WordPress mediante un código.

Muchos temas de WordPress vienen con enlaces incorporados "Más antiguo" y "Más nuevo", o con una paginación numérica por defecto. Por ejemplo, el popular tema Astra añade automáticamente su propia paginación numérica a tus páginas de archivo, como puedes ver en la siguiente imagen.

Paginación en el tema Astra de WordPress

Puedes utilizar este método para personalizar la paginación incorporada en un tema. Por ejemplo, puedes cambiar el estilo para que se adapte mejor a tu sitio.

Para añadir manualmente la paginación numérica, abre el archivo functions.php de tu tema. Aquí puedes utilizar un cliente FTP o el gestor de archivos de tu cPanel de alojamiento de WordPress. Si utilizas FTP, puedes consultar nuestra guía completa sobre cómo conectarte a tu sitio mediante FTP.

Una vez que te hayas conectado con éxito a tu sitio, abre el archivo functions.php y añade el siguiente código:

function wpbeginner_numeric_posts_nav() {
 
    if( is_singular() )
        return;
 
    global $wp_query;
 
    /** Stop execution if there's only 1 page */
    if( $wp_query->max_num_pages <= 1 )
        return;
 
    $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
    $max   = intval( $wp_query->max_num_pages );
 
    /** Add current page to the array */
    if ( $paged >= 1 )
        $links[] = $paged;
 
    /** Add the pages around the current page to the array */
    if ( $paged >= 3 ) {
        $links[] = $paged - 1;
        $links[] = $paged - 2;
    }
 
    if ( ( $paged + 2 ) <= $max ) {
        $links[] = $paged + 2;
        $links[] = $paged + 1;
    }
 
    echo '<div class="navigation"><ul>' . "n";
 
    /** Previous Post Link */
    if ( get_previous_posts_link() )
        printf( '<li>%s</li>' . "n", get_previous_posts_link() );
 
    /** Link to first page, plus ellipses if necessary */
    if ( ! in_array( 1, $links ) ) {
        $class = 1 == $paged ? ' class="active"' : '';
 
        printf( '<li%s><a href="%s">%s</a></li>' . "n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
 
        if ( ! in_array( 2, $links ) )
            echo '<li>…</li>';
    }
 
    /** Link to current page, plus 2 pages in either direction if necessary */
    sort( $links );
    foreach ( (array) $links as $link ) {
        $class = $paged == $link ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "n", $class, esc_url( get_pagenum_link( $link ) ), $link );
    }
 
    /** Link to last page, plus ellipses if necessary */
    if ( ! in_array( $max, $links ) ) {
        if ( ! in_array( $max - 1, $links ) )
            echo '<li>…</li>' . "n";
 
        $class = $paged == $max ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "n", $class, esc_url( get_pagenum_link( $max ) ), $max );
    }
 
    /** Next Post Link */
    if ( get_next_posts_link() )
        printf( '<li>%s</li>' . "n", get_next_posts_link() );
 
    echo '</ul></div>' . "n";
 
}

Este código obtiene el número de páginas, listo para que lo muestres en tu tema de WordPress.

Los siguientes pasos variarán en función de tu tema.

Si tu tema no tiene alguna forma de paginación por defecto incorporada, entonces puedes simplemente añadir la siguiente etiqueta de plantilla en tu index.php, archive.php, category.php, o cualquier otra página en la que quieras mostrar paginación numérica.

<?php wpbeginner_numeric_posts_nav(); ?>

Ten en cuenta que el lugar donde añadas este código afectará al lugar donde se muestre la paginación numérica en tu sitio web.

Normalmente, querrás mostrar la paginación en la parte inferior de tus páginas de archivo, por lo que normalmente querrás añadir la etiqueta de plantilla a tu código de pie de página.

¿Tu tema ya tiene alguna forma de paginación, como los enlaces "Entradas antiguas" y "Entradas nuevas"?

En este caso, tendrás que encontrar el código de paginación y sustituirlo por el fragmento anterior.

Por ejemplo, Ashe es uno de los mejores temas gratuitos para blogs de WordPress y ya añade enlaces de paginación "Primera" y "Última página" a tus páginas de archivo.

Para sustituir estos enlaces incorporados por la paginación numérica, tienes que editar los archivos templates/grid.php y templates/blog-pagination.php del tema.

En cada uno de estos archivos, simplemente encuentra la siguiente sección:

<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>

A continuación, puedes sustituir esta línea por el siguiente fragmento de código:

<?php wpbeginner_numeric_posts_nav(); ?>

Una vez que hayas añadido el código, no olvides guardar los cambios.

El siguiente paso es dar estilo a tu paginación numérica personalizada.

Para ayudar a los visitantes a navegar por el archivo, vamos a resaltar el número de la página actual con un color diferente. Para ello, abre el archivo style.css de tu tema y pega el siguiente código en este archivo:

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #fff;
    text-decoration:none;
}
 
.navigation li {
    display: inline;
}
 
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    background-color: #6FB7E9;
    border-radius: 3px;
    cursor: pointer;
    padding: 12px;
    padding: 0.75rem;
}
 
.navigation li a:hover,
.navigation li.active a {
    background-color: #3C8DC5;
}

Después de todo esto, simplemente guarda los cambios haciendo clic en el botón Actualizar archivo.

Ahora, si visitas la página del archivo, verás la paginación numérica en vivo en tu sitio web.

Añadir manualmente la paginación numérica en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo añadir paginación numérica en tu tema de WordPress. También puedes consultar nuestra guía sobre cómo ganar dinero en Internet con un blog de WordPress y cómo crear un tema de WordPress personalizado sin escribir ningún código.

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Si quieres conocer otros artículos parecidos a Cómo añadir paginación numérica en tu tema de WordPress puedes visitar la categoría Themes.

¡Más Contenido!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Go up