Guía para estilizar el plugin de WordPress WP-PageNavi

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

En este tutorial, cubriremos cómo:

• Instalar WP-PageNavi e integrarlo correctamente en tu tema.
• Dos métodos para deshabilitar y/o sobrescribir los estilos predeterminados del plugin.
• Una descripción general del marcado HTML generado por WP-PageNavi
• Finalmente, cómo alterar la apariencia de la navegación de tu página a través de CSS

Instalar el Plugin

Tienes dos opciones cuando se trata de instalar el plugin WP-PageNavi.

• Descárgalo desde WordPress.org, súbelo a tu directorio /wp-content/plugins/ y actívalo (la forma clásica).
• Dependiendo de tu host, también puedes instalar plugins automáticamente buscándolos en la página "Añadir nuevo" bajo Plugins en tu panel de administración de WordPress. Simplemente busca "pagenavi" y deberías encontrarlo.

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

Integración con el Tema

En la integración de nuestro tema, nunca queremos que se muestren errores si WP-PageNavi no está activo. En su lugar, nos aseguraremos de que recurra a la navegación antigua de anterior/siguiente. Para hacer esto, usaremos una verificación condicional de `function_exists`.

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

<div class="navigation">
	<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>

Lo cambiaremos a lo siguiente:

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

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

Tenga en cuenta: Dependiendo de cómo esté codificado su CSS, es posible que desee colocar la parte wp_pagenavi(); dentro del div de “navegación” (o equivalente). Tenga en cuenta que WP-PageNavi genera una nueva clase llamada “wp-pagenavi”, que podemos usar para estilizar por separado.

Anular estilos de plugins

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

• Agregue un archivo CSS a su directorio de temas – Esta es probablemente la forma más fácil de anular los estilos predeterminados de WP-PageNavi. Si tiene un archivo llamado pagenavi-css.css en su directorio de temas, WP-PageNavi lo usará en lugar del predeterminado en el directorio de plugins.
• Agregue un fragmento a su archivo functions.php – El siguiente fragmento de código que tomamos de WP Recipes deshabilitará por completo el comportamiento anterior y no incluirá ninguna hoja de estilos del plugin (ni la predeterminada ni una anulada en su directorio de temas).

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

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

Simplemente coloque ese código en el archivo functions.php de su tema y agregue los estilos CSS a la hoja de estilos regular de su tema (generalmente style.css).

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

Marcado HTML y selectores CSS de WP-PageNavi

Así es como se ve el marcado de 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 »">Last »</a>
</div>

Podemos usar los siguientes selectores CSS para apuntar al marcado HTML anterior:

• .wp-pagenavi – Se aplica a todo el div, útil para limpiar CSS, padding/margin, tamaños y estilos de fuente (negrita, cursiva, etc.)
• .wp-pagenavi a – Selecciona todos los enlaces dentro de la navegación de página, incluidos los números de página y anterior/siguiente.
• .wp-pagenavi a.page – Selecciona específicamente los números de página
• .wp-pagenavi a.first – Selecciona el enlace "primero" específicamente (no listado arriba)
• .wp-pagenavi a.last – Selecciona el enlace "último" específicamente
• .wp-pagenavi span – Selecciona el número de página actual junto con la parte de extensión (lo que tiene tres puntos)
• .wp-pagenavi span.current – Selecciona específicamente el número de página actual
• .wp-pagenavi span.extend – Selecciona específicamente la extensión (lo de los tres puntos)
• .wp-pagenavi span.pages – Selecciona específicamente la visualización del número de página (por ejemplo, Página 1 de 4)

Nota: Por defecto, los enlaces anterior y siguiente no tienen ninguna clase CSS. Si desea diferenciarlos completamente de los números de página y los enlaces primero/último, deberá restablecer cualquier estilo agregado al selector .wp-pagenavi a. Si esto no tuvo sentido, eche un vistazo al siguiente ejemplo (muy simplificado).

Por ejemplo: Digamos que desea que los enlaces anterior y siguiente estén en negrita, pero que todos los demás enlaces tengan un peso normal. Debería 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 */

Combiné los enlaces de número de página, el enlace primero y el enlace último en una sola regla a modo de ejemplo. Por supuesto, puede separarlos y agregar estilos más específicos a cada uno.

Sería mucho más fácil si se agregara una clase a los enlaces anterior/siguiente por defecto, pero no es así. No es un gran problema, ya que simplemente puede restablecerlos de todos modos.

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

Así que prácticamente todo lo anterior hasta la lista desordenada de selectores ya no es relevante, pero lo mantendremos porque podría ser una lección útil para anular CSS en otras situaciones. El siguiente ejemplo de CSS seguirá aplicándose ya que no usamos esos selectores de todos modos.

Un ejemplo de CSS

Aquí hay un ejemplo de un estilo de PageNavi que creamos:

Aquí está el código que usamos para lograr este aspecto, el CSS de múltiples 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 aquí está lo que todo esto significa:

Primera Regla
El selector .wp-pagenavi a, .wp-pagenavi span selecciona todos los elementos de anclaje y span (prácticamente todo) dentro del div .wp-pagenavi.

• La primera línea de la regla establece un relleno de 5px para que no quede apretado contra el borde gris claro (definido abajo). También establece un margen consistente de 10px a la derecha de cada elemento para que haya un espaciado igual entre cada uno.
• La segunda línea establece un tamaño de fuente de 15px, pone el color del texto en 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 hace que las esquinas sean redondeadas.

Segunda Regla
El selector .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 pone el texto en blanco.
• La tercera línea da un borde ligeramente más oscuro.

Tercera Regla
Esto selecciona el número de página actual (de nuevo) sin afectar el efecto hover del enlace (como en la segunda regla). Esto simplemente 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 de pasar el ratón por encima 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, es posible 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 de contenido, es posible que tengas que reescribir tu CSS de PageNavi como #content .wp-pagenavi a y anular cualquier otro estilo menos específico.

Conclusión

Sabemos que este fue un ejemplo relativamente simple, podrías tener reglas CSS mucho más avanzadas para diferenciar aún más los diversos enlaces y otros elementos. Esperamos que hayas aprendido algunos consejos de CSS en el camino también.

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

Quizás quieras ver nuestras guías y tutoriales:

• Los mejores plugins de menú desplegable para WordPress (comparativa)
• Cómo crear un menú de navegación usando Bootstrap
• Cómo agregar navegación personalizada en BuddyPress

Estas publicaciones te ayudarán a encontrar más soluciones que puedas estar buscando.