Recientemente, uno de nuestros lectores nos preguntó cómo agregar paginación digital en la página del blog de MundoCMS. Los temas predeterminados de WordPress y muchos otros temas muestran enlaces de paginación al agregar enlaces de Publicaciones más antiguas y Publicaciones más nuevas en la parte inferior de las páginas de archivo de WordPress. Sin embargo, hay muchos sitios de WordPress que utilizan la paginación digital, como MundoCMS. En nuestra experiencia, la paginación digital es más fácil de usar, atractiva y compatible con SEO. Los marcos temáticos de WordPress más avanzados, como Genesis, vienen con una función incorporada para agregar paginación digital. En este artículo, le mostraremos cómo agregar paginación digital en su tema de WordPress. El objetivo es reemplazar los enlaces de paginación predeterminados más antiguos y más nuevos en la parte inferior de las páginas de archivo con números de página fáciles de navegar.

Hay dos métodos para agregar paginación digital en su tema de WordPress. El primer método es agregar manualmente la paginación digital sin recurrir a un complemento de terceros. Dado que este artículo se encuentra 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 utilizar un complemento de terceros existente para agregar paginación digital. Recomendamos este método a todos nuestros usuarios de bricolaje.
Agregar manualmente paginación digital en sus temas de WordPress
Primero le mostraremos cómo agregar manualmente la paginación digital en sus temas de WordPress. Esto beneficiará a nuestros usuarios avanzados y a los usuarios que están aprendiendo sobre el desarrollo de temas o que desean hacerlo sin recurrir a un complemento de terceros. Comencemos agregando el siguiente código al archivo functions.php de su tema. Nota: Este código se deriva de Genesis Framework que usamos en nuestro sitio. Si está utilizando Genesis, no necesita este código ni el complemento. function wpbeginner_numeric_posts_nav () {if (is_singular ()) return; global $ wp_query; / ** Detener la ejecución si solo hay una página * / 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); / ** Agregar la página actual a la matriz * / if ($ paged> = 1) $ links[] = $ paginado; / ** Agrega las páginas alrededor de la página actual a la tabla * / if ($ paged> = 3) {$ links[] = $ paginado – 1; $ enlaces[] = $ paginado – 2; } if (($ paginado + 2) <= $ max) {$ enlaces[] = $ paginado + 2; $ enlaces[] = $ paginado + 1; } eco '
«. » no»; } En MundoCMS, usamos este mismo código para la paginación digital en nuestras páginas de archivo (por ejemplo, nuestro blog o la página de categoría de tutoriales de WordPress). Lo que hace este código es obtener el recuento de páginas y preparar una lista con viñetas de enlaces numerados. Para agregarlo a sus plantillas, deberá agregar la siguiente etiqueta de plantilla en su tema index.php, archive.php, category.php y cualquier otra plantilla de página de archivo.
Ahora que tenemos nuestra lista de páginas numeradas, necesitamos darle estilo a esta lista. Queremos que la lista aparezca en un bloque en línea donde la página activa está resaltada con un color de fondo diferente. Para hacer esto, agreguemos lo siguiente al archivo style.css de su tema: .navigation li a, .navigation li a: hover, .navigation li.active a, .navigation li.disabled {color: #fff; decoración de texto: ninguna; }. navigation li {display: online; } .navigation li a, .navigation li a: hover, .navigation li.active a, .navigation li.disabled {color de fondo: # 6FB7E9; radio del borde: 3px; cursor: puntero; relleno: 12px; acolchado: 0,75rem; } .navigation li a: hover, .navigation li.active a {background-color: # 3C8DC5; } Listo. Tenemos una lista de paginación digital en nuestro tema que se ve muy bien.
Agregar paginación digital en WordPress usando WP-PageNavi
Ahora veamos cómo agregar paginación digital en su tema de WordPress usando un complemento existente llamado WP-PageNavi. Lo primero que debe hacer es instalar y activar el complemento WP-PageNavi. Después de activar el complemento, vaya a Configuración »PageNavi para configurar los ajustes del complemento.
En la página de configuración del complemento, puede reemplazar el texto predeterminado y la configuración de paginación numérica con la suya propia si lo desea. Sin embargo, la configuración predeterminada debería funcionar para la mayoría de los sitios web. En el siguiente paso, debe agregar una etiqueta de plantilla en su tema de WordPress. Vaya a la carpeta de su tema y busque las líneas de paginación más antiguas y más nuevas en las plantillas de su página de archivo: index.php, archive.php y cualquier otro archivo de plantilla de archivo. Agregue la siguiente etiqueta de plantilla para reemplazar las antiguas etiquetas previous_posts_link y next_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 la apariencia de los colores y el estilo de la paginación digital en wp-pagenavi, debe ir a Configuración »PageNavi. Desmarque la opción para usar Use pagenavi-css.css y guarde los cambios. Ahora ve a Complementos »Editor. En el menú desplegable Seleccione el complemento para modificar, seleccione WP-PageNavi y haga clic en el botón Seleccionar. El editor cargará los archivos del complemento en la barra lateral derecha. Haga clic en pagenavi-css.css para abrirlo en el editor y luego copie el contenido del archivo.
Entonces tienes que ir a Apariencia »Editor y pegue el contenido de pagenavi-css.css en el archivo style.css de su tema. Ahora puede cambiar la combinación de colores y el estilo desde aquí. La razón por la que copiamos el contenido del CSS del complemento en la hoja de estilo del tema es para evitar perder cambios de estilo si actualiza el complemento. Aquí hay una versión ligeramente modificada de la paginación digital, siéntase libre de usarla y modificarla en su tema. .wp-pagenavi {eliminar: ambos; } .wp-pagenavi a, .wp-pagenavi span {color: #FFF; decoración de texto: ninguna; color de fondo: # 6FB7E9; borde: 1px sólido # B2D1E5; relleno: 5px 5px; margen: 2px; } .wp-pagenavi to: hover, .wp-pagenavi span.current {border-color: # E9F2F9; color de fondo: # 6FB7E9; } .wp-pagenavi span.current {font-weight: bold; color de fondo: # 3C8DC5; } Así es como se vería:
Como siempre, deberías experimentar con CSS. El objetivo debe ser hacer coincidir la paginación digital con la apariencia y la sensación de color de su sitio web, para que se ajuste perfectamente y no se vea como un elemento colocado de manera extraña. Esperamos que este artículo le haya ayudado a agregar y mostrar la paginación digital en su tema de WordPress. ¿Qué método prefieres utilizar? ¿Le gusta la paginación digital o prefiere la navegación anterior / siguiente incorporada? Háganos saber en los comentarios a continuación.