Cómo agregar paginación de números a su tema de WordPress
Uno de nuestros lectores nos preguntó recientemente cómo agregar paginación digital a la página del blog de AprenderWP. El tema predeterminado de WordPress y muchos otros temas muestran enlaces de paginación agregando enlaces de publicaciones antiguas y nuevas en la parte inferior de la página de archivo de WordPress. Sin embargo, hay muchos sitios de WordPress que usan paginación numérica, como WPBeginner. En nuestra experiencia, la paginación digital es más fácil de usar, atractiva y compatible con SEO. Los marcos de temas de WordPress de última generación como Génesis vienen con una funcionalidad integrada para agregar paginación digital. En este artículo, le mostraremos cómo agregar paginación digital a su tema de WordPress. El objetivo es reemplazar los enlaces de paginación heredados y nuevos predeterminados en la parte inferior de las páginas de archivo con números de página fáciles de navegar.
Hay dos formas de agregar paginación numérica en un tema de WordPress. El primer método es agregar manualmente la paginación numérica sin depender de complementos de terceros. Dado que este artículo pertenece a la categoría de temas y está dirigido 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 este método a todos los usuarios de bricolaje.
Agregue manualmente paginación numérica a su tema de WordPress
Primero, le mostraremos cómo agregar manualmente paginación numérica en su tema de WordPress. Esto beneficiará a nuestros usuarios avanzados, así como a aquellos que están aprendiendo a desarrollar temas o quieren hacerlo sin depender de complementos de terceros.Comencemos agregando el siguiente código a su tema functions.php documento.
Nota: este código se deriva del marco de Génesis que usamos en nuestro sitio web. Si está utilizando Genesis, no se requiere este código o complemento.
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 ><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 ? ' ' : '';
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 ? ' ' : '';
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 ? ' ' : '';
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";
}
En AprenderWP, usamos el mismo código para la paginación numérica en las páginas de archivo, como nuestro blog o las páginas de categorías de tutoriales de WordPress. Lo que hace este código es recuperar el recuento de páginas y preparar una lista con viñetas de enlaces numerados. Para agregarlo en su plantilla, debe agregar las siguientes etiquetas 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 una lista de páginas numeradas, necesitamos diseñar esta lista. Queremos que la lista se muestre en un bloque en línea con la página activa resaltada con un color de fondo diferente. Para hacer esto, sigamos adelante y agreguemos lo siguiente al archivo style.css de nuestro tema:
.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;
}
lo tienes. Tenemos una lista paginada numerada en nuestro tema que se ve muy bien.
Agregue Paginación Numérica en WordPress con WP-PageNavi
Ahora veamos cómo agregar paginación digital en un 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 Ajustes » PageNavi Configure los ajustes del complemento.
En la página de configuración del complemento, puede reemplazar la configuración predeterminada de paginación de texto y número 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 etiquetas de plantilla a su tema de WordPress. Vaya a la carpeta de su tema y busque las líneas para la paginación antigua y nueva en las plantillas de página de archivo: index.php, archive.php y cualquier otro archivo de plantilla de archivo. Agregue las siguientes etiquetas de plantilla para reemplazar las antiguas etiquetas previous_posts_link y next_posts_link.
<?php wp_pagenavi(); ?>
Después de agregar el fragmento wp_pagenavi, la paginación numérica se verá así:
Si desea cambiar el color y el estilo de la paginación de números en wp-pagenavi, debe ir a Ajustes » PageNaviDesmarque la opción para usar pagenavi-css.css y guarde los cambios.ahora ve Complementos » EditorDesde el menú desplegable Seleccionar complemento para editar, seleccione WP-PageNavi y haga clic en el botón Seleccionar. El editor cargará el archivo del complemento en la barra lateral derecha. Haga clic en pagenavi-css.css para abrirlo en el editor y copie el contenido del archivo.
A continuación, debe ir a Apariencia » Editar Y pegue el contenido de pagenavi-css.css en el archivo style.css del 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 complemento en la hoja de estilo del tema es para evitar perder los cambios de estilo cuando se actualiza el complemento. Esta es una versión ligeramente modificada de la paginación de números, siéntase libre de usarla y modificarla en su 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;
}
Esto es lo que parece:
Como siempre, deberías intentar usar CSS. El objetivo debe ser hacer que la paginación del número coincida con la apariencia de los colores del sitio web para que se mezcle bien y no se vea como un elemento colocado de manera extraña.
Esperamos que este artículo le haya ayudado a agregar y mostrar paginación numérica en su tema de WordPress. ¿Qué método prefieres usar? ¿Prefiere la paginación numérica o prefiere la navegación anterior/siguiente incorporada? Háganos saber en los comentarios a continuación.
Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.
