Guía de estilo del plugin WP-PageNavi para WordPress

Si no está familiarizado con el plugin WP-PageNavi WordPress, le permite reemplazar la navegación normal anterior/siguiente por una navegación de paginación numerada más avanzada.

En este tutorial, vamos a repasar cómo:

• Instala WP-PageNavi e intégralo correctamente en tu tema.
• Dos métodos para deshabilitar y/o anular los estilos por defecto del plugin.
• Una visión general de la salida de marcado HTML por WP-PageNavi.
• Por último, cómo alterar el aspecto de su página de navegación a través de CSS

Instalar el plugin

Tienes dos opciones a la hora de instalar el plugin WP-PageNavi.

• Descárgalo de WordPress.org, súbelo a tu directorio /wp-content/plugins/ y actívalo (a la antigua usanza).
• Dependiendo de tu host, también puedes instalar plugins automáticamente buscándolos en la página “Añadir nuevo” dentro de Plugins en tu panel de administración de WordPress. Busca “pagenavi” y lo encontrarás.

Vale, eso debería haber sido bastante fácil. Ahora es el momento de ensuciarse un poco las manos en código para la parte de integración.

Integración de temas

En nuestra integración de temas, nunca queremos que se muestre ningún error si WP-PageNavi no está activo. En su lugar, nos aseguraremos de que vuelve al viejo estilo de navegación anterior/siguiente. Para ello, utilizaremos una comprobación condicional function_exists.

Digamos que este es su código normal de navegación anterior/siguiente de WordPress:

<div class="navigation">
	<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

Lo cambiaremos por lo siguiente:

<?php if (function_exists('wp-pagenavi')) { wp_pagenavi(); } else { ?><div class="navigation">
	<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div><?php } ?>

Esto básicamente comprueba si WP-PageNavi está activo y si lo está, muestra el código de navegación de la nueva página. Si no, vuelve a la navegación normal anterior/siguiente.

Nota: Dependiendo de cómo esté codificado tu CSS, puede que quieras poner la parte wp_pagenavi(); dentro del div “navigation” (o equivalente). Tenga en cuenta WP-PageNavi escupe una nueva clase llamada “wp-pagenavi” sin embargo, que podemos utilizar para el estilo por separado.

Anular estilos de plugin

Por defecto, WP-PageNavi inserta automáticamente un archivo CSS llamado pagenavi-css.css desde su directorio de plugins en la cabecera de tu sitio. No queremos que estos estilos por defecto interfieran con nuestros propios estilos personalizados, así que vamos a deshacernos completamente de ellos, y hay dos formas sencillas de hacerlo.

• Añade un fichero CSS al directorio de tu tema – Esta es probablemente la forma más fácil de anular los estilos por defecto de WP-PageNavi. Si tienes un archivo llamado pagenavi-css.css en el directorio de tu tema, WP-PageNavi lo usará en lugar del que viene por defecto en el directorio del plugin.
• Añade un fragmento de código a tu archivo functions. php – El siguiente fragmento de código que hemos tomado de WP Recipes deshabilitará completamente el comportamiento anterior y no incluirá ninguna hoja de estilo del plugin (ni la predeterminada ni la anulada en el directorio de tu tema).

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

Simplemente coloca ese código en el archivo functions. php de tu tema y añade los estilos CSS a la hoja de estilos de tu tema habitual (normalmente style.css).

Nota: Asegúrese de que el código está rodeado de paréntesis como <?php ... ?> si su archivo de funciones está actualmente vacío.

WP-PageNavi Marcado HTML y selectores CSS

Este es el aspecto del marcado WP-PageNavi. En el siguiente ejemplo, hay cuatro páginas, actualmente en la página dos.

<div class="wp-pagenavi">
	<a href="http://example.com/" >Previous</a><a href="http://example.com/" class="page" title="1">1</a>
	<span class="current">2</span>
	<a href="http://example.com/?paged=3" class="page" title="3">3</a>
	<a href="http://example.com/?paged=3" >Next</a></div>
	<span class="extend">...</span>
	<a href="http://example.com/?paged=4" class="last" title="Last &raquo;">Last &raquo;</a>
</div>

Podemos utilizar los siguientes selectores CSS para orientar el marcado HTML anterior:

• .wp-pagenavi – Se aplica a todo el div, útil para claros CSS, padding/margin, tamaños y estilos de fuente (negrita, cursiva, etc.)
• .wp-pagenavi a – Se aplica a todos los enlaces dentro de la navegación de la página, incluyendo números de página y anterior/siguiente.
• .wp-pagenavi a.page – Se dirige específicamente a los números de página.
• .wp-pagenavi a.first – Apunta específicamente al “primer” enlace (no listado arriba)
• .wp-pagenavi a. last – Dirigido específicamente al enlace “last
• . wp-pagenavi span – Apunta al número de página actual junto con la parte extend (la cosa con tres puntos)
• . wp-pagenavi span.current – Se dirige específicamente al número de página actual
• . wp-pagenavi span.extend – Específicamente apunta a la extensión (lo de los tres puntos)
• . wp-pagenavi span.pages – Específicamente para mostrar el número de página (por ejemplo, Página 1 de 4)

