Saltar al contenido

Cómo agregar paginación numérica en su tema de WordPress

Difference between default WordPress navigation and Numeric Pagination

Uno de nuestros lectores nos preguntó recientemente cómo agregamos paginación numérica en la página del blog WPBeginner. Los temas predeterminados de WordPress y muchos otros temas muestran enlaces de paginación agregando publicaciones antiguas y enlaces de publicaciones más recientes en la parte inferior de las páginas de archivo de WordPress. Sin embargo, hay muchos sitios de WordPress que usan paginación numérica, como WPBeginner. Según nuestra experiencia, la paginación numérica es más fácil de usar, atractiva y SEO. Los marcos de temas de WordPress más avanzados, como Genesis, vienen con una funcionalidad incorporada para agregar paginación numérica. En este artículo le mostraremos cómo agregar paginación numérica en su tema de WordPress. El objetivo es reemplazar los enlaces de paginación predeterminados antiguos y nuevos en la parte inferior de las páginas de archivo con números de página fáciles de navegar.

Diferencia entre la navegación predeterminada de WordPress y la paginación numérica

Hay dos métodos para agregar paginación numérica en su tema de WordPress. El primer método es agregar manualmente la paginación numérica sin depender de un complemento de terceros. Dado que este artículo está en la categoría de temas y está destinado a nuevos diseñadores de temas, primero mostraremos el método manual. El segundo método es usar un complemento de terceros existente para agregar paginación numérica. Recomendamos ese método para todos nuestros usuarios de bricolaje.

Agregar manualmente la paginación numérica en sus temas de WordPress

Primero, le mostraremos cómo agregar manualmente la paginación numérica en sus temas de WordPress. Esto beneficiará a nuestros usuarios avanzados y a los usuarios que están aprendiendo el desarrollo de temas o que desean hacerlo sin depender de un complemento de terceros. Comencemos agregando el siguiente código en el archivo functions.php de su tema.

Nota: Este código se deriva de Genesis Framework que usamos en nuestro sitio. Si está utilizando Genesis, no necesita este código ni el complemento.


function wpbeginner_numeric_posts_nav() {

	if( is_singular() )
		return;

	global $wp_query;

	/** Stop execution if there's only 1 page */
	if( $wp_query->max_num_pages <= 1 )
		return;

	$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
	$max   = intval( $wp_query->max_num_pages );

	/**	Add current page to the array */
	if ( $paged >= 1 )
		$links[] = $paged;

	/**	Add the pages around the current page to the array */
	if ( $paged >= 3 ) {
		$links[] = $paged - 1;
		$links[] = $paged - 2;
	}

	if ( ( $paged + 2 ) <= $max ) {
		$links[] = $paged + 2;
		$links[] = $paged + 1;
	}

	echo '' . "n";

}

En WPBeginner, utilizamos este mismo código para la paginación numérica en nuestras páginas de archivo (por ejemplo, nuestro blog o la página de categoría de tutoriales de WordPress). Lo que hace este código es que recupera el número de páginas y prepara una lista con viñetas de enlaces numerados. Para agregar esto en sus plantillas, deberá agregar la siguiente etiqueta de plantilla en index.php, archive.php, category.php y cualquier otra plantilla de página de archivo de su tema.

	

Ahora que tenemos nuestra lista de páginas numeradas, necesitamos diseñar esta lista. Queremos que la lista aparezca bloque en línea donde la página activa se resalta con un color de fondo diferente. Para lograr eso, sigamos adelante y agreguemos lo siguiente en el archivo style.css de su tema:

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	color: #fff;
	text-decoration:none;
}

.navigation li {
	display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	background-color: #6FB7E9;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
	background-color: #3C8DC5;
}

Ahí tienes. Tenemos una lista de paginación numérica en nuestro tema que se ve muy bien.

Agregar manualmente la paginación numérica a los temas de WordPress sin un complemento

Agregar paginación numérica en WordPress usando WP-PageNavi

Ahora echemos un vistazo a cómo agregar paginación numérica en su tema de WordPress utilizando un complemento existente llamado WP-PageNavi. Lo primero que debe hacer es instalar y activar el complemento WP-PageNavi. Después de activar el complemento, vaya a Configuración »PageNavi para configurar los ajustes del complemento.

Configurar ajustes de WP-PageNavi

En la página de configuración del complemento, puede reemplazar la configuración predeterminada de texto y paginación numérica por la suya si lo desea. Sin embargo, la configuración predeterminada debería funcionar para la mayoría de los sitios web.

En el siguiente paso, debe agregar una etiqueta de plantilla en su tema de WordPress. Vaya a su carpeta de temas y busque las líneas para la paginación más antigua y más nueva en las plantillas de su página de archivo: index.php, archive.php y cualquier otro archivo de plantilla de archivo. Agregue la siguiente etiqueta de plantilla para reemplazar las etiquetas anteriores previous_posts_link y next_posts_link.

Una vez que haya agregado el fragmento wp_pagenavi, así es como se vería la paginación numérica:

Vista predeterminada de la paginación numérica de wp-pagenavi

Si desea cambiar la apariencia de los colores y el estilo de la paginación numérica en wp-pagenavi, deberá ir a Configuración »PageNavi. Desmarque la opción para usar Use pagenavi-css.css y guardar los cambios. Ahora ve a Complementos »Editor. Desde Seleccione el complemento para editar menú desplegable, seleccione WP-PageNavi y haga clic en el Seleccione botón. El editor cargará los archivos de complemento en la barra lateral derecha. Haga clic en pagenavi-css.css para abrirlo en el editor y luego copie el contenido del archivo.

Copie el contenido del archivo pagenavi-css

A continuación, debes ir a Apariencia »Editor y pegue el contenido de pagenavi-css.css en el archivo style.css de su tema. Ahora puede modificar la combinación de colores y el estilo desde aquí. La razón por la que copiamos el contenido del css del complemento a la hoja de estilo del tema es para evitar la pérdida de cambios de estilo en caso de que actualice el complemento. Aquí hay una versión ligeramente modificada de la paginación numérica, no dude en usarla y modificarla en su tema.


.wp-pagenavi {
	clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
	color: #FFF;
	text-decoration: none;
	background-color:#6FB7E9; 
	border: 1px solid #B2D1E5;
	padding: 5px 5px;
	margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #E9F2F9;
	background-color:#6FB7E9;
}

.wp-pagenavi span.current {
	font-weight: bold;
	background-color:#3C8DC5;
}

Así es como se vería:

CSS personalizado de PageNavi

Como siempre, debes experimentar con CSS. El objetivo debe ser hacer coincidir la paginación numérica con la apariencia de los colores de su sitio web, de modo que se mezcle bien y no se vea como un elemento colocado de manera extraña.

Esperamos que este artículo te haya ayudado a agregar y mostrar paginación numérica en tu tema de WordPress. ¿Qué método prefieres usar? ¿Te gusta la paginación numérica o prefieres la navegación incorporada anterior / siguiente? Háganos saber en los comentarios a continuación.

.