Cómo agregar diseño de números en su tema de WordPress

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

Hay dos métodos para agregar paginación numérica a su tema de WordPress. El primer método es agregar paginación numérica manualmente sin depender de un plugin de terceros. Dado que este artículo pertenece a 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 utilizar un plugin de terceros existente para agregar paginación de números. Recomendamos este método a todos nuestros usuarios de bricolaje.

Adición manual de paginación numérica en temas de WordPress

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

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 plugin.


function trucoswp_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 '<div class="navigation"><ul>' . "n";

	/**	Previous Post Link */
	if ( get_previous_posts_link() )
		printf( '<li>%s</li>' . "n", get_previous_posts_link() );

	/**	Link to first page, plus ellipses if necessary */
	if ( ! in_array( 1, $links ) ) {
		$class = 1 == $paged ? ' class="active"' : '';

		printf( '<li%s><a href="%s">%s</a></li>' . "n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );

		if ( ! in_array( 2, $links ) )
			echo '<li>…</li>';
	}

	/**	Link to current page, plus 2 pages in either direction if necessary */
	sort( $links );
	foreach ( (array) $links as $link ) {
		$class = $paged == $link ? ' class="active"' : '';
		printf( '<li%s><a href="%s">%s</a></li>' . "n", $class, esc_url( get_pagenum_link( $link ) ), $link );
	}

	/**	Link to last page, plus ellipses if necessary */
	if ( ! in_array( $max, $links ) ) {
		if ( ! in_array( $max - 1, $links ) )
			echo '<li>…</li>' . "n";

		$class = $paged == $max ? ' class="active"' : '';
		printf( '<li%s><a href="%s">%s</a></li>' . "n", $class, esc_url( get_pagenum_link( $max ) ), $max );
	}

	/**	Next Post Link */
	if ( get_next_posts_link() )
		printf( '<li>%s</li>' . "n", get_next_posts_link() );

	echo '</ul></div>' . "n";

}

En TrucosWP, utilizamos el mismo código para la paginación de números en nuestras páginas de archivo (por ejemplo, nuestro blog o la página de categorías 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 agregarlo a sus plantillas, deberá agregar la siguiente etiqueta de plantilla en index.php, archive.php, category.php de su tema y cualquier otra plantilla de página de archivo.

	<?php trucoswp_numeric_posts_nav(); ?>

Ahora que tenemos nuestra lista de páginas numeradas, necesitamos darle estilo a esta lista. Queremos que la lista aparezca de forma masiva en línea donde la página activa esté resaltada con un color de fondo diferente. Para hacer 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;
}

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

Agregar manualmente paginación de números a temas de WordPress sin plugins

Agregar paginación de números en WordPress usando WP-PageNavi

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

Configurar los ajustes de WP-PageNavi

En la página de configuración del plugin, puede reemplazar la configuración predeterminada de paginación de texto y números con la suya propia 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 la carpeta de su tema y busque 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 antiguas etiquetas previous_posts_link y next_posts_link.

<?php wp_pagenavi(); ?>

Después de agregar el fragmento de wp_pagenavi, así es como se verá el diseño del número:

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

Si desea cambiar el aspecto de los colores y el estilo de diseño de números en wp-pagenavi, debe ir a Configuración »PageNavi. Desmarque la opción para usar Use pagenavi-css.css y guarde los cambios. Ahora ve a Plugin »Editor. En el menú desplegable Seleccionar plugin para editar, seleccione WP-PageNavi y haga clic en el botón Seleccionar. El editor cargará los archivos del plugin 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 cambiar la combinación de colores y el estilo desde aquí. La razón por la que copiamos el contenido del plugin css a la hoja de estilo del tema es para evitar perder cambios de estilo si actualizara el plugin. Aquí hay una versión ligeramente modificada del diseño de números, no dude en usarla y cambiarla 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, deberías experimentar con CSS. El objetivo debe ser hacer coincidir el diseño del número con la apariencia del color 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 le haya ayudado a agregar y ver la paginación de números en su tema de WordPress. ¿Qué método prefieres utilizar? ¿Le gusta el diseño de números o prefiere la navegación anterior / siguiente incrustada? Háganos saber en los comentarios a continuación.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *