Guide pour styliser le plugin WordPress WP-PageNavi

Si vous ne connaissez pas le plugin WordPress WP-PageNavi, sachez qu’il vous permet de remplacer la navigation normale (précédent/suivant) par une navigation par pagination numérotée plus avancée.

Dans ce tutoriel, nous allons voir comment.. :

• Installer WP-PageNavi et l’intégrer correctement dans votre thème.
• Deux méthodes pour désactiver et/ou remplacer les styles par défaut du plugin.
• Un aperçu du balisage HTML produit par WP-PageNavi.
• Enfin, comment modifier l’apparence de la navigation de votre page par le biais de CSS.

Installer le plugin

Vous avez deux options pour installer le plugin WP-PageNavi.

• Téléchargez-le depuis WordPress.org, téléchargez-le dans votre répertoire /wp-content/plugins/ et activez-le (à l’ancienne).
• En fonction de votre hébergeur, vous pouvez également installer automatiquement des plugins en les recherchant dans la page “Add New” sous Plugins dans votre panneau d’administration WordPress. Cherchez simplement “pagenavi” et vous devriez le trouver.

D’accord, c’était assez facile. Il est maintenant temps de se salir un peu les mains avec le code pour la partie intégration.

Intégration des thèmes

Dans l’intégration de notre thème, nous ne voulons pas que des erreurs soient affichées si le WP-PageNavi n’est pas actif. Au lieu de cela, nous allons nous assurer qu’il revient à l’ancien style de navigation précédent/suivant. Pour ce faire, nous utiliserons une vérification conditionnelle function_exists.

Disons qu’il s’agit de votre code de navigation WordPress normal (précédent/suivant) :

<div class="navigation">
	<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

Nous le modifierons comme suit :

<?php if (function_exists('wp-pagenavi')) { wp_pagenavi(); } else { ?><div class="navigation">
	<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div><?php } ?>

Il vérifie si WP-PageNavi est actif et si c’est le cas, il affiche le code de navigation de la nouvelle page. Si ce n’est pas le cas, il revient à la navigation normale précédente/suivante.

Remarque : selon la façon dont votre CSS est codé, vous voudrez peut-être placer la partie wp_pagenavi() ; à l’intérieur de la div “navigation” (ou équivalente). Gardez à l’esprit que WP-PageNavi produit une nouvelle classe appelée “wp-pagenavi” que nous pouvons utiliser pour styler séparément.

Styles de plugin de substitution

Par défaut, WP-PageNavi insère automatiquement un fichier CSS appelé pagenavi-css.css depuis son répertoire de plugins dans l’en-tête de votre site. Nous ne voulons pas que ces styles par défaut interfèrent avec nos propres styles personnalisés, nous allons donc nous en débarrasser complètement, et il y a deux façons simples de le faire.

• Ajouter un fichier CSS dans le répertoire de votre thème – C’est probablement la façon la plus simple de remplacer les styles par défaut de WP-PageNavi. Si vous avez un fichier appelé pagenavi-css.css dans votre répertoire de thème, WP-PageNavi l’utilisera à la place du fichier par défaut dans le répertoire du plugin.
• Ajoutez un extrait à votre fichier functions.php – L’extrait de code suivant que nous avons récupéré de WP Recipes désactivera complètement le comportement ci-dessus et n’inclura aucune feuille de style du plugin (que ce soit celle par défaut ou celle qui se trouve dans le répertoire de votre thème).

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

Il suffit de placer ce code dans le fichier functions.php de votre thème et d’ajouter les styles CSS à la feuille de style de votre thème (généralement style.css).

Note : Assurez-vous que le code est entouré de crochets comme <?php ... ?> si votre fichier de fonctions est actuellement vide.

Sélecteurs HTML et CSS de WP-PageNavi

Voici à quoi ressemble le balisage de WP-PageNavi. Dans l’exemple suivant, il y a quatre pages, actuellement à la page deux.

<div class="wp-pagenavi">
	<a href="http://example.com/" >Previous</a><a href="http://example.com/" class="page" title="1">1</a>
	<span class="current">2</span>
	<a href="http://example.com/?paged=3" class="page" title="3">3</a>
	<a href="http://example.com/?paged=3" >Next</a></div>
	<span class="extend">...</span>
	<a href="http://example.com/?paged=4" class="last" title="Last &raquo;">Last &raquo;</a>
</div>

Nous pouvons utiliser les sélecteurs CSS suivants pour cibler le balisage HTML ci-dessus :

• .wp-pagenavi – S’applique à l’ensemble de la div, utile pour les effacements CSS, le remplissage/la marge, les tailles de police et les styles (gras, italique, etc.).
• .wp-pagenavi a – Cible tous les liens à l’intérieur de la page de navigation, y compris les numéros de page et les liens précédent/suivant.
• .wp-pagenavi a.page – Cible spécifiquement les numéros de page
• .wp-pagenavi a.first – Cible spécifiquement le “premier” lien (non listé ci-dessus)
• .wp-pagenavi a.last – Cible spécifiquement le lien “dernier”.
• .wp-pagenavi span – Cible le numéro de la page en cours ainsi que la partie étendue (le truc avec trois points)
• .wp-pagenavi span.current – Cible spécifiquement le numéro de la page actuelle
• .wp-pagenavi span.extend – Cible spécifiquement l’extension (le truc avec trois points)
• .wp-pagenavi span.pages – Cible spécifiquement l’affichage du numéro de page (c.-à-d. Page 1 sur 4)

