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

Uno de nuestros lectores nos preguntó recientemente cómo agregamos paginación numérica en la página del blog WPBeginner. Los temas predeterminados de WordPress y muchos otros temas muestran enlaces de paginación agregando publicaciones antiguas y enlaces de publicaciones más recientes en la parte inferior de las páginas de archivo de WordPress. Sin embargo, hay muchos sitios de WordPress que usan paginación numérica, como WPBeginner. Según nuestra experiencia, la paginación numérica es más fácil de usar, atractiva y SEO. Los marcos de temas de WordPress más avanzados, como Genesis, vienen con una funcionalidad incorporada para agregar paginación numérica. En este artículo le mostraremos cómo agregar paginación numérica en su tema de WordPress. El objetivo es reemplazar los enlaces de paginación predeterminados antiguos y nuevos en la parte inferior de las páginas de archivo con números de página fáciles de navegar.


Diferencia entre la navegación predeterminada de WordPress y la paginación numérica

Hay dos métodos para agregar paginación numérica en su tema de WordPress. El primer método es agregar manualmente la paginación numérica sin depender de un complemento de terceros. Dado 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 complemento de terceros existente para agregar paginación numérica. Recomendamos ese método para todos nuestros usuarios de bricolaje.

Agregar manualmente la 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 el desarrollo de temas o que desean hacerlo sin depender de un complemento de terceros. Comencemos agregando el siguiente código en el archivo functions.php de su tema.

Nota: Este código se deriva de Genesis Framework que usamos en nuestro sitio. Si está utilizando Genesis, entonces no necesita este código o el complemento.

función wpbeginner_numeric_posts_nav () {

if (is_singular ())
regreso;

global $ wp_query;

/ ** Detener la ejecución si solo hay 1 página * /
if ($ wp_query->max_num_pages <= 1)
regreso;

$ paged = get_query_var (‘paged’)? absint (get_query_var (‘paginado’)): 1;
$ max = intval ($ wp_query->max_num_pages);

/ ** Agregar página actual a la matriz * /
si ($ paginado >= 1)
$ enlaces [] = $ paginado;

/ ** Agregar las páginas alrededor de la página actual a la matriz * /
si ($ paginado >= 3) {
$ enlaces [] = $ paginado – 1;
$ enlaces [] = $ paginado – 2;
}

si (($ paginado + 2) <= $ max) {
$ enlaces [] = $ paginado + 2;
$ enlaces [] = $ paginado + 1;
}

eco ‘

    ‘ . "\norte";

    / ** Enlace de publicación anterior * /
    if (get_previous_posts_link ())
    printf (‘

  • % s
  • ‘ . "\norte", get_previous_posts_link ());

    / ** Enlace a la primera página, más puntos suspensivos si es necesario * /
    if (! in_array (1, $ enlaces)) {
    $ clase = 1 == $ paginado? ‘clase ="activo"’:’ ‘;

    printf (‘% s

    ‘ . "\norte", $ class, esc_url (get_pagenum_link (1)), ‘1’);

    if (! in_array (2, $ enlaces))
    eco ‘

  • ‘;
    }

    / ** Enlace a la página actual, más 2 páginas en cualquier dirección si es necesario * /
    ordenar ($ enlaces);
    foreach ((array) $ enlaces como $ enlace) {
    $ clase = $ paginado == $ enlace? ‘clase ="activo"’:’ ‘;
    printf (‘% s

    ‘ . "\norte", $ class, esc_url (get_pagenum_link ($ link)), $ link);
    }

    / ** Enlace a la última página, más puntos suspensivos si es necesario * /
    if (! in_array ($ max, $ links)) {
    if (! in_array ($ max – 1, $ enlaces))
    eco ‘

  • ‘ . "\norte";

    $ clase = $ paginado == $ max? ‘clase ="activo"’:’ ‘;
    printf (‘% s

    ‘ . "\norte", $ class, esc_url (get_pagenum_link ($ max)), $ max);
    }

    / ** Siguiente enlace de publicación * /
    if (get_next_posts_link ())
    printf (‘

  • % s
  • ‘ . "\norte", get_next_posts_link ());

    eco ‘

‘ . "\norte";

}

