Guide pour styliser le plugin WordPress WP-PageNavi

Si vous n'êtes pas familier avec le plugin WordPress WP-PageNavi, il vous permet de remplacer la navigation normale précédent/suivant par une navigation de pagination numérotée plus avancée.

Dans ce tutoriel, nous allons aborder 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 généré par WP-PageNavi
• Enfin, comment modifier l'apparence de votre navigation de page via CSS

Installer le plugin

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

• Téléchargez-le depuis WordPress.org, téléversez-le dans votre répertoire /wp-content/plugins/, et activez-le (la méthode classique).
• Selon votre hébergeur, vous pouvez également installer automatiquement des plugins en les recherchant dans la page « Ajouter » sous Plugins dans votre panneau d'administration WordPress. Recherchez simplement « pagenavi » et vous devriez le trouver.

Bon, cela aurait dû être assez facile. Il est maintenant temps de mettre un peu les mains dans le cambouis pour la partie intégration.

Intégration au thème

Lors de l'intégration à notre thème, nous ne voulons jamais qu'aucune erreur ne s'affiche si WP-PageNavi n'est pas actif. Au lieu de cela, nous nous assurerons qu'il se rabat sur l'ancienne navigation de type précédent/suivant. Pour ce faire, nous utiliserons une vérification conditionnelle function_exists.

Supposons que voici votre code de navigation WordPress précédent/suivant habituel :

<div class="navigation">
	<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>

Nous allons le modifier comme suit :

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

Cela vérifie essentiellement si WP-PageNavi est actif et si c'est le cas, il affiche le nouveau code de navigation de page. Sinon, il se rabat gracieusement sur la navigation précédente/suivante normale.

Veuillez noter : Selon la façon dont votre CSS est codé, vous pourriez vouloir placer la partie wp_pagenavi(); à l'intérieur de la div « navigation » (ou équivalent). Gardez à l'esprit que WP-PageNavi génère une nouvelle classe appelée « wp-pagenavi » que nous pouvons utiliser pour styliser séparément.

Ignorer les styles du plugin

Par défaut, WP-PageNavi insère automatiquement un fichier CSS appelé pagenavi-css.css depuis son répertoire de plugin 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 les supprimer complètement, et il existe deux façons simples de le faire.

• Ajoutez un fichier CSS à votre répertoire de thème – C'est probablement le moyen le 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 de celui par défaut dans le répertoire du plugin.
• Ajoutez un extrait à votre fichier functions.php – L'extrait de code suivant, que nous avons tiré de WP Recipes, désactivera complètement le comportement ci-dessus et n'inclura aucun fichier de style du plugin (ni celui par défaut, ni un remplacement dans votre répertoire de thème).

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

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

Placez simplement ce code dans le fichier functions.php de votre thème et ajoutez les styles CSS à la feuille de style régulière de votre thème (généralement style.css).

Remarque : Assurez-vous que le code est entouré d'accolades comme <?php ... ?> si votre fichier functions est actuellement vide.

Balisage HTML et sélecteurs CSS de WP-PageNavi

Voici à quoi ressemble le balisage de WP-PageNavi. Dans l'exemple suivant, il y a quatre pages, actuellement sur 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 »">Last »</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 clears CSS, le padding/marge, les tailles et styles de police (gras, italique, etc.)
• .wp-pagenavi a – Cible tous les liens à l'intérieur de la navigation de page, 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 le lien « premier » spécifiquement (non listé ci-dessus)
• .wp-pagenavi a.last – Cible le lien « dernier » spécifiquement
• .wp-pagenavi span – Cible le numéro de page actuel ainsi que la partie d'extension (la chose avec trois points)
• .wp-pagenavi span.current – Cible spécifiquement le numéro de page actuel
• .wp-pagenavi span.extend – Cible spécifiquement l'extension (la chose avec trois points)
• .wp-pagenavi span.pages – Cible spécifiquement l'affichage du numéro de page (par exemple, Page 1 sur 4)

Note : Les liens précédent et suivant n'ont par défaut aucune classe CSS. Si vous souhaitez 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, regardez l'exemple (très simplifié) suivant.

Par exemple : Supposons que vous vouliez que les liens précédent et suivant soient en gras, mais que tous les autres liens aient un poids normal. Vous devriez faire ce qui 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 */

J'ai combiné les liens de numéros de page, le lien premier et le lien dernier en une seule règle à des fins d'exemple. Bien sûr, vous pouvez les séparer et ajouter des styles plus spécifiques à chacun.

Ce serait beaucoup plus facile s'il y avait une classe ajoutée aux liens précédent/suivant par défaut, mais il n'y en a pas. Ce n'est pas un gros problème car vous pouvez simplement les réinitialiser de toute façon.

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

Donc, à peu près tout ce qui précède jusqu'à la liste non ordonnée des sélecteurs n'est plus pertinent, mais nous le garderons car cela pourrait être une leçon utile pour remplacer le CSS dans d'autres situations. L'exemple CSS ci-dessous s'appliquera toujours car nous n'avons pas utilisé ces sélecteurs de toute façon.

Un exemple CSS

Voici un exemple de style PageNavi que nous avons créé :

Voici le code que nous avons utilisé pour obtenir ce look, le CSS multi-lignes 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 tout cela signifie :

Première règle
Le sélecteur .wp-pagenavi a, .wp-pagenavi span sélectionne tous les éléments d'ancrage et span (pratiquement tout) à l'intérieur de la div .wp-pagenavi.

• La première ligne de la règle définit un espacement de 5px afin qu'il ne soit pas collé à la bordure gris clair (définie ci-dessous). Elle définit également une marge cohérente de 10px à droite de chaque élément pour un espacement égal entre eux.
• La deuxième ligne définit une taille de police de 15px, rend la couleur du texte bleue et s'assure que les liens n'ont pas de soulignement.
• La troisième ligne définit une bordure grise solide de 3px sur tout. Le code border-radius rend les coins arrondis.

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

• La première ligne définit une couleur de fond 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
Ceci sélectionne le numéro de la page actuelle (encore) sans affecter l'effet de survol du lien (comme la deuxième règle). Cela rend simplement le numéro de la page actuelle en gras.

La raison pour laquelle nous ne l'avons pas inclus avec l'effet de survol du lien est qu'il a un effet inégal passant d'une graisse de police normale à grasse.

Remarque : 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 à l'intérieur de la div de contenu, vous devrez peut-être réécrire votre CSS PageNavi comme #content .wp-pagenavi a et remplacer tout autre style moins spécifique.

Conclusion

Nous savons que c'était un exemple relativement simple, vous pourriez avoir des règles CSS beaucoup plus avancées pour différencier encore plus les divers liens et autres éléments. Espérons que vous avez également appris quelques astuces CSS en cours de route.

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

Vous voudrez peut-être consulter nos guides et tutoriels :

• Les meilleurs plugins de menus déroulants WordPress (comparés)
• Comment créer un menu de navigation à l'aide de Bootstrap
• Comment ajouter une navigation personnalisée dans BuddyPress

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