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

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


RS16 PageNavi

En este tutorial, voy a repasar cómo:

  • Instale WP-PageNavi e intégrelo adecuadamente 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 alterar 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árgalo desde WordPress.org, cárguelo a su directorio / wp-content / plugins / y actívelo (también conocido como, a la antigua usanza).
  • 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.

Bien, eso debería haber sido bastante fácil. Ahora es el momento de ensuciarse un poco las manos en 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 anterior / siguiente. Para hacer esto, usaremos un función_existe verificación condicional.

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

<?php next_posts_link (‘«Entradas más antiguas’) ?>
<?php previous_posts_link (‘Entradas más recientes »’) ?>

Lo cambiaremos a lo siguiente:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } más { ?>
<?php next_posts_link (‘«Entradas más antiguas’) ?>
<?php previous_posts_link (‘Entradas más recientes »’) ?>
<?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. De lo contrario, vuelve a la navegación anterior / siguiente normal..

Tenga en cuenta: Dependiendo de cómo esté codificado su CSS, es posible que desee poner wp_pagenavi (); parte dentro de la “navegación” (o equivalente) div. 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.css desde su directorio de complementos en el encabezado de su sitio. No queremos que estos estilos predeterminados interfieran con nuestros propios estilos geniales personalizados, por lo que los eliminaremos por completo, y hay dos formas simples 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 tomé de Recetas WP desactivará por completo 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 archivo functions.php de su tema y agregue los estilos CSS a la hoja de estilo de su tema regular (generalmente 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 HTML Markup y Selectores CSS

Así es como se ve el marcado WP-PageNavi. En el siguiente ejemplo, hay cuatro páginas, actualmente en la página dos.

Anterior1
2
3 3
próximo

Último “

Podemos usar los siguientes selectores CSS para dirigir el marcado HTML anterior:

  • .wp-pagenavi: se aplica a todo el div, útil para borrar CSS, relleno / margen, tamaños y estilos de fuente (negrita, cursiva, etc.)
  • .wp-pagenavi a – Apunta a 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: apunta específicamente a los números de página
  • .wp-pagenavi a.first: apunta específicamente al “primer” enlace (no mencionado anteriormente)
  • .wp-pagenavi a.last – Se dirige específicamente al “último” enlace
  • .wp-pagenavi span – Apunta el 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: se dirige específicamente a la visualización del número de página (es decir, página 1 de 4)

Nota: Los enlaces anteriores y siguientes por defecto, no tienen clase CSS en ellos. Si desea que se diferencien por completo de los números de página y del primer / último enlace, deberá restablecer los estilos agregados al .wp-pagenavi un selector. Si eso no tiene sentido, eche un vistazo al siguiente ejemplo (realmente simplificado).

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

.wp-pagenavi a {font-weight: bold; } / * Solo enlaces anteriores y siguientes * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-weight: normal; } / * Otros enlaces * /

Combiné enlaces de número de página, el primer enlace y el último enlace en una regla para fines de ejemplo. Por supuesto, puede 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 puedes restablecerlos de todos modos.

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

Puede usar .wp-pagenavi a.previouspostslink y .wp-pagenavi a.nextpostslink para seleccionar enlaces anteriores y siguientes, respectivamente.

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

Un ejemplo de CSS

Aquí hay un ejemplo de un estilo de PageNavi que construí a partir de Blogwave tema.

Blogwave Actualizó PageNavi

Aquí está el código que usé para obtener este aspecto, CSS de varias líneas es opcional:

.wp-pagenavi a, .wp-pagenavi span {
acolchado: 5px; margen derecho: 10px;
tamaño de fuente: 15px; color: # 03719c; decoración de texto: ninguno;
borde: 3px sólido #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio de borde: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
fondo: # 03719c;
color: #fff;
borde: 3px sólido #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 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 se apiñe 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 espacio igual entre cada uno..
  • La segunda línea establece un tamaño de fuente de 15 px, 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 3 píxeles en todo. El código del radio del borde hace que las esquinas sean redondeadas.

Segunda regla
El .wp-pagenavi a: hover, .wp-pagenavi span.current selecciona el efecto de desplazamiento 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
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 sea un peso 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 del peso 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 a y su WP-PageNavi está dentro del div de contenido, es posible que deba reescribir 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. Espero que hayas recogido 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 podrían integrar en sus temas. Con el método de integración que describí anteriormente, los usuarios podrían elegir fácilmente si usarlo o no, y podría ser una buena opción para muchos blogs.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me