¿Quieres agregar paginación numérica en tu tema de WordPress?
Por defecto, los temas de WordPress agregan enlaces de Siguiente / Anterior en la parte inferior de las páginas de archivo. El desafío es que no son muy amigables para el usuario. Es por eso que muchos blogs populares usan 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 agregar paginación numérica en tu tema de WordPress.
¿Por qué agregar 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 publicas más publicaciones de 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, por lo general, aparecen en la parte inferior de tu sitio web de WordPress.
Algunos temas de WordPress usan enlaces de 'Publicaciones anteriores' y 'Publicaciones más recientes' para la paginación. Sin embargo, esto solo permite al visitante avanzar y retroceder una página.
Tampoco muestra la ubicación actual del visitante en el archivo. Esto puede dificultar que los visitantes naveguen por el archivo de tu blog.
Ahí es donde entra la paginación numérica.
En lugar de mostrar enlaces de 'Anterior' y 'Siguiente', la paginación numérica muestra una serie de números que permiten a los visitantes saltar a una página específica en el archivo.
La paginación numérica también puede usar resaltados o diferentes colores para mostrar el número de página actual, de modo que el visitante siempre sepa exactamente dónde se encuentra en el archivo.
En WPBeginner, usamos paginación numérica y resaltamos el número de página actual en naranja. También proporcionamos enlaces directos a las 4 páginas que rodean la página actual del visitante.
Incluso tenemos un enlace a la última página de nuestro archivo, para que los visitantes puedan ver nuestras publicaciones más antiguas de forma rápida y sencilla, como puede ver en la siguiente imagen.
En nuestra experiencia, este tipo de paginación numérica hace que su sitio sea más fácil de navegar en comparación con los enlaces predeterminados de 'Publicaciones anteriores' y 'Publicación más reciente'.
Si su tema de WordPress tiene paginación 'Anterior' y 'Siguiente', siempre recomendamos reemplazarla con paginación numérica.
En esta guía, cubriremos dos formas diferentes de agregar paginación numérica en su tema de WordPress. Si prefiere saltar directamente a un método en particular, puede usar los enlaces a continuación.
- Método 1. Cómo agregar paginación numérica en WordPress usando WP-PageNavi
- Método 2. Cómo agregar paginación numérica manualmente en su tema de WordPress
Método 1. Cómo agregar paginación numérica en WordPress usando WP-PageNavi
La forma más fácil de agregar paginación numérica en WordPress es usando el plugin WP-PageNavi.
Para usar este plugin, aún necesitará hacer algunos cambios en el código de su tema, pero es mucho más fácil que el método de código completo porque WP-PageNavi le da control total sobre la paginación de su sitio.
First thing you need to do is install and activate the WP-PageNavi plugin. For more details, please see our step by step guide on how to install a WordPress plugin.
Después de activar el plugin, vaya a Configuración » PageNavi para configurar los ajustes del plugin.
Aquí, puede reemplazar cualquiera de los textos de paginación predeterminados con su propia redacción. Por ejemplo, puede cambiar el texto que su sitio web utiliza para sus enlaces de 'Primera página' y 'Última página'.
También puede 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.
Este valor está configurado en 5 por defecto, lo que significa que WP-PageNavi mostrará enlaces directos a 5 páginas.
Como puedes ver en la captura de pantalla a continuación, si estás en la página 4, verás enlaces a las páginas 2, 3, 4, 5 y 6.
Es posible que desees 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 más grandes. Esto permite a los visitantes avanzar varias páginas con un solo clic.
Por defecto, el plugin muestra tres números más grandes que aumentan en 10 cada vez. Por ejemplo, 10, 20 y 30.
¿Quieres usar un intervalo diferente, como 5 o 20? Simplemente escribe el nuevo intervalo en el campo 'Mostrar números de página más grandes en múltiplos de'.
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, necesitas agregar una etiqueta de plantilla en tu tema de WordPress. Para hacer esto, recomendamos crear un tema hijo y luego editar el código del tema hijo.
Al crear un tema hijo, aún puedes actualizar tu tema de WordPress de forma segura sin perder tu paginación numérica personalizada. Para obtener más información, consulta nuestra guía paso a paso sobre cómo crear un tema hijo de WordPress.
No importa si eliges editar un tema padre o hijo, necesitarás un cliente FTP. Si es la primera vez que usas FTP, puedes ver nuestra guía completa sobre cómo conectarte a tu sitio usando FTP.
Cuando te hayas conectado a tu cuenta de hosting de WordPress a través de FTP, estarás listo para editar el código de tu tema de WordPress.
Estos pasos variarán dependiendo de tu tema de WordPress. Sin embargo, normalmente necesitarás editar el código en tu archivo index.php o archive.php, además de cualquier otro archivo de plantilla de archivo en tu tema de WordPress.
Simplemente abre estos archivos y luego busca las etiquetas previous_posts_link y next_posts_link.
Si encuentras estas etiquetas, reemplázalas con el siguiente fragmento de código:
<?php wp_pagenavi(); ?>
Algunos temas pueden no tener una etiqueta previous_posts_link o next_posts_link.
Si no puedes encontrar estas etiquetas en tu tema, busca the_posts_navigation en su lugar. Por ejemplo, encontrarás lo siguiente en el archivo archive.php del tema Twenty Twenty-One:
<?php /*twenty_twenty_one_the_posts_navigation();*/
Luego puedes proceder a reemplazar esta línea con el siguiente fragmento de código:
<?php wp_pagenavi(); ?>
Después de hacer estos cambios, guarda y luego cierra cualquier archivo abierto del tema de WordPress.
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.
En este punto, es posible que desees cambiar el color y el estilo de la paginación numérica, para que complemente mejor tu tema o la marca de tu sitio web.
Puedes hacer esto editando el código del plugin.
Sin embargo, 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. Esto significa que no perderás tus personalizaciones cuando actualices el plugin WP-PageNavi.
Para copiar el código de tu plugin, dirígete a Ajustes » PageNavi. Luego puedes encontrar la sección 'Usar pagenavi-css.css' y hacer clic en el botón de radio 'No' junto a ella.
No olvides hacer clic en el botón 'Guardar Cambios' para guardar tus modificaciones.
A continuación, ve a Plugins » Editor de Archivos de Plugins.
Luego puedes abrir el menú desplegable 'Seleccionar plugin para editar' y elegir 'WP-Page Navi'. Después de eso, estás listo para hacer clic en 'Seleccionar'.
En el menú de la derecha, haz clic en el archivo pagenavi-css.css.
Luego, procede a copiar todo el código de este archivo.
A continuación, simplemente ve a Apariencia » Editor de archivos del tema.
En el menú de la derecha, haz clic en el archivo style.css de tu tema.
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.
Vale la pena probar diferentes estilos para ver cuál se ve mejor 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 tus cambios.
Método 2. Cómo agregar paginación numérica manualmente en tu tema de WordPress
Otra opción es agregar paginación numérica manualmente en tu tema de WordPress usando código.
Muchos temas de WordPress vienen con enlaces incorporados de 'Anterior' y 'Siguiente', o paginación numérica predeterminada. Por ejemplo, el popular tema Astra agrega automáticamente su propia paginación numérica a tus páginas de archivo, como puedes ver en la siguiente imagen.
Puedes usar este método para personalizar la paginación incorporada de un tema. Por ejemplo, podrías cambiar el estilo para que se adapte mejor a tu sitio.
Para agregar paginación numérica manualmente, abre el archivo functions.php de tu tema. Aquí puedes usar un cliente FTP o el administrador de archivos de tu cPanel de hosting de WordPress. Si estás usando FTP, puedes ver nuestra guía completa sobre cómo conectarte a tu sitio usando FTP.
Una vez que te hayas conectado exitosamente a tu sitio, abre el archivo functions.php y agrega 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 dependiendo de tu tema.
Si tu tema no tiene alguna forma de paginación predeterminada incorporada, entonces simplemente puedes agregar la siguiente etiqueta de plantilla en tu index.php, archive.php, category.php, o cualquier otra página donde quieras mostrar paginación numérica.
<?php wpbeginner_numeric_posts_nav(); ?>
Solo ten en cuenta que donde agregues este código afectará dónde se muestra 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 generalmente querrás agregar la etiqueta de plantilla a tu código de pie de página.
¿Tu tema ya tiene alguna forma de paginación, como enlaces de 'Entradas anteriores' y 'Entradas siguientes'?
En este caso, necesitarás encontrar el código de paginación y reemplazarlo con el fragmento anterior.
Por ejemplo, Ashe es uno de los mejores temas gratuitos de blog de WordPress y ya agrega enlaces de paginación de 'Primera' y 'Última página' a tus páginas de archivo.
Para reemplazar estos enlaces integrados con paginación numérica, necesitas editar los archivos templates/grid.php y templates/blog-pagination.php de tu tema.
En cada uno de estos archivos, simplemente busca la siguiente sección:
<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>
Luego puedes proceder a reemplazar esta línea con el siguiente fragmento de código:
<?php wpbeginner_numeric_posts_nav(); ?>
Una vez que hayas agregado el código, no olvides guardar tus cambios.
El siguiente paso es estilizar tu paginación numérica personalizada.
Para ayudar a los visitantes a navegar por el archivo, vamos a resaltar el número de página actual con un color diferente. Para hacer esto, abre el archivo style.css de tu tema y luego 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 eso, simplemente guarda tus cambios haciendo clic en el botón Actualizar archivo.
Ahora, si visitas la página de archivo, verás la paginación numérica en vivo en tu sitio web.
Esperamos que este artículo te haya ayudado a aprender cómo agregar paginación numérica en tu tema de WordPress. También puedes consultar nuestra guía sobre formas de ganar dinero en línea blogueando con WordPress y cómo crear un tema personalizado de WordPress sin escribir ningún código.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Emmy Clifford
¿Cómo se puede hacer que los botones "Anterior" y "Siguiente" sean más audaces sin aplicar temas?
Soporte de WPBeginner
Necesitarías usar CSS para estilizar eso, si usas WP-PageNavi, te recomendamos consultar con su soporte para conocer su método recomendado o si tienen una opción integrada para ello.
Administrador
Kzain
esto es útil, pero ¿cómo sé si mi tema funciona con la paginación? y ¿qué sucede si uso el botón de paginación de Elementor para la sección de publicaciones relacionadas?
Soporte de WPBeginner
If your theme or page builder already has a pagination option, we would recommend using that first instead of the method from this guide
Administrador
Jiří Vaněk
Uso el tema Generate Press y encontré un fragmento que funciona muy bien para extender la barra de paginación a más páginas. Sin embargo, ahora veo, según este artículo, que también podría personalizar la barra de paginación para que coincida con el aspecto de mi sitio web. Probablemente intentaré pronto tu guía de personalización y trataré de estilizar mejor la barra para que coincida con los colores de mi sitio. Es un detalle menor, pero esta barra es bastante visible e importante. Gracias.
Sujal
There’s little bug in last lines which shows next link. You’re missing $ sign at two places get_next_posts_link() . Can you please fix that so code works well for new visitors
/** Siguiente enlace de entrada */
if ( $get_next_posts_link() )
printf( ‘%s’ . “\n”, $get_next_posts_link() );
Sandipan
No funciona. Después de agregar el código, los enlaces de index.php no funcionan
Soporte de WPBeginner
Es posible que tu tema tenga algún estilo personalizado, deberías contactar al soporte específico de tu tema y ellos deberían poder ayudarte.
Administrador
Quy
gracias.
Normalmente, home.php mostrará el contenido del bucle para la página de entrada, pero como mi tema no proporciona home.php por defecto, puse wpbeginner_numeric_posts_nav(); en index.php (debajo de endwhile;) y funciona.
Soporte de WPBeginner
Thanks for sharing how you were able to solve the issue
Administrador
FloJDM
¡Muy útil, gracias!
Soporte de WPBeginner
You’re welcome
Administrador
Alexandre
¡Artículo increíble, simple y directo al grano!
¡Me funcionó perfectamente, muchas gracias!
Soporte de WPBeginner
Glad our guide was helpful
Administrador
ModGirl
Estoy usando el tema de WordPress “X Blog” y estoy tratando de averiguar cómo agregar esto a ese tema. todo lo que intento me da errores. No estoy seguro de por qué el tema no funciona con esto. Cualquier ayuda sería apreciada. gracias
Adam
Este es un tutorial realmente útil, gracias. ¡Usé el ejemplo de código de Genesis con éxito!
Mi único problema fue que simplemente copiar y pegar el código de este sitio causó un error de codificación en donde van los puntos suspensivos en la paginación numerada. Así que en el sitio se mostraba un carácter de diamante/signo de interrogación en lugar de los puntos suspensivos. Terminé usando la entidad HTML (decimal) de puntos suspensivos: … en su lugar, lo que solucionó este error. Esto solo ocurrió en uno de los dos sitios donde se implementó este código, probablemente debido a diferencias en el meta charset o algo así.
Ilya
¡Saludos desde 2018! Tengo algo genial para ti, la función the_posts_pagination() del core de WordPress.
jagadeesh
agregué el código pero se muestra en la parte superior del sitio web
Sijo
La paginación no funciona después de la página 2. Muestra una página 404 al hacer clic en 3, 4, etc... Usé el mismo código anterior. ¿Cómo puedo resolver esto?
Jean Braithwaite
Estoy usando tu método manual para la paginación, y dices “agrega la siguiente etiqueta de plantilla en tu tema index.php, archive.php, category.php y cualquier otra plantilla de página de archivo”.
El sitio es un sitio web normal junto con un blog que utiliza un tipo de publicación personalizado.
Funcionó bien en mi página archive.php, pero también me gustaría usarlo en mi página de blog, que es una plantilla de página, page-blog.php. No puedo hacer que funcione allí en absoluto. ¿Por qué es eso? ¿Hay algo que pueda hacer para que funcione?
ziru
hola, agregué a algunas plantillas y mi wordpress ya no pudo funcionar, ni siquiera iniciar sesión y mi página de inicio se convirtió en una página en blanco y parece que todo el sitio web se rompió, ¿qué puedo hacer?
Turab
Te amo por esto. Eres un salvavidas.
Subroto
Muchas gracias por esta publicación.
Ingy Anees
Esto está funcionando bien conmigo en tipos de publicación personalizados, pero no puedo hacer que funcione con los resultados de búsqueda... no se muestra nada. ¿Algún consejo?
souno
Muy buen artículo y tengo una pregunta.
¿Cómo mostrar el número total de páginas al final? En tu demostración muestra "9"
¡Gracias!
renee
¡excelente código – funcionó a la perfección! gracias por compartirlo
Azamat
¿Cómo puedo agregar paginación a la lista de términos de taxonomía personalizada?
Andy
Al igual que Rajath, tuve algunos problemas con la paginación que no se mostraba bien en móviles. En mi caso, las líneas se superponían. Lo resolví agregando una altura de línea al CSS:
line-height: 2.5em;
mostafa
Hola, he usado este código para mi tema (sin el plugin wp-nav), funciona en otras páginas excepto en la página principal. ¿Cuál es exactamente el problema?
Rajath
Hola, estoy usando esta paginación en mi tema y funciona bien en todas las páginas y categorías, excepto en las páginas donde estoy usando custom wp_query. He leído que estás usando un código similar al del framework genesis y he usado wp_reset_query() pero no funciona. Gracias de antemano por la ayuda.
anuj sharma
Hola
Estoy usando tu código proporcionado y lo pego en la función .php y también agrego CSS en style.css, pero esto muestra el diseño de paginación pero no funciona.
JM
¡Hola! Primero que nada, quiero agradecerte por publicar esto. ¡Sé que esta publicación es bastante antigua, pero sigue siendo muy útil!
La paginación se muestra y funciona bien en su mayor parte; pero me faltan los enlaces de la primera y última página. No importa en qué página esté (primera, segunda, tercera, etc.), no aparecen enlaces de primera o última página. ¿Alguna idea de cómo puedo solucionar esto?
¡Gracias de antemano por cualquier ayuda!
Syed Hamza
La paginación numérica solo se muestra en PC pero no en móvil. Quiero mostrar esta paginación en ambas versiones.
¿Cómo puedo arreglarlo?
JeffD
Muchas gracias por el excelente tutorial. Quiero usar la solución sin plugin (el script php), pero sin truncamiento/elipses para los enlaces de página (en lugar de 1…2 3 4 5 6…10, quiero mostrar todas las páginas todo el tiempo – 1 2 3 4 5 6 7 8 9 10). ¿Cómo puedo modificar el script para hacer esto? ¡Debería ser fácil para ustedes expertos, pero no para mí! ¡Gracias de antemano por cualquier ayuda!
Nelson
Este código no me funciona, ¿tienen alguna sugerencia?
Youssef
Hola, quiero regresar la paginación predeterminada de WP en mi tema "freshlife" de theme junkie. No me gusta la paginación numérica porque muestra el total de publicaciones en mi sitio web. ¡Por favor, ayúdenme, principiantes de WP!
Bilal
quiero paginar mis productos, ¿cómo puedo hacerlo?
Rajath
Hola, buen tutorial y tu sitio web me ha ayudado en muchos problemas al desarrollar mi propio tema. He optado por la paginación manual que se muestra aquí en lugar de un plugin. Pero la paginación no es responsiva y se ve mal cuando se reduce el tamaño de la pantalla. ¿Cómo hacerla responsiva o hay alguna otra alternativa (sin plugins por favor)? No voy a publicar este tema, así que lo estoy construyendo solo para satisfacer mis necesidades...
Soporte de WPBeginner
Mira la hoja de estilos de tu tema de WordPress. Estudia cómo tu tema maneja la responsividad. Algunos temas usan media queries para detectar el ancho de la pantalla y luego ajustan diferentes elementos en consecuencia. Algunos temas usan anchos relativos para asegurarse de que todos los elementos dentro de su diseño sean responsivos al ancho de la pantalla.
Administrador
Rajath
Estoy desarrollando el tema. No puedo hacer que la paginación sea responsiva. Así que simplemente eliminé el padding alrededor de los enlaces, lo que hace que parezcan un botón. En su lugar, los dejé como números, lo que funciona bien también en pantallas pequeñas. Gracias por la respuesta.
javad
hola
¿usé el primer código en la función pero el idioma de WP cambió a palabras ilegibles por qué????
Gabriel Tellez
Gracias, hombre, es genial.
James
Estoy intentando eliminar la paginación de mi página de inicio que se encuentra debajo de cada resumen de publicación, para mí no se ve bien, ¿hay alguna forma de hacerlo?
Soporte de WPBeginner
Por favor, contacta al desarrollador de tu tema de WordPress. Ellos podrán guiarte mejor.
Administrador
Aryan
En realidad soy nuevo en wordpress pero conozco bien php... quiero agregar una paginación desde una tabla personalizada en la base de datos...
Fasih
la paginación numerada sin el plugin está funcionando bien en localhost pero cuando subo los archivos no veo nada, pero cuando reviso el elemento de inspección, lo único que encontré fue un div vacío que contenía las clases pero sin nada dentro. he subido todos los archivos correctamente y verificado dos veces pero sin éxito. por favor, guíame
Abraham
¡Genial!
Marco Riesco
¡¡Excelente!! gracias
Moustafa
Este script no funciona en la nueva versión de WordPress 4.3.1
omdat bij de oude versie heeft die script wel gewerkt en nu niet meer
Por favor, ayuda…