En WPBeginner, utilizamos 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 categoría de tutoriales de WordPress). Lo que hace este código es que recupera el número de páginas y prepara una lista con viñetas de enlaces numerados. Para agregar esto en sus plantillas, deberá agregar la siguiente etiqueta de plantilla en index.php, archive.php, category.php y cualquier otra plantilla de página de archivo de su tema..

<?php wpbeginner_numeric_posts_nav (); ?>

Ahora que tenemos nuestra lista de páginas numeradas, necesitamos diseñar esta lista. Queremos hacer que la lista aparezca bloque en línea donde la página activa se resalta con un color de fondo diferente. Para lograr eso, sigamos adelante y agreguemos lo siguiente en el archivo style.css de su tema:

.navegación li a,
.navegación li a: hover,
.navegación li.active a,
.navegación li.disabled {
color: #fff;
decoración de texto: ninguno;
}

.navegación li {
pantalla: en línea;
}

.navegación li a,
.navegación li a: hover,
.navegación li.active a,
.navegación li.disabled {
color de fondo: # 6FB7E9;
radio de borde: 3px;
cursor: puntero;
acolchado: 12px;
acolchado: 0,75rem;
}

.navegación li a: hover,
.navegación li.active a {
color de fondo: # 3C8DC5;
}

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

Agregar manualmente la paginación numérica a los temas de WordPress sin un complemento

Agregar paginación numérica en WordPress usando WP-PageNavi

Ahora echemos un vistazo a cómo agregar paginación numérica en su tema de WordPress utilizando 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.

Configurar ajustes de WP-PageNavi

En la página de configuración del complemento, puede reemplazar la configuración predeterminada de texto y paginación numérica con la suya 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 su carpeta de temas y busque las líneas para la paginación más antigua y más reciente 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 etiquetas anteriores previous_posts_link y next_posts_link.

<?php wp_pagenavi (); ?>

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

Vista predeterminada de la paginación numérica de wp-pagenavi

Si desea cambiar la apariencia de los colores y el estilo de la paginación numérica en wp-pagenavi, deberá ir a Configuración »PageNavi. Desmarque la opción para usar Use pagenavi-css.css y guardar los cambios. Ahora ve a Complementos »Editor. Desde el menú desplegable Seleccionar complemento para editar, seleccione WP-PageNavi y haga clic en el botón Seleccionar. El editor cargará los archivos de complemento en la barra lateral derecha. Haga clic en pagenavi-css.css para abrirlo en el editor y luego copie el contenido del archivo.

Copie el contenido del archivo pagenavi-css

A continuación, debes ir a Apariencia »Editor y pegue el contenido de pagenavi-css.css en el archivo style.css de su tema. Ahora puede modificar el esquema de color y el estilo desde aquí. La razón por la que copiamos el contenido de css del complemento a la hoja de estilo del tema es para evitar la pérdida de cambios de estilo si actualiza el complemento. Aquí hay una versión ligeramente modificada de la paginación numérica, siéntase libre de usarla y modificarla en su tema.

.wp-pagenavi {
Limpia los dos;
}

.wp-pagenavi a, .wp-pagenavi span {
color: #FFF;
decoración de texto: ninguno;
color de fondo: # 6FB7E9;
borde: 1px sólido # B2D1E5;
acolchado: 5px 5px;
margen: 2px;
}

.wp-pagenavi a: hover, .wp-pagenavi span.current {
color del borde: # E9F2F9;
color de fondo: # 6FB7E9;
}

.wp-pagenavi span.current {
peso de fuente: negrita;
color de fondo: # 3C8DC5;
}

Así es como se vería:

CSS personalizado de PageNavi

Como siempre, debes experimentar con CSS. El objetivo debe ser hacer coincidir la paginación numérica con la apariencia de los colores de su sitio web, de modo que se mezcle bien y no se vea como un elemento colocado de manera extraña..

Esperamos que este artículo te haya ayudado a agregar y mostrar paginación numérica en tu tema de WordPress. ¿Qué método prefieres usar? ¿Te gusta la paginación numérica o prefieres la navegación anterior / siguiente incorporada? Háganos saber en los comentarios a continuación.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map