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 🤘