WordPress muestra una paginación muy básica de las entras en su tema de por defecto, mostrando el anterior y siguiente post. Pero que ocurre si queremos insertar un paginado del tipo 1 | 2 | 3 | etc… podemos recurrir a insertar algún plugin, o de una forma más artesanal crearnos nosotros mismo la función y estilo de la paginación utilizando paginate_links() de WordPress.
Abrimos y insertamos dentro del archivo functions.php de nuestro tema la siguiente función php:
function paginado() {
global $wp_query, $wp_rewrite;
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
$pagination = array(
'base' => @add_query_arg('page','%#%'),
'format' => '',
'total' => $wp_query->max_num_pages,
'current' => $current,
'show_all' => true,
'type' => 'list',
'next_text' => '»',
'prev_text' => '«'
);
if( $wp_rewrite->using_permalinks() )
$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
if( !empty($wp_query->query_vars['s']) )
$pagination['add_args'] = array( 's' => get_query_var( 's' ) );
echo paginate_links( $pagination );
}
Y a continuación en nuestra hoja de estilos añadimos el diseño deseado:
ul.page-numbers {
margin: 20px 0 10px;
width: 100%;
padding: 0;
font-size: 12px;
line-height: normal;
clear: both;
float: left;
}
ul.page-numbers li {
float: left;
}
ul.page-numbers a,
ul.page-numbers span {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: -webkit-gradient(linear, left top, left bottom, from(#E4E3E3), to(#FFFFFF));
background: -moz-linear-gradient(top, #E4E3E3, #FFFFFF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E4E3E3', endColorstr='#FFFFFF');
padding: 3px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #ccc;
color: #666;
}
ul.page-numbers a:hover,
ul.page-numbers span.current {
border: 1px solid #666;
color: #444;
}
Y por último dentro del php de nuestro tema en que queramos mostrar la paginación insertamos la siguiente línea de código:
<?php paginado(); ?>
Agradezco tu comentario 🤘