Si vous cherchez à ajouter un support de pagination à votre thème WordPress avec des chiffres sympas au lieu du post 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 rapidement 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 un style de navigation 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 “Total WordPressTheme”.

Pagination PHP

Ajoutez simplement le code suivant à la fin de votre fichier functions.php (ou tout autre fichier dans 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

Pagination CSS

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 }

Ajout de la fonction de pagination à votre thème

Pour rappeler la fonction de pagination, c’est vraiment 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 vos 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 ce qui suit (normalement situé 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 y remédier, 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 de code):

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 😉

Share: