Saltar al contenido

Guía para diseñar el complemento de WordPress WP-PageNavi

Si no está familiarizado con el complemento de WordPress WP-PageNavi , le permite reemplazar la navegación normal anterior / siguiente con una navegación de paginación numerada más avanzada. Esta es una función que he incluido en varios temas que he desarrollado, incluidos RS16 , Blogwave , RS17 y Bright Spot .

En este tutorial, voy a repasar cómo:

  • Instale WP-PageNavi e intégrelo correctamente en su tema.
  • Dos métodos para deshabilitar y / o anular los estilos de complementos predeterminados.
  • Una descripción general de la salida de marcado HTML de WP-PageNavi
  • Finalmente, cómo modificar el aspecto de la navegación de su página a través de CSS

Instalar el complemento

Tiene dos opciones cuando se trata de instalar el complemento WP-PageNavi.

  • Descárguelo de WordPress.org , cárguelo en su /wp-content/plugins/directorio y actívelo (también conocido como la forma antigua ).
  • Dependiendo de su host, también puede instalar complementos automáticamente buscándolos en la página “Agregar nuevo” en Complementos en su panel de administración de WordPress. Simplemente busque “pagenavi” y debería encontrarlo.

De acuerdo, 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 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 recurra a la antigua navegación de estilo anterior / siguiente. Para hacer esto, usaremos una verificación condicional function_exists .

Digamos que este es su código de navegación normal 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 a 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 } ?>

Básicamente, esto verifica si WP-PageNavi está activo y, si lo está, muestra el nuevo código de navegación de la página. Si no es así, vuelve a la navegación normal anterior / siguiente.

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

Anular estilos de complementos

De forma predeterminada, WP-PageNavi inserta automáticamente un archivo CSS llamado pagenavi-css.cssdesde su directorio de complementos en el encabezado de su sitio. No queremos que estos estilos predeterminados interfieran con nuestros propios estilos geniales hechos a medida, por lo que nos desharemos de ellos 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 complementos.
  • Agregue un fragmento a su archivo functions.php : el siguiente fragmento de código que recogí de WP Recipes deshabilitará completamente el comportamiento anterior y no incluirá ninguna hoja de estilo del complemento (ya sea la predeterminada o una anulación 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 functions.phparchivo de su tema y agregue los estilos CSS a la hoja de estilo de su tema normal (generalmente style.css).

Leer más  Cómo crear un formulario de contacto en WordPress (paso a paso)

Nota: asegúrese de que el código esté entre corchetes, como <?php ... ?>si su archivo de funciones estuviera vacío.

Selectores CSS y Marcado HTML WP-PageNavi

Así es como se ve el 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 usar los siguientes selectores de CSS para apuntar al marcado HTML anterior:

  • .wp-pagenavi – Se aplica a todo el div, útil para borradores de CSS, relleno / margen, tamaños de fuente y estilos (negrita, cursiva, etc.)
  • .wp-pagenavi a – Orienta todos los enlaces dentro de la navegación de la página, incluidos los números de página y anterior / siguiente.
  • .wp-pagenavi a.page – Se orienta específicamente a números de página
  • .wp-pagenavi a.first – Se orienta específicamente al “primer” enlace (no mencionado anteriormente).
  • .wp-pagenavi a.last – Se orienta específicamente al “último” enlace
  • .wp-pagenavi span – Apunta al número de página actual junto con la parte extendida (la cosa con tres puntos)
  • .wp-pagenavi span.current – Se dirige específicamente al número de página actual.
  • .wp-pagenavi span.extend – Se dirige específicamente a la extensión (cosa de tres puntos)
  • .wp-pagenavi span.pages – Específicamente se dirige a la visualización del número de página (es decir, página 1 de 4)

Nota: Los enlaces anterior y siguiente de forma predeterminada no tienen clase CSS. Si desea que se diferencien completamente de los números de página y los primeros / últimos enlaces, estos deberán restablecer los estilos agregados al .wp-pagenavi aselector. Si eso no tiene sentido, eche un vistazo al siguiente ejemplo (realmente simplificado).

Leer más  Cómo escribir ecuaciones matemáticas en WordPress (hermoso formato)

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é enlaces de números de página, el primer enlace y el último enlace en una sola regla para fines de ejemplo. Por supuesto, puedes separarlos y agregar estilos más específicos a cada uno.

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

Actualización importante: gracias a una actualización de scribu en los comentarios, resulta que la versión más reciente de WP-PageNavi tiene clases anteriores / siguientes (gracias en parte a Yoast ).

Puede utilizar .wp-pagenavi a.previouspostslinky .wp-pagenavi a.nextpostslinkpara seleccionar los enlaces anterior y siguiente, respectivamente.

Prácticamente todo lo anterior hasta que la lista desordenada de selectores ya no sea relevante, pero lo mantendré solo porque podría ser una lección útil para anular CSS en algunas otras situaciones. El siguiente ejemplo de CSS aún se aplicará, ya que de todos modos no usé esos selectores.

Un ejemplo de CSS

Aquí hay un ejemplo de un estilo de PageNavi que creé a partir del tema Blogwave .

20210220 16

Aquí está el código que usé para obtener este aspecto, CSS de una sola línea 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 todo:

Primera regla

Los .wp-pagenavi a, .wp-pagenavi spanSelecciona todo de anclaje y elementos span (prácticamente todo) dentro de la div .wp-PageNavi.

  • La primera línea de la regla establece un relleno de 5px para que no quede abarrotado contra el borde gris claro (definido a continuación). 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, 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 border-radiuscódigo hace que las esquinas se redondeen.
Leer más  Cómo incrustar tweets reales en publicaciones de blog de WordPress

Segunda regla
La .wp-pagenavi a:hover, .wp-pagenavi span.currentselecciona el efecto de desplazamiento del enlace y 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
Esto selecciona el número de página actual (nuevamente) sin afectar también el efecto de desplazamiento del enlace (como la segunda regla). Esto solo hace que el número de página actual tenga un grosor de fuente en negrita.

La razón por la que no lo incluí con el efecto de desplazamiento del enlace es porque tiene un efecto desigual que va de normal a negrita.

Nota: Dependiendo de cómo esté codificado su CSS, es posible que deba usar selectores más específicos. Por ejemplo, si hay estilos para #content ay su WP-PageNavi está dentro del div de contenido, es posible que deba volver a escribir su CSS de PageNavi como #content .wp-pagenavi ay anular cualquier otro estilo menos específico.

Conclusión

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

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 describí anteriormente, los usuarios pueden elegir fácilmente si usarlo o no, y podría ser una buena opción para muchos blogs.

Espero que a todos les haya gustado el tutorial, y si tienen alguna solicitud para futuros tutoriales de WordPress o consejos de CSS, hágamelo saber en los comentarios.