Navigation de page pour WordPress à l'aide du plugin WP-PageNavi. Navigation de page WordPress sans plugin

Populaire W.P.PageNavi facile à configurer, facilement intégré à WordPress et a une apparence soignée.

Salut tout le monde! Comme toujours, je suis très heureux que vous ayez visité les pages. Aujourd'hui, nous parlerons d'amélioration navigation dans les pages du blog. Pour une raison quelconque, les développeurs de WordPress n’ont pas initialement pris en compte ce problème. Je ne sais pas, peut-être pensaient-ils qu’un blog classique devait être composé de deux ou trois douzaines d’entrées.

Voici à quoi ressemble la navigation des pages sur un blog WP sans aucun plugin :

Et comme ceci - si vous faites défiler la page principale :

D'accord, ce n'est pas très pratique. Et il y a peu de beauté là-dedans. Les paramètres par défaut de WordPress indiquent que la page principale affiche uniquement les 10 derniers articles ; les articles précédents peuvent être consultés en faisant défiler « Suivant » ou « Précédemment ». Et s’il y avait deux cents entrées de blog ? Et j'aimerais voir ce que l'auteur a écrit au début. Ce serait beaucoup de défilement ! Si seulement... si de bonnes personnes n'avaient pas inventé des plugins de navigation de page.

WP PageNavi – un plugin pour le confort des lecteurs

Les deux plugins de navigation de page les plus courants dans RuNet sont : Numéros de page WP Et W.P.PageNavi. Ils sont très similaires, alors décidez vous-même quoi mettre sur votre blog..ru, je mettrai PageNavi. Juste un message de l'administration à Page Officielle Le plugin n'inspire pas beaucoup d'optimisme :

Pour ceux qui, comme moi, ne sont pas bons en anglais, le message ressemble à ceci : « Le plugin n'a pas été mis à jour depuis 2 ans, il peut donc y avoir des problèmes de compatibilité avec les nouvelles versions de WordPress. »

En général, de nombreuses versions de WordPress disposent déjà du plugin PageNavi, mais il n’est pas configuré, donc il ne fonctionne pas. Recherchez dans vos plugins une ligne intitulée « Liste des pages »

J'ai écrit dans l'article comment installer les plugins (à ne pas confondre avec « activer »). Seul point : si vous téléchargez d'abord le plugin sur votre ordinateur (on ne sait jamais, peut-être décidez-vous d'abord de le vérifier pour les virus ou autre chose), avant de l'installer sur WP, ne décompressez pas le plugin, mais laissez-le dans le . dossier d'archive zip. – alors de nombreux plugins décompressés ne sont pas installés via le panneau d’administration.

Vous pouvez bien sûr procéder dans l’autre sens. À travers gestionnaire de fichiers téléchargez l'archive du plugin décompressée (dossier) sur le serveur dans le dossier approprié de votre blog.

D'ailleurs, FileZilla est un excellent gestionnaire de fichiers, je l'utilise moi-même et je vous en parlerai certainement dans les prochains articles. Abonnez-vous aux mises à jour de mon blog - vous serez au courant de toutes les choses utiles.

Mise en place du plugin WP PageNavi : changer le code

Vous avez donc installé le plugin (s'il n'était pas inclus dans le package initial) sur votre blog WordPress. Il faut maintenant l'activer. Cela se fait en un clic sur le bouton « Activer » (le chemin est : Panneau d'administration – Plugins – Installés – « Liste des pages » – « Activer »).

«Paramètres» apparaîtra dans le menu administrateur nouvelle ligne"Liste des pages"

La prochaine étape peut poser des difficultés aux débutants - nous modifierons légèrement le code dans plusieurs fichiers de thème de votre blog WP. Pour cela, nous avons besoin d'un simple bloc-notes, ou encore mieux, ++, car il est très simple de travailler avec des fichiers qu'il contient et il est possible de tout restaurer. Vous aurez également besoin d'un fichier Gestionnaire FileZilla(J'en ai parlé un peu plus haut) - si votre blog est déjà hébergé, et sinon, alors Notepad++ suffira.

