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

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 m√°s antiguos y m√°s nuevos predeterminados 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, entonces 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 hacer 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 con 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 encuentre las líneas para la paginación más antigua y más reciente 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 el esquema de color 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 anterior / siguiente incorporada? H√°ganos saber en los comentarios a continuaci√≥n.