SummArg | Cursos y recursos para webmasters

12/10/2009

10 Estilos CSS para tu WP-PageNavi

Uno de los plugins más populares para WordPress es el WP-PageNavi de Lesterchan, el cual nos agrega de modo sencillo una barra de navegación paginada, ya que la plataforma por defecto sólo nos permite manejar un “Página anterior” y “Página siguiente”, que es dado por las siguientes líneas de código:

<div>
<div><?php next_posts_link('&laquo; Anterior') ?></div>
<div><?php previous_posts_link('Siguiente &raquo;') ?></div>
</div>

Sin embargo, instalando el mencionado plugin, reemplazamos dicho código por:

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

Y automáticamente accederemos a tener una paginación más completa, que nos permite seleccionar entre diversas cantidades de páginas a mostrar por defecto.

Si ya conocés el plugin lo suficiente, y ahora querés ir más allá añadiéndole estilos diferentes, entonces tenés que crear en tu “theme” el archivo pagenavi-css.css, el cual es automáticamente reconocido. Dentro del mismo, las clases que debemos manejar 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{}

Y para utilizar los CSS de la imagen que acompaña esta breve nota, debemos ir a infectedfx.net y con la Developer Toolbar para Firefox (o la Developer Toolbar para Internet Explorer) buscás la opción CSS > Ver Código CSS para que te abra en una nueva ventana sólo el CSS de la página. Veremos algo así:

Allí veremos el código CSS que debemos pegar en nuestro wp-pagenavi-css.css para lograr cada ejemplo mostrado. Si algún paso te quedó en el tintero para poder aplicar los estilos, visitá el website de infectedfx.net o preguntanos en el foro.

Dejar un comentario

  1. […] the original post here:  10 Estilos css para tu WP-PageNavi Related […]

Dejar un comentario