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 siguiente y anterior predeterminada, puede hacerlo usando el famoso complemento PageNavi, sin embargo, prefiero agregar paginación manualmente a mis temas para que la gente no lo haga. tengo que ir a buscar un complemento. También ayuda a mantener el sitio más rápido sin todos los scripts externos y CSS.

Afortunadamente, existe una gran función en wordpress llamada “paginate_links” que se agregó en WordPress 2.1 y le permitirá crear una navegación de estilo 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 parece a la paginación en mi Total WordPressTheme.

PHP de paginación

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

// 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,
			 ) );
		}
	}
	
}

Ver todos los parámetros

CSS de paginación

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

Volver a llamar a la función de paginación es realmente simple. Todo lo que tiene que hacer es agregar el siguiente código a los archivos de su 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):

Consultas personalizadas?

Si está creando una consulta personalizada usando WP_Query, esta función no funcionará a menos que haya definido su consulta en la variable $ wp_query (lo cual es malo, no lo haga). Para solucionarlo, generalmente creo nuevas consultas como las siguientes:

$wpex_query = new WP_Query( $args );

De esta manera puedo alterar la función de paginación principal para buscar la variable al crear la paginación, ejemplo (editando el primer fragmento):

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

Actualizar: En este ejemplo, verifico la variable global … Sin embargo, simplemente podría pasar la variable de consulta directamente a la función wpex_pagination, que probablemente sea una mejor opción 😉

Publicaciones relacionadas

Botón volver arriba