Cómo agregar paginación a su tema de WordPress

Cómo agregar paginación a su tema de WordPress

Si está buscando agregar soporte de paginación a su tema de WordPress con números geniales en lugar de la publicación anterior y siguiente predeterminada, puede hacerlo utilizando el famoso PageNavi plugin, sin embargo, prefiero agregar paginación manualmente a mis temas para que la gente no tenga que buscar un plugin. También ayuda a mantener el sitio más rápido sin todas las secuencias de comandos externas y CSS.

Afortunadamente, hay una gran función en wordpress llamada “paginate_links”Que se agregó en WordPress 2.1 y le permitirá crear un estilo de navegación paginado para cualquier consulta en su sitio. Aquí hay un tutorial rápido para agregar una navegación de página simple a su tema que se ve exactamente como la paginación en mi Tema total de WordPress.

Paginación PHP

Simplemente agregue el siguiente código al final de su archivo functions.php (o cualquier otro archivo en su tema en el que desee mantenerlo).

// Numbered Pagination
if ( !function_exists( 'wpex_pagination' ) ) {
	
	function wpex_pagination() {
		
		$prev_arrow = is_rtl() ? '→' : '←';
		$next_arrow = is_rtl() ? '←' : '→';
		
		global $wp_query;
		$total = $wp_query->max_num_pages;
		$big = 999999999; // need an unlikely integer
		if( $total > 1 )  {
			 if( !$current_page = get_query_var('paged') )
				 $current_page = 1;
			 if( get_option('permalink_structure') ) {
				 $format = 'page/%#%/';
			 } else {
				 $format = '&paged=%#%';
			 }
			echo paginate_links(array(
				'base'			=> str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
				'format'		=> $format,
				'current'		=> max( 1, get_query_var('paged') ),
				'total' 		=> $total,
				'mid_size'		=> 3,
				'type' 			=> 'list',
				'prev_text'		=> $prev_arrow,
				'next_text'		=> $next_arrow,
			 ) );
		}
	}
	
}

Mostrar todas las configuraciones

Paginación CSS

Copie el siguiente CSS y péguelo en su archivo style.css.

ul.page-numbers {
    list-style: none;
    margin: 0;
}

.page-numbers:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

ul.page-numbers li {
    display: block;
    float: left;
    margin: 0 4px 4px 0;
    text-align: center;
}

.page-numbers a,
.page-numbers span {
    line-height: 1.6em;
    display: block;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid #ddd;
    color: #888;
}

.page-numbers a span { padding: 0 }

.page-numbers a:hover,
.page-numbers.current,
.page-numbers.current:hover {
    color: #000;
    background: #f7f7f7;
    text-decoration: none;
}

.page-numbers:hover { text-decoration: none }

Agregar la función de paginación a su tema

Para recordar la función de paginación, es realmente simple. Todo lo que necesita hacer es agregar el siguiente código a sus archivos de tema donde desea mostrar cualquier tipo de paginación. Los más comunes son index.php, home.php, category.php, tags.php, archive.php y search.php. Pero si tiene plantillas de página personalizadas con soporte de paginación, querrá agregarlas aquí.

Reemplace la paginación predeterminada con lo siguiente (normalmente ubicado en algún lugar después de endif):

<?php wpex_pagination(); ?>

¿Consultas personalizadas?

Si crea una consulta personalizada usando WP_Query, esta función solo funcionará si ha definido su consulta en la variable $ wp_query (lo cual es malo, no lo haga). Para remediar esto, suelo crear nuevas consultas como las siguientes:

$wpex_query = new WP_Query( $args );

De esta manera puedo modificar la función de paginación principal para encontrar la variable al crear el ejemplo de paginación (editar el primer fragmento de código):

global $wp_query, $wpex_query;
if ( $wpex_query ) {
    $total = $wpex_query->max_num_pages;
} else {
    $total = $wp_query->max_num_pages;
}

Poner al día: En este ejemplo, estoy verificando la variable global … Sin embargo, puede pasar la variable de consulta directamente a la función wpex_pagination, que probablemente sea una mejor opción 😉

Deja un comentario

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

Ir arriba