La paginación es una característica común en muchos blogs de WordPress . De hecho, es importante para tantos propietarios de sitios que es una característica importante en el núcleo de WordPress. La paginación es una práctica fácil y estándar que evita que tengas que cargar todas tus publicaciones a la vez. Si lo hiciera, su sitio tardaría mucho tiempo en renderizarse. Muchos temas ya tienen paginación incorporada. Pero si no la tienen, puede personalizar fácilmente la paginación en su sitio con solo unas pocas líneas de código. En este artículo, repasaremos algunas formas diferentes de abordar la paginación en su sitio.
La paginación en realidad está integrada directamente en WordPress. Para configurar todo, primero deberá visitar el administrador de WordPress. Desde allí, puede visitar Configuración -> Lectura . Aquí es donde puede configurar el formato básico de sus publicaciones. La opción «Visualizaciones de la página principal», por ejemplo, se puede configurar como Tus últimas publicaciones (el valor predeterminado) o como una página estática y una página de publicaciones. En ambos casos, se requerirá paginación en la página que enumera sus publicaciones.
Configuración de lectura en el administrador de WordPress
La configuración importante a la que se debe prestar atención es que las páginas de blog se muestren como máximo . Aquí puede agregar cualquier número entero para especificar cuántas publicaciones deben mostrarse en cada página. Una vez que se agrega la paginación a su página, cualquier publicación por encima de este número se mostrará en una página posterior.
Lo más probable es que desee dejar ambas opciones en su valor predeterminado. Pero si alguna vez desea editar rápidamente la cantidad de publicaciones que se muestran en cada página, o dónde se enumeran las publicaciones de su blog, puede hacerlo en esta sección del administrador.
Configuración de paginación con temas elegantes
La buena noticia es que, si está utilizando un tema de Elegant themes, entonces básicamente está todo listo. En las páginas donde se enumeran las publicaciones, ya sea en la página de inicio o en una página de blog separada, se incorporará la paginación. Verá en la parte inferior de la página de su primera publicación un enlace para visitar «Entradas anteriores» y «Entradas siguientes». Esto permite a los usuarios navegar de un lado a otro a través de su archivo de publicaciones.
Navegación básica en Divi
Si desea una navegación más compleja utilizando un tema de Elegant Themes, todo lo que tiene que hacer es instalar el complemento WP-PageNavi . WP-PageNavi es un complemento de paginación extremadamente popular, del que hablaremos un poco más adelante. Puede transformar los enlaces de paginación anteriores y siguientes estándar con una interfaz más intuitiva, enumerando los números de página y permitiendo a los usuarios saltar algunas páginas a la vez.
Los temas de Elegant Themes son totalmente compatibles con WP-PageNavi, por lo que después de instalar y activar el complemento, esta nueva forma de paginación aparecerá automáticamente. El tema ya tiene las funciones y los estilos adecuados para que esto funcione para usted.
Paginación Divi después de activar WP-PageNavi
Además, si estás usando el tema Divi, recuerda que cuentas con el módulo “Blog” , que te permite insertar una serie de publicaciones en cualquier página de tu sitio. Este módulo también tiene paginación incorporada, con soporte similar para WP-PageNavi.
Adición manual de paginación
Si está creando su propio tema o desea agregar paginación a su tema, puede hacerlo utilizando las funciones integradas de WordPress y unas pocas líneas de código. En realidad, hay dos métodos diferentes para insertar paginación. Ya sea con un enlace de «Publicaciones anteriores» y «Publicaciones siguientes» adjunto en la parte inferior de la página o una barra de paginación completa con números de página («Anterior 1 … 3 4 5 6 7 … 9 Siguiente»). Repasaremos cada uno.
Agregar enlaces de publicación anterior y siguiente
Si desea agregar soporte para paginación a su tema, entonces la mayor parte del código aquí debe colocarse en el archivo functions.php de su tema o tema secundario. Si está utilizando un tema premium, le recomiendo configurar un tema secundario con funcionalidad personalizada.
Para agregar paginación a un tema de WordPress, necesitamos crear una función que genere enlaces de publicaciones anteriores y siguientes en la parte inferior de la página, luego agregar eso a nuestra página de plantilla. Esto es similar a los enlaces «Entradas más antiguas» y «Entradas más nuevas» que vimos anteriormente.
Como esto
Sin embargo, también debemos asegurarnos de que estos enlaces solo se muestren cuando realmente haya publicaciones a las que enlazar. Por ejemplo, no necesitamos un enlace de «Entradas más recientes» en nuestra primera página, o «Entradas más antiguas» en la última. El primer paso es crear realmente la función. Puede hacerlo abriendo su archivo functions.php , desplazándose hasta la parte inferior y agregando este código:
|
01
02
03
04
05
06
07
08
09
10
|
function pagination_nav() { global $wp_query; if ( $wp_query->max_num_pages > 1 ) { ?> <nav class="pagination" role="navigation"> <div class="nav-previous"><?php next_posts_link( '← Older posts' ); ?></div> <div class="nav-next"><?php previous_posts_link( 'Newer posts →' ); ?></div> </nav><?php }} |
Cuando se agrega a una plantilla, esta función generará un enlace anterior y siguiente, envuelto en una etiqueta de navegación HTML5. La primera parte de la función verifica para asegurarse de que realmente haya más de una página de publicaciones. Si no, este código no será necesario.
A continuación, en realidad estructura el marcado HTML. Comenzamos con una etiqueta de navegación básica y luego usamos las funciones next_posts_link y previous_posts_link dentro de las etiquetas div. Ambas funciones aceptan HTML como su primer argumento, que puede usar para personalizar el texto de salida real. Incluimos un poco de HTML y una flecha de HTML en cada uno (<- Publicaciones más recientes) para que podamos diseñar esto más tarde usando CSS.
Una vez que haya agregado esta función, simplemente necesita agregarla a su plantilla real. Para hacerlo, vaya a la plantilla donde desea agregar paginación, generalmente su archivo index.php, y desplácese hacia abajo hasta justo antes del final del ciclo. Esto es después de la declaración «endwhile» pero antes de cualquier declaración «else» dentro del bucle . Luego, agregue esta sola línea:
|
01
|
<?php pagination_nav(); ?> |
Esto generará los enlaces a su página debajo de su contenido y solo mostrará los enlaces cuando sean aplicables.
Adición de paginación de número de página
Si desea algo un poco más avanzado, entonces solo enlaces a publicaciones de blog más antiguas y más nuevas, también puede usar WordPress para generar una lista de números de página, con un enlace anterior y siguiente en cada lado.
Navegación por número de página
Configurar esto es en realidad muy similar a cómo configuramos la paginación básica, pero vamos a usar la función paginate_links de WordPress en lugar de los enlaces de publicaciones anteriores y siguientes. Esto generará una barra de paginación completa donde sea que la coloques en tus plantillas. Una vez más, el primer bit de código se colocará en el archivo functions.php de nuestro tema o tema secundario. Usaremos enlaces de paginación para calcular cuántas páginas tenemos y mostraremos una lista de enlaces apropiadamente.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
|
function pagination_bar() { global $wp_query; $total_pages = $wp_query->max_num_pages; if ($total_pages > 1){ $current_page = max(1, get_query_var('paged')); echo paginate_links(array( 'base' => get_pagenum_link(1) . '%_%', 'format' => '/page/%#%', 'current' => $current_page, 'total' => $total_pages, )); }} |
Nuevamente, agregamos un objeto global $wp_query para que podamos acceder a todas nuestras publicaciones. A continuación, determinamos cuántas páginas existen en nuestra página usando la función max_num_pages y realizamos una verificación condicional para asegurarnos de que haya más de 1 página, lo que hace necesaria la paginación. De lo contrario, no se mostrará nada. Por último, usamos get_query_var para averiguar en qué página nos encontramos actualmente.
El último paso es usar la función paginate_links para mostrar nuestra lista de páginas, así como un botón anterior y siguiente. Para el parámetro «base», pasamos nuestra página inicial. El parámetro «formato» es donde podemos especificar cómo queremos que cambie la URL cuando se acceda a las páginas posteriores. En el ejemplo anterior, las páginas se representarán como http://site.com/page/2 , etc. Lo último que hacemos es usar las variables que recopilamos para definir en qué página nos encontramos actualmente y cuántas páginas hay. total. Usando estos datos, WordPress puede representarnos una barra de paginación estándar.
Para agregar esta paginación, vaya a la página en la que también desea agregar la funcionalidad (generalmente index.php) y pegue el siguiente código justo antes del final de nuestro bucle, después de la declaración «endif», pero antes de «endwhile».
|
01
02
03
|
<nav class="pagination"><?php pagination_bar(); ?></nav> |
En lugar de enlaces anteriores y siguientes simples, ahora verá una lista completa de páginas enlazadas, como en la imagen de arriba.
Si está buscando una paginación un poco más personalizada, o no desea implementarla manualmente, existen algunos complementos que pueden ayudar. Quizás el más popular es WP-PageNavi porque es fácil de configurar, fácil de personalizar y fácil de diseñar. Como mencioné antes, los temas de Elegant Themes ya están configurados para comenzar a usar WP-PageNavi automáticamente, con funciones PHP integradas y estilos CSS, por lo que todo lo que tiene que hacer es activar el complemento.
Pero si está configurando el complemento en su propio tema, debe agregar una sola función en lugar de su paginación típica.
|
01
|
<?php wp_pagenavi(); ?> |
Luego, puede usar la página de Configuración del complemento para personalizar cada aspecto de la paginación. Elija qué texto mostrar para los enlaces siguientes y anteriores, cuándo mostrar la paginación y el formato de cada sección de paginación. WP-PageNavi tomará esta configuración y generará una navegación de página completa en la parte inferior de sus páginas, que les indica a los usuarios cuántas páginas hay en total, en qué página se encuentran actualmente, así como enlaces para las páginas siguiente, anterior, primera y última. . El complemento viene incluido con estilos predeterminados, pero puede eliminarlo en el administrador si desea diseñarlo usted mismo.
WP-Paginar
WP Paginate es bastante similar a WP-PageNavi, pero tiene algunas características adicionales que pueden resultarle útiles. Por ejemplo, puede controlar el marcado en el que se envuelve su paginación, si desea personalizar más tarde usando CSS, así como elegir la cantidad exacta de números de página para mostrar en su paginación, para que no se vuelva demasiado difícil de manejar. Al igual que WP-PageNavi, los números de página se agregan a su página usando una sola función, reemplazando su paginación existente.
Personalización de WP-Paginate
|
01
02
03
|
<?php if(function_exists('wp_paginate_comments')) { wp_paginate_comments();} ?> |
Se generará una lista de páginas con estilo completo en su tema, que puede personalizar usando la configuración del complemento. WP-Paginate funciona muy bien si está buscando una solución completamente simple que no se atasque con demasiadas opciones y que simplemente funcione automáticamente.
Si está buscando una alternativa a la paginación, puede probar WP Smart Navigation. Su salida es similar a WP Page-Navi, pero también cuenta con un enlace simple «Saltar a» al final de la paginación para que los usuarios puedan saltar a cualquier página ingresándola en un cuadro de texto. Para usarlo, puede reemplazar cualquier paginación existente con:
|
01
|
<?php echo do_shortcode('[wpsp]'); ?> |
No presenta tantas oportunidades de personalización como WP Page-Navi, pero su estilo se hereda principalmente de su tema, por lo que se adapta a casi todas partes. Si está ejecutando un blog con muchas páginas, donde la navegación es muy importante para los usuarios, entonces este complemento puede ser perfecto para usted.
Agregar paginación
Solía ser mucho más difícil agregar una navegación adecuada a WordPress desde el primer momento, pero el soporte ha mejorado mucho en los últimos años. Si todo lo que necesita es una navegación básica para los usuarios al final de una lista de publicaciones, entonces las funciones estándar de WordPress deberían funcionar bien. Pero si su sitio es más complejo y necesita obtener un poco más de su paginación, un complemento puede funcionar mejor para usted y dar cuenta de casos de uso más sólidos. La elección depende de ti.
Imagen en miniatura del artículo de JanPetrskovsky / shutterstock.com