Los plugins de LesterChan, desde mi muy personal experiencia son usados por la mayoría de los WordPress'eros, sino todos al menos uno de toda la serie de posibilidades que nos ofrecen sus plugins, sin embargo, en este caso nos enfocaremos al plugin WP-PageNavi, ¿qué hace este plugin? para los que no lo hayan usado nunca, nos permite tener una paginación más completa, WordPress nos ofrece solo "Anterior" y "Siguiente" lo cuál no me parece mal pero si puedes ofrecerle al usuario saltar en vez de una página a la vez, quizás 5 o 10.
Con este plugin en especial somos muchos los que a veces tenemos la costumbre de dejarlos "tal cual" me refiero a que dejamos el estilo predeterminado que trae, esto puede ser porque al actualizar el plugin sobreescribe todo lo que le hayamos modificado anteriormente, bien... para eso vamos a ofrecer dos soluciones y algunos estilos que pueden usar donde les parezca mejor, modificarlos o agregar más a la colección son bienvenidos.
Configurando WP-PageNavi en nuestro theme
Antes de cualquier cosa, vamos a hacer funcionar el plugin en nuestro theme, para eso ya deben de haberlo descargado e instalado en su WP.
Donde se recomienda usar la función es en los siguientes archivos:
- index.php
- archive.php
- author.php
- category.php
- search.php
No todos estos archivos vienen en todos los themes, solo es por si en su caso existe.
Ahora abrimos los archivos que tengamos en nuestro theme (mencionados arriba) y justamente abajo de :
<?php endwhile; ?>Ponemos el siguiente código:
-
wp_pagenavi();
-
} else { ?>
-
<div class="navigation">
-
<div class="alignleft">
-
<?php next_posts_link(__('Older Entries','my_theme')); ?>
-
</div>
-
<div class="alignright">
-
<?php previous_posts_link(__('Newer Entries','my_theme')); ?>
-
</div>
-
</div>
-
<?php } ?>
Con esto le estamos diciendo a WordPress que si tenemos instalado WP-PageNavi despliegue la navegación que nos ofrece este plugin, pero si no existe entonces nos mostrará la navegación tradicional de WP, esto es recomendable porque en el momento que uds. decidan no utilizar más ese plugin, desactivarlo para actualizar WP (que sugiere desactivar todo para hacer el upgrade) o incluso si van a compartir el theme y otro usuario no quiere usarlo no tendría que estar modificando el código del theme puesto que ya está condicionado para que funcione perfectamente con o sin el plugin.
Modificando el código del plugin
La primera opción y no tan recomendable pienso yo, es modificar directamente el código del plugin, no es muy recomendable puesto como mencionaba arriba, el plugin al actualizarlo sobreescribirá todo aquello que le hayamos cambiado...
Si abren la carpeta wp-pagenavi encontrarán el archivo pagenavi-css.css, este lo modifican y pueden hacer su propio estilo personalizado de acuerdo a su blog.
Creando nuestro propio estilo
El plugin automáticamente añade un enlace a la CSS llamada pagenavi-css.css, la ventaja que tiene (honestamente no sé desde que versión) es que si nosotros en la carpeta de nuestro theme creamos un archivo llamado de la misma manera tomará ese por default, con eso nos evitamos el tener que estar reemplazando nuestro archivo cada que se actualize el plugin.
Entonces en la carpeta de nuestro theme creamos ó copiamos el archivo pagenavi-css.css que es con el que trabajaremos.
wp-content/my-theme/pagenavi-css.cssSi vemos el código que nos devuelve, nos encontraremos con algo como esto:
-
<div class="wp-pagenavi">
-
<span class="pages">Página 5 de 46</span>
-
<a title="« Primera" class="first" href="#"> « Primera </a>
-
<span class="extend"> ... </span>
-
<a href="#"> « </a>
-
<a title="3" class="page" href="#"> 3 </a>
-
<a title="4" class="page" href="#"> 4 </a>
-
<span class="current"> 5 </span>
-
<a title="6" class="page" href="#"> 6 </a>
-
<a title="7" class="page" href="#"> 7 </a>
-
<a title="8" class="page" href="#"> 8 </a>
-
<a href="#"> » </a> <span class="extend"> ... </span>
-
<a title="Última »" class="last" href="#"> Última » </a>
-
</div>
Las clases que usa el plugin y por lo tanto tenemos que tenerlas muy en cuenta son las siguientes:
-
.wp-pagenavi{}
-
.wp-pagenavi span.pages{}
-
.wp-pagenavi span.current{}
-
.wp-pagenavi span.extend{}
-
.wp-pagenavi a.first{}
-
.wp-pagenavi a.last{}
Ok, después de mi "breve" introducción, aquí tienen una serie de ejemplos que están listos para usarse de la manera que ustedes gusten con tan mencionado plugin. Pueden verlos todos juntos aquí.
Si piensan usar alguno de los estilos copien y peguen el código solamente tienen que eliminar el código #ejemploX.
32 comentarios para 10 estilos de paginación gratis para usar con WP-PageNavi
Gracias ya me di una idea de lo que puedo hacer para mi blog.
Muy buen aporte, muchas gracias, directo a dos Blogs
Muy buen post y muy buen blog. Me has dejado de piedra!
No se como no había encontrado este blog antes…
No te extrañe verme mucho por aquí
viejo perdoname soy nuevo.
cuando decis borrar lo de ejemplo X, si qiero solo el ejemplo 2 borro los demas del archivo pagenavi-css.css y lo copio en el directorio del tema? ?? bueno eso hice, pero no me sale para nada el color ni nada! solo me sale “Página 1 de 1 1
” asi nada de color ni nada!!
debo de pegar los archivos qe vienen en la carpeta donde?? en el direcrtorio de mi tema o del plugin??
otra cosa y la qe me esta dando de todo!! si lo qiero qe despues de 4 entradas me aparesca el plugin donde lo configuro?? en las opciones del plugin porqe ya lo hice y nada de nada!! este es el sitio donde lo estoy trabajando
http://www.fotospararecordar.com/blog/
ayudame siiiiii
Lo que tienes que hacer es copiar el archivo pagenavi-css.css en la carpeta de tu theme, por ejemplo si tienes el theme por “default” lo pones dentro de wp-content/themes/default/.
Después el estilo que quieras dejar si es ejemplo1 por decir, eliminas todos los demás y dejas únicamente el de #ejemplo1 y a este último código que te quede le eliminas eso (#ejemplo1) de tal manera que debe quedarte solamente las clases que contengan:
.wp-pagenavi
.wp-pagenavi span.pages
.wp-pagenavi span.curren
.wp-pagenavi span.extend
.wp-pagenavi a.first
.wp-pagenavi a.last
Si aún tienes problema para instalarlo aquí andaremos.
Estos estilos le han venido a cambiar el rostro a la paginacion. Funcionando correctamente. Gracias bro
Muchas gracias, creo que utilizare un par de estilos, muchas gracias y saludos
Me sirvio bastante tu explicación del plugin y tus consejos!!!; ya los lleve a la práctica y funcionaron al 100%
Saludos!
uuuuuuuu no los pude instalar
es decir… si pude hacer la instalacion pero nunca pude hacer que tomara los estilos… alguien me puede ayudar? hay un par de estilos que me interesan muchisimo… gracias
o estos estilos para el plguin WP-Digg Style Paginator como los podria instalar? Gracias
No están configurados para el WP-Digg Style, aunque no dudo que se pueda, sin embargo es muy sencillo hacer que funcionen.
Checa este comentario Ricardo, haber si te puede servir.
y estos diseños los puedo usar para una pagina web que no sea blog…diganme y como lo puedo hacer
oye podrias dar una explicasion mas espesifica para instalarlo
en verdad me interesa mucho…
Saludos
FrEdDy todo el post explica como instalarlos, pero va de nuevo
1.- Descargas el plugin
2.- Instalar en WordPress y activar
3.- Copiar el archivo que descargas de aquí (pagenavi-css.css) en la carpeta de tu theme
4.- Una vez que hayas elegido el estilo que deseas eliminas todos los demás
5.- Al estilo que te quede, le eliminas lo de #ejemploX
Listo!
Bro están muy buenos los diseños, seguro voy a implementar uno.
Resalto que me gustaron bastante los nº 06, 07, tal vez podrias hacer unos tutos sobre el estilo de diseño que le das.
Saludos y me alegra mucho volver a leer tus entradas =).
Woow beatiful. thank you.
muy buenas aportaciones!!!! las aplicaré en mis blogs
gracias
Muy buen post y muy bien explicado, ya lo he llevado a la práctica y funciona estupendamentes GENIAL!!!
Saludos y muchas gracias
Gracias por el post, y me gustaría agregar unos estilos mas que encontré en la red:
http://mis-algoritmos.com/2007/03/16/some-styles-for-your-pagination
Y las imagenes asociadas de donde las consigo?
excelente, al #3 lo he puesto en uso
gracias por compartir !
saludos !
y donde se ponen las imagenes y el archivo style.css?
no puedo hacer que se ve la foto de ese plugin serça que podés ayudarme. gracias
Buen datos probaremos
Gracias andaba buscando algo como esto.
Wow, Infected-fx definitivamente este post es una obra maestra
Gracias por tan buen material.
wow! anda de 10 esto!! xD, la verdad ke es una gran utilidad el paginador y mas con estos diseños!! gracias! ya hasta guarde todo por si acaso kiero usarlo en demas blogs!
saludos y gracias por todo!
Exelente te felicito un amigo me la va poner ami web
Como puedo configurar el número de post por página??
Este post tiene tanto tiempo y pensar que aun es de tanta ayuda para las personas, en lo personal me agradaba mas el estilo 7 y lo puse pero no logre que quedara igual en el estilo de ùltima pàgina y primera la verdad, asi que me pille el seis que esta muy bueno. Gx de Nuevo por la enseñanza.
Antes de nada felicitarte por el trabajo que es estupendo.
Me he descargado la versión 2.74 de Wp-PageNavi, y la única manera que me haga caso al stilo de paginación es añadiendo el código directamente al Style.css. De otra manera no me lo coje por mucho que copie el wp.pagenavi-css.css al teme (uso un hijo de hybrid 0.8 ) Y aún así cuando entro dentro de una entrada me sale la paginación estandar de Wp aún modificando el
index.php
achive.php
author.php
category.php
search.php
incluso algusnos más como el page-category y page-archives y post.php.
Qué hago mal?
ayuda hago todo lo q dic y no me funciona