Tous les thèmes téléchargés sur votre blog se trouvent dans le répertoire racine du dossier WP-content/themes/your theme. Dans votre thème, recherchez les fichiers index.php et archive.php. Quelqu'un peut également avoir un fichier de recherche search.php dans son thème.

Ensuite, nous glissons (copions) ces fichiers sur votre ordinateur (si vous êtes déjà en hébergement) ou ouvrons simplement les fichiers via Bloc-notes++. Mais dans les deux cas, n’oubliez pas de faire des copies de sauvegarde – c’est toujours fait par mesure de sécurité.

Alors, ouvrez le fichier index.php avec l'éditeur et recherchez-y les lignes de code qui sont chargées de naviguer dans les pages.

Dans chaque sujet, les codes diffèrent bien entendu dans les détails. Cela pourrait être comme ceci :

’)); ?>;

Ou comme ça

Page suivante’) ??>

Dans le thème dans lequel je vais insérer le code du plugin issu de la navigation initiale ressemble à ceci :

Autrement dit, vous comprenez que les modèles et les codes sont différents. Mais vous pouvez toujours comprendre quelles lignes sont responsables de la navigation dans les pages. Petit secret, cependant, cela ne fonctionne pas dans tous les thèmes :

Si vous ne trouvez pas zone requise code ou si vous doutez que ce soit lui, tapez index.php dans le fichier ouvert dans Notepad++ dans la recherche (icône jumelles dans ligne supérieure) nav et cette combinaison de lettres sera affichée dans le document.

Une fois que vous avez trouvé code requis, on le change (on ne l'ajoute pas, mais on remplace tout le bloc) avec le code du plugin WP PageNavi :

Enregistrez le fichier et déposez-le dans le dossier du thème. Actualisez ensuite la page d'accueil de votre blog et voilà :

Comme vous pouvez le constater, l’image des pages est de travers : plaquée contre le bord gauche. Pour résoudre ce problème, j'ai centré le fichier . Pour ce faire, le code du plugin est enfermé dans une balise

avec l'attribut align. Comme ça:

Cela s'est passé comme ceci :

Vous faites les mêmes manipulations avec le code des fichiers archive.php search.php.

Mise en place du plugin WP PageNavi : affichage d'une liste de pages

Maintenant quoi? Le plugin a été téléchargé, activé, intégré aux fichiers du thème – autre chose ? Oui. Vous devez maintenant personnaliser l'apparence de la navigation dans les pages. Pour cela, rendez-vous dans les paramètres du plugin WP PageNavi dans le panneau d'administration de WordPress. La page dont nous avons besoin se trouve dans : Admin/Options/Liste des pages. Ici, vous pouvez configurer la structure d'affichage des pages. Ou vous pouvez tout laisser tel quel – c’est à vous de décider. Je vais vous dire brièvement ce qui se passe ici.

Les paramètres sont divisés en deux parties : « Modèles de liste de pages » et « Paramètres de liste de pages ».

WP Page Navi – Modèles de liste de pages

Voici la première partie des paramètres

L'élément n°1 (première ligne) est la vue de cette partie de la liste :

Ici, vous pouvez rendre la fenêtre vide si vous pensez que l'entrée « page 5 sur 14 » gâche l'apparence. Vous pouvez supprimer le mot « page ». Je vais probablement supprimer complètement ce message. Je pense qu'elle est superflue.

Élément n°2 – « Page actuelle" Cet élément (cadre, couleur) met en valeur la page sur laquelle le blog est ouvert. Si ce champ est laissé vide, l'apparence de la page actuelle ne se démarquera pas des autres.

Élément n°3 – « Page ». Si vous laissez ce champ vide, seul le numéro de la page actuelle sera visible dans la navigation - la liste des autres pages sera masquée.

Élément n°4 – « Première page ». Ici, vous pouvez mettre « premier », « au début » ou quelque chose comme ça. Lorsque votre blog a beaucoup de pages (100-200) et que vous regardez une 130ème page et que vous souhaitez revenir à la première, à gauche de la liste des pages il y aura un bouton avec le mot « premier », « Au début".

Élément n°5 – « dernière page" Tout est pareil, seulement pour la dernière page.

Élément n° 6 – « Page précédente » et « Page suivante ». Flèches pour avancer ou reculer d'une page. J'ai essayé d'insérer d'autres signes - soit ce n'est pas correct, soit ils ne fonctionnent tout simplement pas.

Élément n° 7 – « Précédent… » et « Suivant… ». Si je comprends bien, ce ne sont pas des boutons, mais simplement un élément d'information. Je vais vous expliquer maintenant.

Comme vous pouvez le voir sur l'image, dans les paramètres j'ai défini le champ « Nombre de pages à afficher » (je parlerai de ces paramètres ci-dessous) sur « 3 ». Et j'ai une ligne de seulement trois pages affichées. Et le carré blanc (qui est justement l'élément n°7) montre que plus loin (ou plus près) il y a encore des pages qui ne sont pas affichées actuellement. Cela semble clair.

Paramètres de la liste de pages

Passons à la deuxième partie des paramètres du plugin WP Page Navi.

Élément n°8 – « Utilisez le style pagenavi-css.css. » Si vous ne cochez pas (ou supprimez, si elle était cochée) la case ici, alors, tout d'abord, l'affichage de la page ressemblera à ceci :

Et deuxièmement, vous ne pouvez pas modifier le style d'affichage de la liste en modifiant le fichier de style du plugin. Donc c'est mieux avec une tique.

Élément n° 09 – « Style de liste de pages ». Régulier ou déroulant. Je n’ai pas du tout aimé le menu déroulant, alors j’ai laissé le menu normal.

Élément n°10 – « Toujours afficher une liste de pages. » Une fonctionnalité assez inutile.

Élément n°11 – « Nombre de pages à afficher ». Heureuses pages qui seront affichées. Mettez 3 – ce sera « 1,2,3... suivant », mettez 10 – ce sera « précédent... 4,5,6,7,8,9,10,11,12,13.. .subséquent". Je vois, je pense.

Élément n° 12 – « Plage de pages à afficher. » Quel que soit le numéro que vous inscrivez dans cette case, le nombre de pages qui ne sont pas incluses dans la liste des pages continues (élément n°13) sera affiché. Par exemple, mettez 5, la liste ressemblera à ceci :

"premier... 4,5,6,7,8... 21,22,23,24,25... dernier"

Élément n° 13 – « Coefficient pour les plages de pages ». Il s'agit d'une étape pour les pages de l'élément n°14. Si vous en mettez par exemple 5 dans les cases n°13, 14 et 15, tout ressemblera à ceci :

"premier... 4,5,6,7,8... 20,25,30,35,40... dernier"

Ça y est, nous avons enfin compris les paramètres plugin de navigation de page de nom W.P.PageNavi.

Tout mais pas tout. Vous pouvez faire autre chose d’utile et de beau.

Modification de pagenavi-css.css

Je n'entrerai pas dans les détails ici. Pour les débutants, creuser seul ici est une forêt sombre et dangereuse.

Mais vous pouvez toujours essayer d’apporter de petites modifications. Par exemple, ceux-ci :

J'ai créé un arrière-plan pour les nombres en ajoutant au conteneur wp-pagenavi a, .wp-pagenavi span la couleur d'arrière-plan background-color: #bbbbbb;

J'ai augmenté la taille des chiffres de la page actuelle en ajoutant font-size: 150% au conteneur wp-pagenavi span.current.

Toi aussi. Si vous le souhaitez, vous pouvez expérimenter. Assurez-vous simplement de le faire en premier copie de sauvegarde afin que plus tard, si quelque chose se produit, vous puissiez remplacer les résultats de votre expérience par le code source.

Je termine ici, j'en ai déjà marre d'écrire :)

Alors aujourd'hui, nous avons regardé plugin de navigation de pageW.P.PageNavi. J'espère avoir tout expliqué en détail. Mais si quelque chose se produit, demandez, nous réglerons le problème.

Bonjour, lecteurs du blog ! Standard Navigation dans les pages WordPress se résume uniquement à la possibilité de passer à la page suivante ou de revenir à la page précédente avec les annonces d'articles. Aucune numérotation de page n'est visuellement visible - ce n'est pas pratique. Vous pouvez corriger la situation en utilisant le plugin WP-PageNavi ou ses WP Page Numbers analogiques. Le troisième plugin que je vais examiner aujourd'hui, Number My Post Pages, vous permet de présenter les informations d'un seul article page par page.

