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