Nota: Los enlaces anterior y siguiente por defecto, no tienen ninguna clase CSS en ellos. Si desea que se diferencien completamente de los números de página y de los enlaces primero/último, tendrá que restablecer los estilos añadidos al selector .wp-pagenavi a. Si eso no tiene sentido, eche un vistazo al siguiente ejemplo (realmente simplificado).

Por ejemplo: Supongamos que quiere que los enlaces anterior y siguiente estén en negrita, pero que todos los demás enlaces tengan un peso normal. Tendría que hacer lo siguiente:

.wp-pagenavi a { font-weight: bold; } /* Previous and Next links only */
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last { font-weight: normal; } /* Other links */

He combinado los enlaces con el número de página, el primer enlace y el último enlace en una sola regla a modo de ejemplo. Por supuesto, puedes separarlos y añadir estilos más específicos a cada uno.

Esto sería mucho más fácil si hubiera una clase añadida a los enlaces anteriores/siguientes por defecto, pero no la hay. No es un gran problema, ya que puede restablecerlos de todos modos.

Puede utilizar . wp-pagenavi a .previouspostslink y .wp-pagenavi a.nextpostslink para seleccionar los enlaces anterior y siguiente, respectivamente.

Así que casi todo lo anterior hasta la lista desordenada de selectores ya no es relevante, pero vamos a mantenerlo sólo porque podría ser una lección útil en la anulación de CSS en algunas otras situaciones. El ejemplo de CSS de abajo se seguirá aplicando ya que no usamos esos selectores de todos modos.

Un ejemplo de CSS

He aquí un ejemplo de estilo PageNavi que hemos construido:

Este es el código que utilizamos para conseguir este aspecto, el CSS de varias líneas es opcional:

.wp-pagenavi a, .wp-pagenavi span {
	padding: 5px; margin-right: 10px;
	font-size: 15px; color: #03719c; text-decoration: none;
	border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	background: #03719c;
	color: #fff;
	border: 3px solid #AFAFAF;
	}
.wp-pagenavi span.current { font-weight: bold; }

Y esto es lo que significa:

Primera regla
El .wp-pagenavi a, .wp-pagenavi span selecciona todos los elementos anchor y span (prácticamente todo) dentro del .wp-pagenavi div.

• La primera línea de la regla establece un relleno de 5px para que no se apiñe contra el borde gris claro (definido más abajo). También establece un margen consistente de 10px a la derecha de cada elemento para que haya el mismo espacio entre cada uno.
• La segunda línea establece un tamaño de fuente de 15px, hace que el color del texto sea azul y se asegura de que los enlaces no tengan subrayado.
• La tercera línea establece un borde gris sólido de 3px en todo. El código border-radius redondea las esquinas.

Segunda regla
El .wp-pagenavi a:hover, .wp-pagenavi span. current selecciona el efecto hover del enlace así como el número de página actual, respectivamente.

• La primera línea establece un color de fondo azul oscuro.
• La segunda línea hace que el texto sea blanco.
• La tercera línea da un borde ligeramente más oscuro.

Tercera regla
Esta regla selecciona el número de la página actual (de nuevo) sin afectar al efecto hover del enlace (como la segunda regla). Esto sólo hace que el número de página actual tenga un peso de fuente en negrita.

La razón por la que no lo incluimos con el efecto hover del enlace es que tiene un efecto desigual al pasar de un peso de fuente normal a negrita.

Nota: Dependiendo de cómo esté codificado tu CSS, puede que tengas que usar selectores más específicos. Por ejemplo, si hay estilos para #content a y tu WP-PageNavi está dentro del div content, puede que tengas que reescribir tu CSS PageNavi como #content .wp-pagenavi a y anular cualquier otro estilo menos específico.

Conclusión

Sabemos que este es un ejemplo relativamente sencillo, pero podrías tener reglas CSS mucho más avanzadas para diferenciar aún más los distintos enlaces y otros elementos. Esperamos que también hayas aprendido algunos consejos sobre CSS.

La integración opcional de WP-PageNavi es una característica muy interesante que los desarrolladores de temas podrían integrar en sus temas. Con el método de integración que hemos descrito anteriormente, los usuarios pueden elegir fácilmente si desean o no utilizarlo, y podría ser una buena opción para muchos blogs.

Quizá quieras consultar nuestras guías y tutoriales:

• Los mejores plugins de menús desplegables para WordPress (comparados)
• Cómo crear un menú de navegación usando Bootstrap
• Cómo añadir navegación personalizada en BuddyPress

Estos posts le ayudarán a encontrar más soluciones que puede estar buscando.