¿Cómo integrar paginación en tu tema de WordPress?

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

Dejar un comentario