Comment ajouter une pagination à votre thème WordPress

Si vous cherchez à ajouter la prise en charge de la pagination à votre thème WordPress avec des chiffres sympas au lieu du message suivant et précédent par défaut, vous pouvez le faire en utilisant le célèbre PageNavi plugin, cependant, je préfère de loin ajouter la pagination manuellement à mes thèmes afin que les gens n’aient pas à chercher un plugin. Cela permet également de garder le site plus rapide sans tous les scripts externes et CSS.

Heureusement, il existe une excellente fonction dans wordpress appelée « paginer_liens” qui a été ajouté dans WordPress 2.1 et vous permettra de créer une navigation de style paginé pour toute requête sur votre site. Voici un tutoriel rapide pour ajouter une navigation de page simple à votre thème qui ressemble à la pagination dans mon Thème WordPress Total.

Pagination PHP

Ajoutez simplement le code suivant à la fin de votre fichier functions.php (ou tout autre fichier de votre thème où vous souhaitez le conserver).

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

Afficher tous les paramètres

CSS de pagination

Copiez le CSS suivant et collez-le dans votre fichier 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 }

Ajouter la fonction de pagination à votre thème

Pour rappeler la fonction de pagination c’est très simple. Tout ce que vous avez à faire est d’ajouter le code suivant à vos fichiers de thème où vous souhaitez afficher toute sorte de pagination. Les plus courants sont votre index.php, home.php, category.php, tags.php, archive.php et search.php. Mais si vous avez des modèles de page personnalisés avec prise en charge de la pagination, vous voudrez les ajouter ici.

Remplacez la pagination par défaut par la suivante (normalement située quelque part après endif ):

<?php wpex_pagination(); ?>

Requêtes personnalisées ?

Si vous créez une requête personnalisée à l’aide de WP_Query, cette fonction ne fonctionnera que si vous avez défini votre requête dans la variable $wp_query (ce qui est mauvais, ne le faites pas). Pour résoudre ce problème, je crée généralement de nouvelles requêtes comme les suivantes :

$wpex_query = new WP_Query( $args );

De cette façon, je peux modifier la fonction de pagination principale pour rechercher la variable lors de la création de la pagination, exemple (édition du premier extrait):

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

Mettre à jour: Dans cet exemple, je vérifie la variable globale…Cependant, vous pouvez simplement passer la variable de requête directement à la fonction wpex_pagination qui est probablement un meilleur choix 😉