Si está buscando agregar soporte de paginación a su tema de WordPress con números geniales en lugar de la publicación anterior y siguiente predeterminada, puede hacerlo usando el famoso PageNavi plugin, sin embargo, prefiero agregar paginación manualmente a mis temas para que la gente no tenga que buscar un plugin. También ayuda a mantener el sitio más rápido sin todos los scripts externos y CSS.
Afortunadamente, existe una gran función en wordpress llamada «paginate_links”Que se agregó en WordPress 2.1 y le permitirá crear una navegación de estilo paginada para cualquier consulta en su sitio. Aquí hay un tutorial rápido para agregar una navegación de página simple a su tema que se parece a la paginación en mi Total WordPressTheme.
PHP de paginación
Simplemente agregue el siguiente código al final de su archivo functions.php (o cualquier archivo en su tema donde desee guardarlo).
// Numbered Pagination
if ( !function_exists( 'wpex_pagination' ) ) {
function wpex_pagination() {
$prev_arrow = is_rtl() ? '→' : '←';
$next_arrow = is_rtl() ? '←' : '→';
global $wp_query;
$total = $wp_query->max_num_pages;
$big = 999999999; // need an unlikely integer
if( $total > 1 ) {
if( !$current_page = get_query_var('paged') )
$current_page = 1;
if( get_option('permalink_structure') ) {
$format = 'page/%#%/';
} else {
$format = '&paged=%#%';
}
echo paginate_links(array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => $format,
'current' => max( 1, get_query_var('paged') ),
'total' => $total,
'mid_size' => 3,
'type' => 'list',
'prev_text' => $prev_arrow,
'next_text' => $next_arrow,
) );
}
}
}
CSS de paginación
Copie el siguiente CSS y péguelo en su archivo style.css.
ul.page-numbers {
list-style: none;
margin: 0;
}
.page-numbers:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
ul.page-numbers li {
display: block;
float: left;
margin: 0 4px 4px 0;
text-align: center;
}
.page-numbers a,
.page-numbers span {
line-height: 1.6em;
display: block;
padding: 0 6px;
height: 18px;
line-height: 18px;
font-size: 12px;
text-decoration: none;
font-weight: 400;
cursor: pointer;
border: 1px solid #ddd;
color: #888;
}
.page-numbers a span { padding: 0 }
.page-numbers a:hover,
.page-numbers.current,
.page-numbers.current:hover {
color: #000;
background: #f7f7f7;
text-decoration: none;
}
.page-numbers:hover { text-decoration: none }
Agregar la función de paginación a su tema
Volver a llamar a la función de paginación es realmente simple. Todo lo que tiene que hacer es agregar el siguiente código a los archivos de su tema donde desea mostrar cualquier tipo de paginación. Los más comunes son index.php, home.php, category.php, tags.php, archive.php y search.php. Pero si tiene plantillas de página personalizadas con soporte de paginación, querrá agregarlas aquí.
Reemplace la paginación predeterminada con lo siguiente (normalmente ubicado en algún lugar después de endif):
<?php wpex_pagination(); ?>
Consultas personalizadas?
Si está creando una consulta personalizada usando WP_Query, esta función no funcionará a menos que haya definido su consulta en la variable $ wp_query (lo cual es malo, no lo haga). Para solucionarlo, generalmente creo nuevas consultas como las siguientes:
$wpex_query = new WP_Query( $args );
De esta manera puedo alterar la función de paginación principal para buscar la variable al crear la paginación, ejemplo (editando el primer fragmento):
global $wp_query, $wpex_query;
if ( $wpex_query ) {
$total = $wpex_query->max_num_pages;
} else {
$total = $wp_query->max_num_pages;
}
Actualizar: En este ejemplo, verifico la variable global … Sin embargo, simplemente podría pasar la variable de consulta directamente a la función wpex_pagination, que probablemente sea una mejor opción 😉