Es un aspecto importante en el diseño de nuestro blog, mostrar enlaces que nos lleven a cierta parte del contenido, justamente para ello existen la paginación de posts, muy usado en la blogosfera. Nuestro WordPress por defecto trae los enlaces Anterior y Siguiente, pero si deseamos colocar el número de paginas debemos hacer algo extra. Veamos.
Lo primero que debemos hacer es descargar el plugin WP-PageNavi, luego descomprimimos y copiamos-pegamos los siguientes archivos al directorio de nuestro tema:
- wp-pagenavi.php
- pagenavi-css.css
Ahora debemos editaremos algunos archivos del tema donde queremos mostrar la paginación (index.php, categories.php or search.php) y ubiquemos el siguiente código:
<div class="navigation">
<div class="alignleft"><?php next_posts_link('Previous entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next entries') ?></div>
</div>
Y remplacemoslo por este otro:
<?php
include('wp-pagenavi.php');
if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
?>
Guarda y actualiza tu blog, y no podrás notar cambio alguno 🙂
¿Qué paso? Como ves no estamos usado este plugin como tal, sino que usamos su código para hacer uso de sus funciones. Así que debemos modificar el archivo wp-pagenavi.php. Ubiquemos la función llamada wp_pagenavi(), y hagamos lo siguiente:
Vamos a llamar a una función que inicia todo el proceso:
pagenavi_init(); //llama a la funcion pagenavi_init()
Esa línea lo vamos a ubicar justo después de iniciarse la función wp_pagenavi, así:
function wp_pagenavi($before = '', $after = '') {
global $wpdb, $wp_query;
pagenavi_init(); //llama a la funcion pagenavi_init()
Ahora sí! actualiza tu blog y notarás este formato de paginación: Page 1 de 2 <<1,2>>
Sin embargo falta aplicarle algo de estilo visual. Puedes ayudarte del archivo de estilos que acompaña al plugin: pagenavi-css.css.
Simplemente tenemos que agregarlo en la cabecera de nuestro tema. Dentro de las etiquetas HTML <head></head>:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/pagenavi-css.css" type="text/css" media="screen" />
Ahora si este estilo no te convence puedes usar otro, anteriormente hablamos de uno (Enlaces de páginas con estilo CSS) quizás te pueda servir.
Tip probado desde CatsWhoCode