RS16 PageNavi

Guía de estilo del complemento WP-PageNavi WordPress

Si no conoces el WP-PageNavi Complemento de WordPress, le permite reemplazar la navegación anterior / siguiente normal 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, incluyendo RS16, Blogwave, RS17, y Punto de luz.

Página RS16Navi

En este tutorial, explicaré 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 vista previa de la salida de marcado HTML de WP-PageNavi
  • Finalmente, cómo cambiar la apariencia de la navegación de su página a través de CSS

Instale el complemento

Tiene dos opciones para instalar el complemento WP-PageNavi.

  • Descárgalo desde WordPress.org, descárgalo a tu /wp-content/plugins/ directorio y activar (también conocido como, a la 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, eso debería haber sido bastante fácil. Ahora es el momento de ensuciarse las manos con el código de la parte de integración.

Integración de temas

En nuestra integración de temas, nunca queremos que se muestren errores si WP-PageNavi no está activo. En su lugar, nos aseguraremos de que vuelva a la antigua navegación de estilo anterior / siguiente. Para hacer esto, usaremos un function_exists control condicional.

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 de la siguiente manera:

<?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 es así, muestra el nuevo código de navegación de la página. De lo contrario, vuelve graciosamente a la navegación anterior / siguiente normal.

Tenga en cuenta: Dependiendo de cómo esté codificado su CSS, es posible que desee poner el wp_pagenavi(); parte dentro del div “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.css de su directorio de complementos en el encabezado de su sitio. No queremos que estos estilos predeterminados interfieran con nuestros propios estilos personalizados, por lo 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 complementos.
  • Agrega un fragmento a tu archivo functions.php – El siguiente fragmento de código que obtuve Recetas WP deshabilitará completamente el comportamiento anterior y no incluirá ninguna hoja de estilo de complemento (ya sea la predeterminada o un reemplazo en el directorio de su tema).
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

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

Coloca solo este código en tu tema functions.php archivo y agregue los estilos CSS a la hoja de estilo de su tema regular (generalmente style.css).

Notar: Asegúrese de que el código esté entre 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 WP-PageNavi. En el siguiente ejemplo, hay cuatro páginas, actualmente en la segunda página.

<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 borrados 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 incluido en la lista anterior).
  • .wp-pagenavi a.last – Se orienta específicamente al “último” enlace.
  • .wp-pagenavi span – Apunta al número de página actual con la parte de extensión (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 – Dirigirse específicamente a la visualización del número de página (es decir, página 1 de 4)

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

Por ejemplo: Suponga que desea que los enlaces anterior y siguiente estén en negrita, pero que todos los demás enlaces tengan un peso normal. Deberá 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 del número de página, el primer enlace y el último enlace en una sola regla para fines de ejemplo. Por supuesto, puede separarlos y agregar estilos más específicos a cada uno.

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

Actualización importante: Gracias a una actualización de escriba en los comentarios resulta que la última versión de WP-PageNavi contiene clases anteriores / siguientes (gracias en parte a Yoast).

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

Prácticamente todo lo anterior hasta que la lista desordenada de selectores ya no sea relevante, pero la mantendré solo porque podría ser una lección útil para reemplazar CSS en otras situaciones. El ejemplo de CSS que se muestra a continuación se seguirá aplicando, ya que de todos modos no he usado estos selectores.

Un ejemplo de CSS

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

Página actualizada de Blogwave

Aquí está el código que utilicé para lograr este aspecto, CSS multilí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 span selecciona todos los elementos de anclaje y alcance (prácticamente todo) dentro del div .wp-pagenavi.

  • La primera línea de la regla define un relleno de 5px para que no se apriete contra el borde gris claro (definido a continuación). También establece un margen consistente de 10 píxeles 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 estén subrayados.
  • La tercera línea define un borde gris sólido de 3 píxeles de ancho. los border-radius el código hace que las esquinas se redondeen.

Segunda regla
los .wp-pagenavi a:hover, .wp-pagenavi span.current selecciona 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). Simplemente 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 que tiene un efecto desigual que va desde el peso normal de la fuente hasta el negrita.

Notar: 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 de la división de contenido, es posible que deba volver a escribir su CSS PageNavi como #content .wp-pagenavi a y reemplazar todos los demás estilos menos específicos.

Conclusión

Sé que este fue un ejemplo relativamente simple, podrías tener reglas CSS mucho más avanzadas para diferenciar aún más los diferentes enlaces y otros elementos. Espero que también hayas aprendido algunos trucos de CSS a lo largo del camino.

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 incorporació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 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba