Cómo agregar paginación numérica en su tema de WordPress

Uno de nuestros lectores nos preguntó recientemente cómo añadimos la paginación numérica en la página del blog de AprenderWP. Los temas predeterminados de WordPress y muchos otros temas muestran enlaces de paginación añadiendo enlaces de Mensajes Antiguos y Nuevos en la parte inferior de las páginas de su archivo de WordPress. Sin embargo, hay muchos sitios de WordPress que usan paginación numérica, como AprenderWP. Desde nuestra experiencia, la paginación numérica es más fácil de usar, atractiva y fácil de indexar. La mayoría de los marcos temáticos avanzados de WordPress como Genesis vienen con una funcionalidad incorporada para añadir paginación numérica. En este artículo le mostraremos cómo añadir paginación numérica en su tema de WordPress. El objetivo es reemplazar los enlaces de paginación predeterminados Anterior y Nuevo en la parte inferior de las páginas de archivo por números de página fáciles de navegar.

Hay dos métodos para agregar paginación numérica en su tema de WordPress. El primer método es añadir manualmente la paginación numérica sin depender de un plugin de terceros. Ya que este artículo está en la categoría de temas y está destinado a nuevos diseñadores de temas, primero mostraremos el método manual. El segundo método es usar un plugin de terceros existente para agregar paginación numérica. Recomendamos este método para todos nuestros usuarios de bricolaje.

Agregar manualmente paginación numérica en sus temas de WordPress

Primero le mostraremos cómo agregar manualmente la paginación numérica en sus temas de WordPress. Esto beneficiará a nuestros usuarios avanzados y a los usuarios que están aprendiendo a desarrollar temas, o que desean hacerlo sin depender de un plugin de terceros. Empecemos por añadir el siguiente código en el archivo functions.php de tu tema.

Nota: Este código se deriva de Genesis Framework que utilizamos en nuestro sitio. Si estás usando Genesis, entonces no necesitas este código o el plugin.

123456789101112131414151616171819202122232425252627282930313233343536373839404142434445445464748495051525354555656575859606162636465666768functionAprenderWP_numeric_posts_nav() { if( is_singular() ) return; global$wp_query; /** Detener la ejecución si sólo hay 1 página */ if( $wp_query->max_num_pages max_num_pages ); /** Añadir página actual a la matriz */ if( $paged>= 1) $links[] = $paged; /** Añadir las páginas alrededor de la página actual al array */ if( $paged>= 3) { $links[] = $paged- 1; $links[] = $paged- 2; } if( ( $paged+ 2) <= $max) { $links[] = $paged+ 2; $links[] = $paged+ 1; } echo'.

'. ""Enlace a la primera página, más elipses si es necesario */ if( ! in_array( 1, $links) ) { $clase= 1 == $pagina? printf('

'. ""$class, esc_url( get_pagenum_link( 1), '1'); if( ! in_array( 2, $links) ) echo')

'; } /** Enlace a la página actual, más 2 páginas en cualquier dirección si es necesario */ sort( $links); foreach( (array) $linksas$link) { $clase= $pagina== $link? printf('

'. ""$class, esc_url( get_pagenum_link( $link) ), $link); } /** Enlace a la última página, más elipses si es necesario */ if(! in_array( $max, $links) ) if(! in_array( $max- 1, $links) ) echo'

'. ""$clase= $página== $max? printf('

'. ""$class, esc_url( get_pagenum_link( $max) ), $max); } /** DIFUNDE LA PALABRA-

'. ""get_next_posts_link() ); echo'

'. ""; }

En AprenderWP, usamos este mismo código para la paginación numérica en nuestras páginas de archivo (por ejemplo, nuestro blog o la página de la categoría de tutoriales de WordPress). Lo que hace este código es recuperar el número de páginas y preparar una lista con viñetas de enlaces numerados. Para añadir esto en sus plantillas, tendrá que añadir la siguiente etiqueta de plantilla en los archivos index.php, archive.php, category.php y en cualquier otra plantilla de página de archivo.

Ahora que tenemos nuestra lista de páginas numeradas, necesitamos cambiar el estilo de esta lista. Queremos que la lista aparezca en el bloque en línea donde la página activa está resaltada con un color de fondo diferente. Para lograrlo, agreguemos lo siguiente en el archivo style.css de tu tema:

123456789101112131414151617181819202122232425262627.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 { color de fondo: #6FB7E9; radio de la frontera: 3px; cursor: puntero; relleno: 12px; acolchado: 0.75rem;} .navigation li a:hover,.navigation li.active a { color de fondo: #3C8DC5;}

Ahí lo tienes. Tenemos una lista de paginación numérica en nuestro tema que se ve muy bien.

Añadir paginación numérica en WordPress usando WP-PageNavi

Ahora echemos un vistazo a cómo añadir paginación numérica en su tema de WordPress usando un plugin existente llamado WP-PageNavi. Lo primero que tienes que hacer es instalar y activar el plugin WP-PageNavi. Después de activar el plugin, vaya a Settings " PageNavi para configurar los ajustes del plugin.

En la página de configuración del plugin puedes reemplazar el texto por defecto y la configuración de paginación numérica por la tuya propia si lo deseas. Sin embargo, la configuración predeterminada debería funcionar para la mayoría de los sitios web.

En el siguiente paso, necesita agregar una etiqueta de plantilla en su Tema de WordPress. Vaya a la carpeta de temas y busque las líneas para la paginación más antigua y más reciente en las plantillas de páginas de archivo: index.php, archive.php y cualquier otro archivo de plantillas de archivo. Añada la siguiente etiqueta de plantilla para reemplazar las antiguas etiquetas anterior_posts_link y siguiente_posts_link.

Una vez que haya agregado el fragmento wp_pagenavi, así es como se vería la paginación numérica:

Si desea cambiar el aspecto de los colores y el estilo de la paginación numérica en wp-pagenavi, deberá ir a Configuración " PageNavi . Desactive la opción Usar pagenavi-css.css y guarde los cambios. Ahora ve a Plugins " Editor . Desde Seleccione el plugin para editar , seleccione WP-PageNavi y haga clic en el botón Seleccionar . El editor cargará los archivos de los plugins en la barra lateral derecha. Haga clic en pagenavi-css.css para abrirlo en el editor y luego copiar el contenido del archivo.

A continuación, debe ir a Apariencia " Editor y pegar el contenido de pagenavi-css.css en el archivo style.css de su tema. Ahora puede modificar la combinación de colores y el estilo desde aquí. La razón por la que copiamos el contenido del css del plugin a la hoja de estilo del tema es para prevenir la pérdida de cambios de estilo si se actualiza el plugin. Aquí hay una versión ligeramente modificada de la paginación numérica, siéntase libre de usarla y modificarla en su tema.

123456789101112131414151617181819202122.wp-pagenavi { claro: ambos;} .wp-pagenavi a, .wp-pagenavi span { color: #FFF; texto-decoración: ninguno; color de fondo:#6FB7E9; borde: 1pxsólido#B2D1E5; acolchado: 5px5px; margen: 2px;} .wp-pagenavi a:hover, .wp-pagenavi span.current { border-color: #E9F2F9; color de fondo:#6FB7E9;}.wp-pagenavi span.current { peso de fuente: negrita; color de fondo:#3C8DC5;}

Así es como se vería:

Como siempre, debería experimentar con CSS. El objetivo debería ser hacer coincidir la paginación numérica con el aspecto de los colores de su sitio web, para que se integre bien y no parezca un elemento extrañamente colocado.

Esperamos que este artículo le haya ayudado a añadir y mostrar la paginación numérica en su tema de WordPress. ¿Qué método prefiere utilizar? ¿Le gusta la paginación numérica o prefiere la navegación incorporada anterior/siguiente? Háganoslo saber en los comentarios de abajo.

Deja una respuesta Cancelar la respuesta