Un de nos lecteurs nous a récemment demandé comment ajouter la pagination numérique sur la page du blog WPBeginner. Les thèmes par défaut de WordPress et de nombreux autres thèmes affichent des liens de pagination en ajoutant d’anciens messages et des liens de messages plus récents au bas des pages d’archives WordPress. Cependant, il existe de nombreux sites WordPress qui utilisent la pagination des numéros, comme WPBeginner. D’après notre expérience, la pagination numérique est plus facile à utiliser, attrayante et SEO. Des cadres de thèmes WordPress plus avancés, comme Genesis, sont livrés avec des fonctionnalités intégrées pour ajouter la pagination des numéros. Dans cet article, nous vous montrerons comment ajouter une pagination numérique dans votre thème WordPress. L’objectif est de remplacer les liens de pagination par défaut plus anciens et plus récents au bas des pages d’archives par des numéros de page faciles à naviguer.
Il existe deux méthodes pour ajouter une pagination numérique à votre thème WordPress. La première méthode consiste à ajouter manuellement la pagination numérique sans compter sur un plug-in tiers. Étant donné que cet article est dans la catégorie thème et est destiné aux nouveaux concepteurs de thèmes, nous allons d’abord montrer la méthode manuelle. La deuxième méthode consiste à utiliser un plug-in tiers existant pour ajouter la pagination des numéros. Nous recommandons cette méthode à tous nos utilisateurs de bricolage.
Ajoutez manuellement la pagination numérique à vos thèmes WordPress
Tout d’abord, nous vous montrerons comment ajouter manuellement la pagination numérique à vos thèmes WordPress. Cela bénéficiera à nos utilisateurs expérimentés et aux utilisateurs qui apprennent le développement de thèmes ou qui souhaitent le faire sans s’appuyer sur un plugin tiers. Commençons par ajouter le code suivant dans le fichier functions.php de votre thème.
Remarque: Ce code est dérivé du cadre Genesis que nous utilisons sur notre site. Si vous utilisez Genesis, vous n’avez pas besoin de ce code ou de ce plugin.
function wpbeginner_numeric_posts_nav() {
if( is_singular() )
return;
global $wp_query;
/** Stop execution if there's only 1 page */
if( $wp_query->max_num_pages 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 )
- ‘. “n”;
- % s
- % s
- …
- % s
- …
- % s
- % s
/ ** Lien article précédent * /
if (get_previous_posts_link ())
printf (‘
‘. “n”, get_previous_posts_link ());
/ ** Lien vers la première page, plus des ellipses si nécessaire * /
if (! in_array (1, $ links)) {
$ class = 1 == $ paginé? ‘class = “active”‘: ”;
printf (‘
‘. “n”, $ class, esc_url (get_pagenum_link (1)), ‘1’);
if (! in_array (2, $ links))
chassèrent ‘
»
}
/ ** Lien vers la page actuelle, plus 2 pages dans les deux sens si nécessaire * /
sort ($ links);
foreach ((array) $ links as $ link) {
$ class = $ paged == $ link? ‘class = “active”‘: ”;
printf (‘
‘. “n”, $ class, esc_url (get_pagenum_link ($ link)), $ link);
}
/ ** Lien vers la dernière page, plus des ellipses si nécessaire * /
if (! in_array ($ max, $ links)) {
if (! in_array ($ max – 1, $ links))
chassèrent ‘
‘. “n”;
$ class = $ paged == $ max? ‘class = “active”‘: ”;
printf (‘
‘. “n”, $ class, esc_url (get_pagenum_link ($ max)), $ max);
}
/ ** Lien suivant * /
if (get_next_posts_link ())
printf (‘
‘. “n”, get_next_posts_link ());
chassèrent ‘
‘. “n”;
}
Chez WPBeginner, nous utilisons ce même code pour la pagination des numéros sur nos pages d’archives (par exemple, notre blog ou la page de catégorie du didacticiel WordPress). Ce que fait ce code, c’est qu’il récupère le nombre de pages et prépare une liste à puces de liens numérotés. Pour l’ajouter à vos modèles, vous devrez ajouter la balise de modèle suivante dans index.php, archive.php, category.php et tout autre modèle de page d’archive pour votre thème.
Maintenant que nous avons notre liste de pages numérotées, nous devons concevoir cette liste. Nous voulons faire apparaître la liste dans un bloc en ligne où la page active est mise en évidence avec une couleur d’arrière-plan différente. Pour ce faire, allons-y et ajoutons ce qui suit au fichier style.css de votre thème:
.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;
}
Tiens. Nous avons une liste de pagination numérique sur notre sujet qui a fière allure.
Ajouter une pagination numérique dans WordPress en utilisant WP-PageNavi
Voyons maintenant comment ajouter la pagination numérique dans votre thème WordPress en utilisant un plugin existant appelé WP-PageNavi. La première chose à faire est d’installer et d’activer le plugin WP-PageNavi. Après avoir activé le plugin, accédez à Paramètres »PageNavi pour configurer les paramètres du plugin.
Sur la page des paramètres du plug-in, vous pouvez remplacer les paramètres de pagination par défaut du texte et des numéros par les vôtres si vous le souhaitez. Cependant, les paramètres par défaut devraient fonctionner pour la plupart des sites Web.
À l’étape suivante, vous devez ajouter une balise de modèle dans votre thème WordPress. Accédez à votre dossier de thème et recherchez les lignes de la pagination la plus ancienne et la plus récente dans vos modèles de page d’archive: index.php, archive.php et tout autre fichier de modèle d’archive. Ajoutez la balise de modèle suivante pour remplacer les balises précédentes previous_posts_link et next_posts_link.
Une fois que vous avez ajouté l’extrait wp_pagenavi, voici à quoi ressemblerait la pagination des nombres:
Si vous souhaitez modifier l’apparence des couleurs et le style de pagination des numéros dans wp-pagenavi, vous devez vous rendre sur Paramètres »PageNavi. Décochez l’option permettant d’utiliser Utiliser pagenavi-css.css et enregistrez les modifications. Maintenant, allez à Plugins »Editeur. Dans le menu déroulant, sélectionnez et cliquez sur le bouton. L’éditeur chargera les fichiers du plugin dans la barre latérale droite. Cliquez sur pagenavi-css.css pour l’ouvrir dans l’éditeur puis copiez le contenu du fichier.
Ensuite, vous devez aller à Apparence »Éditeur et collez le contenu de pagenavi-css.css dans le fichier style.css de votre thème. Vous pouvez maintenant modifier la palette de couleurs et le style à partir d’ici. La raison pour laquelle nous copions le contenu css du plugin dans la feuille de style du thème est d’éviter la perte de changements de style au cas où vous mettriez à jour le plugin. Voici une version légèrement modifiée de la pagination numérique, n’hésitez pas à l’utiliser et à la modifier dans votre thème.
.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;
}
Voici à quoi cela ressemblerait:
Comme toujours, vous devriez expérimenter avec CSS. L’objectif doit être de faire correspondre le nombre de pagination à l’apparence des couleurs de votre site Web, afin qu’il se mélange bien et ne ressemble pas à un élément placé de manière étrange.
Nous espérons que cet article vous a aidé à ajouter et à afficher la pagination des numéros dans votre thème WordPress. Quelle méthode préférez-vous utiliser? Aimez-vous la pagination numérique ou préférez-vous la navigation précédente / suivante intégrée? Faites-le nous savoir dans les commentaires ci-dessous.
