Guide de conception du plugin WordPress WP-PageNavi

Lo cambiaremos a lo siguiente:






	



	



	



	



Fondamentalement, cela vérifie si WP-PageNavi est actif, et si c’est le cas, il affiche le nouveau code de navigation de page.  Sinon, il revient gracieusement à la navigation précédente/suivante normale.
Gardez à l’esprit: Selon la façon dont votre CSS est codé, vous pouvez mettre wp_pagenavi();  partie à l’intérieur de la div “navigation” (ou équivalent).  Notez que WP-PageNavi crée une nouvelle classe appelée “wp-pagenavi” que nous pouvons utiliser pour le style séparément.
Remplacer les styles de plug-in
Par défaut, WP-PageNavi insère automatiquement un fichier CSS appelé pagenavi-css.css de votre 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 existe deux façons simples de le faire.

Ajouter un fichier CSS à votre répertoire de thème – C’est probablement le moyen le plus simple de remplacer les styles WP-PageNavi par défaut.  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 des plugins.
Ajoutez un extrait à votre fichier functions.php – L’extrait de code suivant que j’ai récupéré de WP Recipes désactivera complètement le comportement ci-dessus et n’inclura aucune feuille de style de plug-in (soit la valeur par défaut, soit 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 de votre thème normal (généralement style.css).
Noter: Assurez-vous que le code est entre crochets comme  si votre fichier de fonctions est actuellement vide.
Balisage HTML WP-PageNavi et sélecteurs CSS
Voici à quoi ressemble le balisage WP-PageNavi.  Dans l’exemple ci-dessous, il y a quatre pages, actuellement sur la page deux.
	...
	Last »

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

• .wp-pagenavi – S’applique à l’ensemble de la div, utile pour les brouillons CSS, le rembourrage/la marge, les tailles de police et les styles (gras, italique, etc.)
• .wp-pagenavi a – Pointe vers tous les liens dans la navigation de la page, y compris les numéros de page précédents/suivants.
• .wp-pagenavi a.page – cible spécifiquement les numéros de page
• .wp-pagenavi a.first – cible spécifiquement le “premier” lien (non mentionné ci-dessus)
• .wp-pagenavi a.last – cible spécifiquement le “dernier” lien
• .wp-pagenavi span – Pointe vers le numéro de page actuel avec 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 (chose à trois points)
• .wp-pagenavi span.pages – cible spécifiquement l’affichage du numéro de page (c’est-à-dire la page 1 sur 4)

Noter: Les liens précédents et suivants, par défaut, n’ont aucune classe CSS. Si vous voulez qu’ils soient complètement distincts des numéros de page et des premiers/derniers liens, ils devront réinitialiser les styles ajoutés au sélecteur .wp-pagenavi. Si cela n’a pas de sens, jetez un œil à l’exemple suivant (vraiment simplifié).

Par exemple: Supposons que vous souhaitiez que les liens précédents et suivants soient en gras, mais que tous les autres liens aient un poids normal. Il devrait 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éro de page, le premier lien et le dernier lien en une seule règle à titre 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édents/suivants par défaut, mais ce n’est pas le cas. Ce n’est pas grave car vous pouvez les réinitialiser de toute façon.

Mise à jour importante : Grâce à une mise à jour scribu dans les commentaires, il s’avère que la nouvelle version de WP-PageNavi a des classes prev/next (grâce en partie à Yoast).

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

Donc à peu près tout ce qui précède jusqu’à ce que la liste non ordonnée de sélecteurs ne soit plus pertinente, mais je la garderai simplement parce que cela pourrait être une leçon utile pour remplacer CSS dans d’autres situations. L’exemple CSS suivant s’appliquera toujours, car je n’ai pas utilisé ces sélecteurs de toute façon.

Un exemple de CSS

Voici un exemple de style PageNavi que j’ai créé à partir du thème Blogwave.

Voici le code que j’ai utilisé pour obtenir ce look, le CSS multiligne 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
L’étendue .wp-pagenavi a, .wp-pagenavi sélectionne tous les éléments d’ancrage et d’étendue (à peu près tout) dans la div .wp-pagenavi.

• La première ligne de la règle définit un rembourrage de 5 pixels afin qu’elle ne soit pas encombrée contre la bordure gris clair (définie ci-dessous). Il définit également une marge cohérente de 10 pixels à droite de chaque élément afin qu’il y ait un espacement égal entre chaque élément.
• La deuxième ligne définit une taille de police de 15 pixels, rend le texte bleu et s’assure que les liens ne sont pas soulignés.
• La troisième ligne définit une bordure grise solide de 3 pixels sur tout. Le code de rayon de bordure arrondit les coins.

Deuxième règle
Le .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
Cela sélectionne (encore une fois) le numéro de la page actuelle sans affecter également l’effet de défilement du lien (comme la deuxième règle). Cela fait simplement du numéro de page actuel un poids de police en gras.

La raison pour laquelle je ne l’ai pas inclus avec l’effet de survol du lien est qu’il a un effet saccadé qui va de normal à gras.

Noter: 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 et que votre WP-PageNavi se trouve dans la div content, vous devrez peut-être réécrire votre CSS PageNavi en tant que #content .wp-pagenavi et remplacer tout style moins spécifique.

conclusion

Je sais que c’était un exemple relativement simple, il aurait pu avoir des règles CSS beaucoup plus avancées pour différencier davantage les différents liens et autres éléments. J’espère que vous avez également appris quelques conseils CSS en cours de route.

L’intégration facultative de WP-PageNavi est une fonctionnalité plutôt intéressante que les développeurs de thèmes pourraient intégrer à leurs thèmes. Avec la méthode d’intégration que j’ai décrite ci-dessus, les utilisateurs peuvent facilement choisir de l’utiliser ou non, et cela pourrait convenir à de nombreux blogs.

J’espère que vous avez tous apprécié le didacticiel, et si vous avez des demandes pour de futurs didacticiels WordPress ou des suggestions CSS, veuillez me le faire savoir dans les commentaires.