Note : Les liens précédent et suivant n’ont par défaut aucune classe CSS. Si vous voulez les différencier complètement des numéros de page et des liens premier/dernier, vous devrez réinitialiser tous les styles ajoutés au sélecteur .wp-pagenavi a. Si cela n’a pas de sens, jetez un coup d’œil à l’exemple suivant (très simplifié).

En voici un exemple : Supposons que vous souhaitiez que les liens précédent et suivant soient en gras, mais que tous les autres liens aient un poids normal. Vous devez procéder comme suit :

.wp-pagenavi a { font-weight: bold; } /* Previous and Next links only */
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last { font-weight: normal; } /* Other links */

À titre d’exemple, j’ai combiné les liens vers le numéro de page, le premier lien et le dernier lien en une seule règle. Bien entendu, vous pouvez les séparer et ajouter des styles plus spécifiques à chacun d’entre eux.

Ce serait beaucoup plus facile si une classe était ajoutée par défaut aux liens précédents/suivants, mais ce n’est pas le cas. Ce n’est pas très grave car il suffit de les réinitialiser de toute façon.

Vous pouvez utiliser .wp-pagenavi a.previouspostslink et .wp-pagenavi a.nextpostslink pour sélectionner les liens précédents et suivants, respectivement.

Ainsi, pratiquement tout ce qui précède jusqu’à la liste non ordonnée de sélecteurs n’est plus pertinent, mais nous le conserverons parce qu’il pourrait s’agir d’une leçon utile sur l’utilisation de CSS dans d’autres situations. L’exemple CSS ci-dessous s’applique toujours car nous n’avons pas utilisé ces sélecteurs de toute façon.

Un exemple de CSS

Voici un exemple d’un style PageNavi que nous avons construit :

Voici le code que nous avons utilisé pour obtenir cette apparence, le CSS à plusieurs lignes simples est facultatif :

.wp-pagenavi a, .wp-pagenavi span {
	padding: 5px; margin-right: 10px;
	font-size: 15px; color: #03719c; text-decoration: none;
	border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	background: #03719c;
	color: #fff;
	border: 3px solid #AFAFAF;
	}
.wp-pagenavi span.current { font-weight: bold; }

Et voici ce que cela signifie :

Première règle
Le .wp-pagenavi a, .wp-pagenavi span sélectionne tous les éléments de l’ancre et du span (à peu près tout) à l’intérieur de la div .wp-pagenavi.

• La première ligne de la règle définit un rembourrage de 5 px afin de ne pas être écrasé par la bordure gris clair (définie ci-dessous). Elle définit également une marge cohérente de 10px à droite de chaque élément, de manière à ce que l’espacement soit le même pour tous.
• La deuxième ligne définit une taille de police de 15 px, la couleur du texte est bleue et les liens ne sont pas soulignés.
• La troisième ligne définit une bordure grise solide de 3 px sur tous les éléments. Le code border-radius permet d’arrondir les angles.

Deuxième règle
Le .wp-pagenavi a:hover, .wp-pagenavi span.current sélectionne l’effet de survol du lien ainsi que le numéro de la page en cours, respectivement.

• La première ligne définit une couleur d’arrière-plan bleu foncé.
• La deuxième ligne rend le texte blanc.
• La troisième ligne donne une bordure légèrement plus foncée.

Troisième règle
Cette règle sélectionne (à nouveau) le numéro de la page en cours sans affecter l’effet de survol du lien (comme pour la deuxième règle). Le numéro de la page en cours devient une police de caractères gras.

La raison pour laquelle nous ne l’avons pas inclus dans l’effet de survol du lien est qu’il a un effet inégal en passant d’une police normale à une police en gras.

Note : Selon la façon dont votre CSS est codé, vous devrez peut-être utiliser des sélecteurs plus spécifiques. Par exemple, s’il existe des styles pour #content a et que votre WP-PageNavi se trouve dans la div content, vous devrez peut-être réécrire votre CSS PageNavi comme #content .wp-pagenavi a et remplacer tous les autres styles moins spécifiques.

Conclusion

Nous savons qu’il s’agit d’un exemple relativement simple, mais vous pourriez utiliser des règles CSS beaucoup plus avancées pour différencier encore davantage les divers liens et autres éléments. J’espère que vous avez également appris quelques astuces CSS en cours de route.

L’intégration optionnelle de WP-PageNavi est une fonctionnalité très intéressante que les développeurs de thèmes pourraient intégrer dans leurs thèmes. Avec la méthode d’intégration décrite ci-dessus, les utilisateurs peuvent facilement choisir de l’utiliser ou non, et cela pourrait être une option intéressante pour de nombreux blogs.

Vous pouvez consulter nos guides et tutoriels :

• Les meilleurs plugins WordPress de menu déroulant (comparés)
• Comment créer un menu de navigation en utilisant Bootstrap
• Comment ajouter une navigation personnalisée dans BuddyPress

Ces articles vous aideront à trouver d’autres solutions que vous pourriez rechercher.