Installation et configuration de WP-PageNavi et de ses styles

2. Décompressez et téléchargez le dossier contenant les fichiers du plugin dans le répertoire wp-content/plugins du serveur à l'aide du fichier .

3. Activez-le, dans la liste des plugins il se porte sous le nom « liste des pages ».

4. Vous devez maintenant remplacer code standard pour la navigation dans les pages des modèles index.php, archive.php et search.php vers un nouveau :

Le type de code peut varier légèrement d'un sujet à l'autre, recherchez donc une construction contenant les lignes next_posts_link et previous_posts_link.

Dès que vous remplacez le code, le plugin WP-PageNavi commencera à fonctionner. Tous les paramètres du plugin sont en russe et sont clairement décrits, donc les comprendre ne sera pas difficile. Ils se trouvent dans la section « Plugins » - « liste des pages ».

Pour personnaliser l'apparence, vous devez modifier le fichier de styles du plugin WP-PageNavi - wp-pagenavi/pagenavi-css.css. Pour ce faire, allez dans la section « Plugins » - « Éditeur », sélectionnez WP-PageNavi comme plugin à modifier et recherchez le fichier avec la résolution .css dans la liste.

Bien entendu, pour personnaliser les styles de navigation des pages, vous devez au moins connaître Bases CSS. Afin de ne pas perdre de temps à l'étudier (même si tôt ou tard vous devrez apprendre au moins le html et le css), vous pouvez utiliser le plugin Style WP PageNavi, qui propose des styles prêts à l'emploi pour tous les goûts.

WP PageNavi Style est standard, vous n’avez rien à spécifier dans le thème. Téléchargez simplement la dernière version depuis WordPress.org. Après activation, une nouvelle section du même nom est créée dans le panneau d'administration WordPress.

Regardons les paramètres de base, ils ne sont pas nombreux.

L'option Sélectionner une feuille de style vous permet de basculer entre les styles existants et la possibilité de les créer vous-même (personnalisés).

Le choix de styles est très large, même vos yeux sont fous. Les styles CSS3 sont particulièrement beaux. Je pense que chacun trouvera quelque chose d'intéressant pour lui-même. Après sélection aspect visuel navigation dans la page, définissez son emplacement - Aligner la navigation : gauche - à gauche, droite - à droite et centre - au centre.

Voyons maintenant les options que la section Personnalisée nous offre.

Couleur de l'en-tête : couleur de l'en-tête, vous n'avez pas besoin de la connaître Code HTML couleurs, cliquez simplement sur le champ et sélectionnez-le visuellement ;
Couleur d'arrière-plan - couleur d'arrière-plan ;
Couleur d'arrière-plan active/actuelle — arrière-plan boutons pour la page actuelle (actifs);
Taille de la police — taille de la police ;
Couleur du lien - couleur du lien ;
Lien survol de la souris / Couleur active— la couleur du lien lorsque vous passez le curseur de la souris dessus ;
Link Border Color — couleur de la bordure du bouton avec le numéro de page ;
Survol de la souris avec bordure de lien/couleur active— couleur de la bordure lorsque vous passez le curseur de la souris sur le bouton ;
Aligner la navigation - alignement sur la page : centre, gauche ou droite.

WP-PageNavi ne fonctionne pas

Je suis aussi tombé sur le fait que le plugin WP-PageNavi ne fonctionne pas.

1. Le plugin WP-PageNavi n'est pas activé. Vous utilisez probablement un thème particulièrement avancé qui utilise déjà la navigation par pages numérotées. Ajoutez plusieurs articles à votre blog pour voir la navigation par défaut du blog. Très probablement, il est réalisé dans le style du thème utilisé et rien n’a besoin d’y être modifié. Si vous ne l'aimez pas, nettoyez les modèles de thème du code de navigation de la page, le plugin WP-PageNavi devrait alors être activé.

2. WP-PageNavi activé page d'accueilça marche mal— les pages ne changent pas, des erreurs sont générées ou le contenu des pages ne change pas. Cela est encore une fois lié au thème WordPress utilisé.

Ouvrez le modèle index.php pour le modifier et recherchez le code responsable de l'affichage des enregistrements :

…

Remplacez-le par le code suivant :

…

Vérifiez la fonctionnalité de WP-PageNavi.

3. Si cela ne résout pas le problème, vous pouvez utiliser un plugin alternatif - Numéros de page WP.

Plugin de numéros de page WP

L'installation du plugin WP Page Numbers est similaire à l'installation de WP-PageNavi décrite ci-dessus, seul un code légèrement différent est utilisé :

Les paramètres du plugin se trouvent dans la section « Options » - « Numéros de page ».

WP Page Numbers vous propose 5 styles de navigation de page WordPress parmi lesquels choisir. Bien sûr, comparé à la variété des styles de style WP-PageNavi, cela semble maigre, mais les thèmes sont universels et conviennent parfaitement à la plupart des blogs.

Parmi les autres paramètres, j'ai uniquement remplacé les valeurs de « Page » par « Page » et la préposition « of » par « from ».

Plugin Numéroter mes pages de publication

Le dernier plugin de ma collection s'appelle Numéroter mes pages de publication et est conçu pour créer une navigation de page dans une seule publication. Cela vous sera utile si le volume de matériel sur une page de blog est très important, et il est préférable de le présenter page par page pour la commodité du lecteur.

1. Téléchargez le plugin Number My Post Pages.

2. Décompressez l'archive et transférez le dossier contenant les fichiers du plugin vers le répertoire wp-content/plugins via FTP.

3. Activez le plugin Number My Post Pages.

4. Ajoutez single.php et page.php aux modèles utilisés Thèmes WordPress le code suivant :

Pour diviser le contenu d'un article en pages, utilisez la balise :

Les paramètres du plugin Number My Post Pages se trouvent à l'adresse « Options » - « Number Post Pages ».

Texte pour le nombre de pages - texte pour le nombre de pages.
Afficher le « Texte pour le nombre de pages »— s'il faut afficher ou non le « texte pour le nombre de pages ».
Nombre de pages après la page actuelle— nombre de pages après la page actuelle.
Nombre de pages avant la page actuelle— nombre de pages avant la page actuelle.
Texte pour la page suivante - texte du bouton pour passer à la page suivante.
Texte de la page précédente — texte du bouton pour accéder à page précédente.
Utiliser la feuille de style par défaut – s'il faut utiliser un thème standard.
Show Dropdown est ce qu'on appelle une liste déroulante qui affiche une liste de tous les numéros de page.
Toujours afficher la navigation : affiche toujours la navigation, même si le contenu de l'article n'est pas paginé.

Navigation dans les pages est quelque chose auquel chaque blogueur devrait accorder une attention particulière. Il consiste à afficher Articles WordPress sur une base page par page. En règle générale, les entrées sont affichées dans un ordre hiérarchique et, même si vous disposez d'options de sélection telles que Anciennes entrées et Nouvelles entrées, vous n'avez pas la possibilité d'afficher les entrées page par page avec des pages numérotées.

Grâce à la navigation par page, l'utilisateur peut accéder directement à la page 6 ou 8 sans avoir à naviguer de page en page. Cette navigation est également utile pour le référencement ; les moteurs de recherche préfèrent cette navigation ; elle permet aux robots de naviguer facilement dans les publications sur les pages du site. Utiliser gratuitement Plugins WordPress, donné dans cet article, vous pouvez installer la navigation par pagination sur votre site Web.

1 – Navigateur de pages WP

Navigateur de pages WP est un plugin populaire qui permettra aux visiteurs de votre site Web de se déplacer facilement de page en page. Il remplacera l’option Anciens messages/Nouveaux messages par une navigation paginée. Le plugin ne nécessite pas de grosses ressources et n'affecte pas la vitesse de chargement des pages.

Ce plugin est compatible avec la plupart des thèmes existants.

Nécessite peu de ressources.
Optimisé pour le référencement.
Très populaire.

2 – WP Paginer

Ce plugin est un bon moyen d'ajouter une navigation par pagination à votre site WordPress, avec lui, vous pouvez ajouter une pagination numérique pour afficher les nombres. page d'accueil, page du milieu et page de fin.

Avec lui, vous pouvez même ajouter une navigation à travers les commentaires aux publications, cela facilitera le chargement de la page.