Bonne journée, chers amis! Aujourd'hui, nous allons parler avec vous de la façon de créer une chose aussi belle et pratique sur WordPress que naviguer dans les pages en utilisant le plugin WP-PageNavi ou un code simple. Je ne sais pas pour vous, mais personnellement, je n'aime pas du tout la navigation intégrée dans le moteur WordPress.

De quel type de navigation s'agit-il ? D'accord, si le blog était encore jeune et qu'il n'y aurait pas autant d'articles dessus, mais que se passerait-il s'il y en avait déjà plus de 200 à 300 ? Dans ce cas, une navigation comme celle-ci peut facilement effrayer nombre de vos lecteurs, car personne ne veut cliquer sur le bouton "post précédent" jusqu'à ce qu'il perde son pouls pour accéder au contenu souhaité. De plus, cette inscription semble si imperceptible qu'elle peut tout simplement ne pas être vue, ce qui conduira à terme à une diminution des pages vues par visiteur, et du temps passé sur le site, et cela est désormais très présent dans la promotion de tout site qui Ne peut pas être ignoré. Donc, si vous allez toujours faire de la pagination, vous pouvez utiliser l'une des méthodes présentées ci-dessous.

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

Méthode 1. Téléchargez le plugin WP-PageNavi ici et téléchargez-le sur le blog, activez-le, allez dans les "paramètres" "liste des pages" dans l'administrateur du blog. Ici, nous devons configurer un seul paramètre - le "nombre de pages à afficher". J'ai personnellement mis 10 pour rendre ma navigation très visible aux visiteurs. Au fait, si tout d'un coup votre pagination ne rentre pas dans le template de votre thème, c'est-à-dire si elle ressemble à ceci :

alors vous pouvez simplement réduire ce nombre ou, mieux encore, supprimer l'inscription "page" des paramètres du plugin et les remplacer par des flèches. Ok, après cela, nous cliquons sur enregistrer et nous observons comment nous avons une pagination simple sur le blog. Si cela ne se produit pas, allez dans l'éditeur "apparence", ouvrez le fichier de modèle principal (index.php) et recherchez quelque chose comme ce code : ou quelque chose comme ça et changez-le en: , enregistrez l'enregistrement.

Nous effectuons la même opération avec les fichiers archive.php et search.php si vous souhaitez que cette navigation soit non seulement sur la page principale, mais aussi dans des rubriques séparées et lors de la recherche. Bon, je tiens à vous avertir pour chaque pompier que ce plugin ne fonctionne pas pour tout le monde, donc si rien n'a fonctionné pour vous, vous pouvez installer un plugin similaire pour vous-même WP-Page Numbers. Si vous l'installez, vous devrez également insérer un code spécial dans les mêmes fichiers.

Beau style pour le plugin de navigation de page WP-PageNavi et WP-Page Numbers.

Vous avez probablement déjà remarqué que ma pagination est bien meilleure et plus attrayante que la vôtre. Cela est dû au fait que j'ai un plugin supplémentaire de style WP-Page Numbers , qui fonctionne à la fois pour WP-PageNavi et WP-Page Numbers. Si tout à coup vous êtes dans les codes, comme moi, pour ainsi dire, pas un pro, pour prescrire vous-même la conception dans les fichiers du plugin, alors vous pouvez simplement installer ce plugin pour vous-même. Après l'avoir installé, un nouvel onglet PageNavi Style apparaîtra dans votre admin. Dans celui-ci, vous pouvez choisir n'importe quel style pour votre conception de pagination.

Au total, le plugin dispose de 20 types de styles avec toutes les couleurs disponibles. De plus, si vous n'aimez soudainement rien de la liste, vous pouvez modifier les paramètres de "Styles existants" à "Personnalisé" dans l'onglet Sélectionner une feuille de style, un éditeur apparaîtra devant vous, où vous pourrez spécifier les paramètres dont vous avez besoin, couleurs, etc. Si oui, voici leur traduction :

Couleur d'en-tête - couleur d'en-tête.

Couleur de fond - couleur de fond.

Couleur d'arrière-plan active/actuelle- la couleur du bouton au survol avec le curseur de la souris.

Taille de la police - taille de la police.

Lier le survol de la souris / la couleur active- la couleur du lien au survol avec le curseur de la souris.

Couleur de la bordure du lien - couleur de la bordure du bouton de numéro de page.

Bordure du lien Survol de la souris/Couleur active- la couleur de la bordure au survol du curseur de la souris.

Aligner la navigation - alignement sur la page : centre, gauche ou droite.

Comment faire de la navigation de page sans plugin WP-PageNavi ?

Si vous ne faites pas partie de ceux qui aiment mettre les suivants afin d'améliorer la fonctionnalité de et , vous pouvez alors prendre une solution de contournement - installez simplement le code qui affichera cette navigation, mais avant cela, faites-le au cas où.

Méthode 2. Allez dans l'"éditeur" "apparence" et ouvrez le fichier de fonction du thème (functions.php) et tout à la fin avant la balise ?>

fonction wp_corenavi() ()

$pages = "" ;
$max = $wp_query->max_num_pages ;


$a["total"] = $max ;
$a["actuel"] = $actuel ;
$total = 1 ; //1 - afficher le texte "Page N sur N", 0 - ne pas afficher
$a["taille_moyenne"] = 3 ; // combien de liens afficher à gauche et à droite du lien actuel
$a["end_size"] = 1 ; // combien de liens afficher au début et à la fin
$a["prev_text"] = """ ; //texte du lien "Page précédente"
$a["texte_suivant"] = """ ; //texte du lien "Page suivante"
si ($max > 1) echo "

Au fait, il y a quelques explications en russe dans le code, vous pouvez donc jouer un peu avec les chiffres si vous en avez besoin. Maintenant, comme pour le plugin WP-PageNavi, on rentre dans les fichiers : functions.php, index.php et archive.php on y retrouve la ligne et après cela ou quelques lignes de plus, ajoutez le code

Méthode 3. Cette méthode est similaire à la seconde, mais le code est légèrement différent. Dans le fichier de fonction du thème (functions.php) tout à la fin avant la balise ?>, insérez le code suivant et enregistrez l'entrée.

fonction de navigation()(
global $wp_query, $wp_rewrite ;
$pages = "" ;
$max = $wp_query->max_num_pages ;
if (!$current = get_query_var("paginé")) $current = 1;
$a["base"] = str_replace(999999999, "%#%", get_pagenum_link(999999999));
$a["total"] = $max ;
$a["actuel"] = $actuel ;
$total = 0 ; //1 - afficher le texte "Page N sur N", 0 - ne pas afficher
$a["taille_moyenne"] = 2 ; // combien de liens afficher à gauche et à droite du lien actuel
$a["end_size"] = 5 ; // combien de liens afficher au début et à la fin
$a["prev_text"] = "" Précédent " ; //texte du lien "Page précédente"
$a["next_text"] = "Suivant »" ; //texte du lien "Page suivante"
si ($max > 1) echo "

.navigator(marge : 10px 7px ;
arrière-plan :#fff ;
bordure : 1px solide #aaa ;
rembourrage : 15 px ;
débordement caché;
taille de police : 13 px ;
couleur :#000 ;)

.navigator a(arrière-plan : #fff ;
bordure : 1px solide #DDDDDD ;
couleur : #000000 ;
taille de police : 13 px ;
rembourrage : 10px
décoration de texte : aucune ;)

arrière-plan :#f1f8f9 ;
bordure : 1px solide #C6D2D4 ;)

.navigator a:hover(background: #fff;
bordure : 1px solide #111 ;
couleur : #0000cc ;
taille de police : 13 px ;
rembourrage : 10px
décoration de texte : aucune ;)

.navigator span.pages (remplissage : 3px 5px ;
arrière-plan :#f1f8f9 ;
bordure : 1px solide #C6D2D4 ;)

.navigator span.current(arrière-plan : #fff ;
bordure : 1px solide #111 ;
couleur : #0000cc ;
taille de police : 15 px ;
rembourrage : 10px
décoration de texte : aucune ;)

.navigator span.extend (remplissage : 3px 5px ;
arrière-plan :#f1f8f9 ;
bordure : 1px solide #C6D2D4 ;)

.str(arrière-plan : #fff ;
bordure : 1px solide #DDDDDD ;
couleur : #000000 ;
taille de police : 13 px ;
rembourrage : 10px
décoration de texte : aucune ;)

Méthode 4. Dans le fichier de fonction du thème (functions.php) tout à la fin avant la balise ?>, insérez le code suivant et enregistrez l'entrée.

fonction ma_pagenavi ($pages = "", $range = 2)
{
$showitems = ($plage * 2)+1 ;

global $paginé ;
if (vide ($paginé)) $paginé = 1;

si ($pages == "")
{
globale $wp_query ;
$pages = $wp_query->max_num_pages ;
si (!$pages)
{
$pages = 1;
}
}

si (1 != $pages)
{
écho "

Dans les fichiers : functions.php, index.php et archive.php on y retrouve la ligne et après cela ou quelques lignes supplémentaires, ajoutez le code . Allez maintenant dans le fichier de feuille de style (style.css) et, comme dans l'exemple précédent, collez ce code et enregistrez l'entrée.

.pagination(
clarifier les deux;
taille de police : 12 px ;
marge supérieure : 10px ;
aligner le texte : centrer ;
}

.pagination span, .pagination a (
décoration de texte : aucune ;
bordure : 1px solide #BFBFBF ;
rembourrage : 3px 5px ;
marge : 2px
}

.pagination a:hover(
couleur de bordure : #000 ;
}
.pagination .current(
font-weight : gras ;
}

Méthode 5. Téléchargez ce fichier, prenez-en le code et collez-le dans (functions.php) à la toute fin avant la balise ?> et enregistrez l'enregistrement. Si quoi que ce soit, je m'excuse d'avance pour la gêne occasionnée car le code était trop gros pour être publié. Maintenant dans les fichiers : functions.php, index.php et archive.php on y trouve la ligne et après cela ou quelques lignes supplémentaires, ajoutez le code

Si quoi que ce soit, tous les codes ont été testés pour leur opérabilité, donc l'un des exemples devrait fonctionner pour vous de toute façon. C'est tout, bonne chance.

Salutations, chers lecteurs du site de blog. Aujourd'hui, nous allons parler du très populaire plugin WP-PageNavi, qui vous permet de faire passer la navigation des pages de votre blog WordPress à un nouveau niveau.

En principe, la pagination, qui est utilisée par défaut, est assez digeste, mais l'option offerte par cette extension semble toujours beaucoup plus attrayante.

Pourquoi utiliser le plugin WP-PageNavi

Jugez par vous-même, voici à quoi ressemble la pagination par défaut :

Et après avoir installé le plugin :

ou comme ceci :

cela dépend des options que vous sélectionnez dans sa fenêtre de paramètres.

À mon avis, la deuxième option est beaucoup plus jolie que la première, qui est utilisée par défaut. Si vous le pensez également, vous devriez lire cet article jusqu'à la fin et tout savoir sur les nuances d'installation et de configuration de cette merveilleuse extension.

Le plugin devra d'abord être téléchargé. d'ici. Trouvez le bouton "Télécharger" sur la droite et enregistrez l'archive wp-pagenavi.zip sur votre ordinateur. Ensuite, décompressez-le et téléchargez le dossier résultant sur le serveur d'hébergement dans le répertoire des plugins wp-content/plugins/ .

Pour ce faire, vous devrez accéder aux fichiers et dossiers de votre blog WP en utilisant le protocole FTP().

Lors de la décompression, il arrive qu'un dossier externe supplémentaire apparaisse, alors vérifiez-le et débarrassez-vous-en si nécessaire. J'espère que j'ai expliqué clairement? Sinon, WordPress ne verra pas le plugin que vous avez installé autrement. Bon continuons.

Après avoir copié les fichiers du plugin sur le serveur d'hébergement dans le dossier wp-content/plugins/, vous devrez vous rendre dans le panneau d'administration de WordPress (http://your_sait.ru/wp-admin/) et sélectionner les "Plugins" élément du menu de gauche du panneau d'administration ". En haut de la fenêtre "Gestion" qui s'ouvre, vous devez cliquer sur le lien "Inactif" (ou, s'il n'y a pas de traduction, alors "Inactif").

Une fenêtre s'ouvrira avec toutes les extensions installées mais pas encore activées. Trouvez parmi eux « WP-PageNavi » et cliquez sur le lien « Activer » situé sous son nom.

Collez le code de sortie du plugin dans les modèles WordPress souhaités

Le plugin est activé, mais afin de voir les résultats de son travail sur votre blog, vous devrez également insérer le code d'appel de la fonction wp_pagenavi dans les fichiers de votre thème actuel. .

Généralement, la pagination est utilisée sur la page principale d'un blog (le fichier INDEX.PHP dans votre dossier de thème), sur les pages Web de contenu archivé (ARCHIVE.PHP) et dans les résultats de recherche (le fichier SEARCH.PHP). En fait, nous devrons insérer le code d'appel de la fonction dont nous avons besoin dans ces fichiers (templates).

Ceux. vous devrez vous reconnecter via FTP et vous rendre dans le dossier avec le thème en cours :

wp-content/themes/Nom du dossier avec votre thème

Trouvez INDEX.PHP dedans et ouvrez-le pour le modifier dans un éditeur qui vous convient (j'utilise le Bloc-notes avancé ++ à cette fin - j'ai un article sur son utilisation). Votre tâche consiste maintenant à trouver la section de code dans INDEX.PHP responsable du passage à la page précédente ou suivante. Tâche difficile, n'est-ce pas ? Bien sûr, pour qui.

INDEX.PHP n'est pas très volumineux, étudiez attentivement son contenu pour les commentaires liés à la pagination, par exemple, ceux-ci :

Typiquement, les créateurs de thèmes WordPress incluent dans de tels commentaires la zone de code chargée d'afficher la pagination. Le code standard lui-même peut ressembler, par exemple, à ceci :

Une fois que vous avez identifié le fragment souhaité, vous devrez le remplacer par la ligne appelant la fonction wp_pagenavi :

Vous devez maintenant enregistrer les modifications apportées dans INDEX.PHP, accéder à la page principale de votre blog et vous assurer que tout fonctionne comme il se doit. Ceux. au lieu de la pagination standard utilisée dans WordPress, vous utilisez la beauté de WP-PageNavi.

Soit dit en passant, la pagination standard ne peut pas être supprimée du code INDEX.PHP, de sorte que lorsque vous supprimerez ce plugin, vous n'aurez plus de problèmes avec lui plus tard. Pour ce faire, vous devrez écrire dans INDEX.PHP, à la place du code de navigation standard, une condition qui détermine quand afficher le standard et quand le panneau WP-PageNavi.

La condition dépendra si le plugin WP-PageNavi est installé sur votre blog ou non. Cela pourrait ressembler à ceci :

Condition dans ce code :

Si(function_exists("wp_pagenavi"))

vérifie si le plugin est installé, et s'il ne l'est pas, alors le script standard fonctionnera :

sinon (?>

Et si WP-PageNavi est installé, la barre de navigation sera formée par ses forces :

{ ?>

Bien que, bien sûr, vous ne puissiez pas vous embêter et simplement remplacer l'un par l'autre, mais c'est à vous de décider.

Donc, maintenant, vous devrez faire la même chose pour les fichiers ARCHIVE.PHP et SEARCH.PHP de votre dossier de thème (wp-content/themes/Nom de votre dossier de thème).

Paramètres du plug-in WP-PageNavi pour le blog WordPress

Pour y accéder, vous devrez sélectionner dans le panneau d'administration du menu de gauche, dans la zone "Paramètres", l'élément "Liste des pages". Une fenêtre s'ouvrira avec l'onglet actif "Modèles de liste de pages":

Dans le champ "Modèle de la liste générale des pages", dans la figure ci-dessus, l'affichage de la page en cours et du nombre total de pages est défini. Avec cette option pour remplir ce champ, le panneau WP-PageNavi ressemblera à ceci :

Vous pouvez ajouter le mot "Page" à ce champ si vous préférez :

Page %CURRENT_PAGE% sur %TOTAL_PAGES%

Et si vous le souhaitez, vous pouvez même le nettoyer. Dans les colonnes "Élément "Page actuelle"" et "Élément" Page "" laissez tout tel quel. Ici, vous pouvez définir l'affichage de l'inscription pour la page Web actuelle et toutes les autres pages Web sous forme de numéro de série. Cela donnera quelque chose comme ça :

Dans les champs "Texte pour la première page" et "Texte pour la dernière page", vous pouvez définir le texte pour que les boutons aillent à la première et à la dernière :

Au lieu de texte dans la colonne "Texte pour la première page", vous pouvez en écrire un, et le champ "Texte pour la dernière page" - %TOTAL_PAGES% (au lieu de cette inscription, le nombre de toutes les pages Web sera affiché) :

Dans les champs "Text For Next Post" et "Text For Previous Post", des flèches sont écrites pour s'afficher sur les boutons permettant de passer au suivant et au précédent :

J'ai effacé les deux champs suivants, car sinon, deux boutons blancs sans texte étaient affichés à la place. Il est possible que vous ne l'ayez pas et que vous décidiez vous-même à quoi ils servent.

Passons à d'autres paramètres appelés "Paramètres de la liste":

La case à cocher "Utiliser pagenavi-css.css" vous permet de désactiver ou d'inclure le fichier Cascading Style Sheets (CSS) fourni avec le plugin. Dans le champ "Style de liste", vous pouvez choisir l'un des deux styles CSS dans la liste déroulante.

Vous avez vu le "Normal" dans les captures d'écran précédentes, et en choisissant le style "Liste déroulante", vous obtiendrez quelque chose comme cette vue du panneau WP-PageNavi dans WordPress :

Si vous cochez la case "Toujours afficher la navigation de la page", alors même pour les pages Web qui ne nécessitent pas encore de numérotation (disons qu'il n'y a pas assez de messages sur la page principale pour faire le fractionnement), la navigation sera toujours affichée quelque chose comme ça :

Dans "Nombre de pages à afficher", vous pouvez définir le nombre de pages qui seront affichées sous la forme d'une série continue (consécutive) de nombres. La transition vers le reste sera possible à l'aide des boutons suivant et précédent, ainsi que des boutons permettant de passer au premier et au dernier. J'ai mis un cinq là, en conséquence j'ai obtenu:

Dans "Nombre de numéros de page plus grands à afficher", vous pouvez définir le nombre de numéros de page Web éloignés (supérieurs aux numéros de valeur numérique actuellement affichés) qui seront affichés après le bouton suivant.

Et dans le champ "Afficher les numéros de page plus grands en multiples de", vous pouvez définir le pas avec lequel les numéros de pages Web distantes seront affichés. Disons que dans le premier champ je mets un trois, et dans le second deux :

En conséquence, le panneau PageNavi ressemblera à ceci :

Ceux. les numéros de seulement trois pages Web distantes sont affichés avec un intervalle (pas) égal à deux (6, 8, 10). Afin de ne pas utiliser l'affichage de nombres éloignés, il vous suffira de mettre un zéro dans la colonne "Nombre de numéros de page plus grands à afficher".

Pour appliquer et afficher les modifications que vous avez définies, dans les paramètres du plugin, vous devrez cliquer sur le bouton "Enregistrer les modifications" situé en bas.

Modification de l'apparence de la barre de pagination

Afin de modifier le jeu de couleurs, le rembourrage, les polices et d'autres attributs d'apparence de la barre de pagination affichée sur votre blog, vous devrez ajouter les propriétés CSS nécessaires au fichier de feuille de style en cascade de ce plugin.

Certes, pour qu'il prenne la forme montrée dans les captures d'écran de cet article, j'ai ajouté des propriétés supplémentaires non pas au fichier CSS du plugin (/wp-content/plugins/wp-pagenavi/pagenavi-css.css), mais au fichier J'utilise des thèmes (wp-content/themes/nom du dossier avec le thème/style.css).

Dans ce fichier, les propriétés CSS qui définissent l'apparence du panneau WP-PageNavi ressemblent à ceci :

#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active ( remplissage : 3px 8px 3px 8px ; marge : 2px ; texte-décoration : aucun ; couleur : #fff ; border: 0px line-height:24px; background-color: #2b99ff; ) #content .wp-pagenavi a:hover ( color:#fff; background-color: #154b7d; ) #content .wp-pagenavi span.pages ( rembourrage : 3px 8px 3px 8px ; marge : 2px 2px 2px 2px ; ) #content .wp-pagenavi span.current ( rembourrage : 3px 8px 3px 8px ; marge : 2px ; hauteur de ligne : 25px ; poids de la police : gras ; couleur : #add352; arrière-plan :#26343c; )

J'attire votre attention sur le fait que les noms de classe et ID() qui sont utilisés ici font spécifiquement référence à mon template. Permettez-moi d'expliquer le but de certaines règles et propriétés CSS.

#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active ( remplissage : 3px 8px 3px 8px ; marge : 2px ; texte-décoration : aucun ; couleur : #fff ; bordure : 0px hauteur de ligne : 24px ; couleur d'arrière-plan : #2b99ff ; )

définit les marges extérieures et intérieures (voir à leur sujet) pour les boutons du panneau (en fait pour les liens de ces boutons, puisque ces propriétés seront appliquées aux liens spécifiés par la balise A et placés dans le conteneur wp-pagenav).

Cette règle définit également la couleur du texte du lien (la couleur blanche est définie dans la propriété color : #fff; - ).

Il n'y aura pas de bordure autour des liens (propriété border : 0px) et la couleur d'arrière-plan des conteneurs contenant ces liens sera déterminée par la propriété background-color : #2b99ff ; . C'est cette couleur que vous pouvez voir dans les captures d'écran ci-dessus pour les boutons inactifs du panneau de pagination.

Règle CSS :

#content .wp-pagenavi a:hover ( color:#fff; background-color: #154b7d; )

définit la couleur du texte et de l'arrière-plan du conteneur (bouton) avec le lien sur lequel le curseur de la souris survole actuellement (propriétés CSS du lien de survol - a:hover - ).

La couleur du texte du lien est toujours blanche, mais la couleur de fond (en fait la couleur du bouton) est changée en une couleur plus foncée (background-color: #154b7d;). Ceux. le visiteur, en déplaçant le curseur de la souris sur les boutons de la barre de navigation, verra le bouton changer de couleur, ce qui crée un sentiment d'interactivité.

Règle CSS :

#content .wp-pagenavi span.current ( rembourrage : 3px 8px 3px 8px ; marge : 2px ; hauteur de ligne : 25px ; poids de la police : gras ; couleur : #add352 ; arrière-plan :#26343c; )

Définit l'apparence du bouton avec le numéro de la page de blog actuellement ouverte (ce lien aura une balise SPAN avec la classe CURRENT dans le code). Un tel bouton ressemblerait au bouton avec le numéro un dans la figure ci-dessous :

Cette règle CSS change la couleur d'arrière-plan de ce bouton actif (propriété background : #26343c), la couleur du texte du lien sur ce bouton (couleur : propriété #add352), et en plus de cela, la police du texte du lien sera en gras en raison à cette propriété CSS — font-weight :bold().

Mais pour changer l'apparence du panneau de pagination, vous pouvez ajouter les propriétés CSS nécessaires à la feuille de style du plugin lui-même. Vous pouvez ouvrir ce fichier de feuille de style en cascade pour le modifier à partir du dossier :

/wp-content/plugins/wp-pagenavi/pagenavi-css.css

Par exemple, pour obtenir un panneau comme celui-ci :

Vous devrez télécharger cette archive, la décompresser et copier le dossier IMAGES dans le dossier avec le plugin WP-PageNavi, que vous pouvez trouver dans le chemin suivant :

/wp-content/plugins/wp-pagenavi

Le dossier IMAGES contient un fichier graphique fon.gif , qui formera l'arrière-plan du panneau PageNavi. Vous devrez maintenant ouvrir le fichier /wp-content/plugins/wp-pagenavi/pagenavi-css.css pour le modifier et y remplacer le code par les règles suivantes :

wp-pagenavi (largeur : 100 % ; débordement : masqué ; rembourrage : 4px 0px 4px 0px ; marge gauche : 0px ; bordure : 1px solid #00598F ; arrière-plan : url ("images/fon.gif") centre gauche répéter-x ; ) .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited ( padding : 4px 5px 4px 5px ; margin : 2px 0px 2px 0px ; color: #ffffff ; font-weight: bold; text -decoration : aucune ; ) .wp-pagenavi a.last ( rembourrage : 4px 5px 4px 5px ; ) .wp-pagenavi a.first ( rembourrage : 4px 5px 4px 5px ; ) .wp-pagenavi a:hover ( background-color : #00598F ; couleur : #FFFFFF ; poids de la police : gras ; ) .wp-pagenavi span.pages ( rembourrage : 4px 5px 4px 5px ; marge : 2px 0px 2px 0px ; couleur : #FFFFFF ; arrière-plan : url("images/fon .gif") center left repeat-x; background-color: #4f4f4f; font-weight: bold; ) .wp-pagenavi span.current ( padding: 4px 7px 4px 7px; margin: 2px 0px 2px 0px; font-weight: gras ; bordure supérieure : 1 pixel solide #00598F ; bordure inférieure : 1 px solide #00598F ; couleur : #FFFFFF ; couleur d'arrière-plan : #00598F ; poids de la police : gras ; ) .wp-pagenavi span.extend ( rembourrage : 4px 0px 4px 0px ; marge : 2px 0px 2px 0px ; marge droite : 0px ; marge-gauche : 0px ; bordure supérieure : 1px solide #00598F ; bordure inférieure : 1px solide #00598F ; couleur : #FFFFFF ; arrière-plan : url("images/fon.gif") centre gauche répéter-x ; font-weight : gras ; ) .wp-pagenavi span.next-prev ( famille de polices : Arial; /* IE fix */ )

Enregistrez vos modifications dans pagenavi-css.css et visitez votre blog pour voir si la navigation a changé. S'il n'a pas changé, essayez d'actualiser le contenu de la fenêtre dans le navigateur en maintenant le bouton MAJ enfoncé, et si cela ne résout pas le problème, videz le cache du navigateur.

Bonne chance à toi! A bientôt sur le site des pages du blog

Vous pourriez être intéressé

Easy Social Share Buttons - plugin pour ajouter des boutons de réseaux sociaux à WordPress, y compris Vkontakte et Odnoklassniki
S'abonner aux commentaires pour WordPress - abonnement aux commentaires sur les articles dans WordPress
Breadcrumbs dans WordPress en utilisant le plugin Breadcrumb NavXT (renforcement des liens)
Compteurs simples et icônes de catégorie et de page - de beaux compteurs RSS et Twitter, ainsi que des icônes pour les catégories et les pages dans WordPress
Installation et configuration des plugins pour WordPress, résolution des problèmes éventuels
Pack SEO All in One et optimisation pour les moteurs de recherche internes d'un blog WordPress (balises meta Canonical, Description et Title)
Galerie pour WordPress basée sur le plugin NextGEN Gallery - création et affichage de galeries de photos et de diaporamas dans des articles
Google XML Sitemaps - Création d'un sitemap pour WordPress
Better Feed for WordPress - comment ne pas envoyer les textes intégraux des messages vers RSS et se protéger contre le vol de contenu via un fil d'actualités
Liaison des pages du site sur l'exemple du plugin upPrev (moving panel) pour WordPress

4 761

Dans cet article, je vais vous montrer comment créer un menu de navigation WordPress. À l'aide d'un simple outil de glisser-déposer, vous pouvez créer un magnifique menu déroulant sur votre site.

Menu de navigation WordPress

Pourquoi avez-vous besoin d'un menu? Il vous permet de présenter la structure de votre site aux utilisateurs - les aide à parcourir les sections et à trouver rapidement les informations dont ils ont besoin.

Le menu peut être situé en haut/en bas et à droite/à gauche de la page du site.

Presque tous les thèmes WordPress incluent au moins un type de disposition de menu.

Création d'un menu WordPress

Vous pouvez ajouter un menu depuis le panneau d'administration WordPress - Apparence - Menus.

Une nouvelle fenêtre Créer un menu apparaîtra à l'écran, composée de deux zones. La zone de gauche contient vos pages, liens personnalisés et catégories. Et à droite - éléments de menu personnalisables.

Créons votre premier menu.

Donnez un nom à votre menu, par ex. "Mon premier menu" puis cliquez sur le bouton "Créer un menu".

Vous verrez les paramètres du menu :

Comme vous pouvez le constater, le thème WordPress Azbuka propose 3 options de disposition de menu : principal, secondaire, pied de page.

Les noms et emplacements des menus dépendent du thème choisi et peuvent varier.

Sélectionnez ensuite les pages que vous souhaitez ajouter - cochez les pages répertoriées dans le volet de gauche et cliquez sur "Ajouter au menu".

Sélectionnez ensuite l'emplacement de votre menu et enregistrez.

Vous pouvez essayer différentes positions pour voir à quoi cela ressemble une fois terminé.

Placement des éléments de menu

Vous remarquerez que chaque élément de menu que vous ajoutez est dans l'ordre dans lequel vous l'avez ajouté. Par exemple, la page "À propos de moi" apparaît à la fin, tandis que la page "Produits" apparaît au début.

Ne vous inquiétez pas, les éléments de menu peuvent être déplacés avec la souris et disposés dans l'ordre dont vous avez besoin.

Ainsi, vous pouvez créer le nombre requis de menus pour les différentes zones du site.

Création d'un menu déroulant de navigation WordPress

Le menu déroulant est le menu de navigation. Avec des éléments parents et enfants.

Lorsque l'utilisateur passe la souris sur l'élément de menu parent, tous les autres éléments enfants apparaissent en douceur les uns après les autres sous le parent.

Utilisation du menu déroulantvous pouvez créer un système de navigation correctement structuré.

Ajoutons maintenant un élément de sous-menu pour votre nouveau menu.

DANS structure, faites glisser l'élément juste en dessous de l'élément parent, puis faites glisser l'élément légèrement vers la droite. Vous remarquerez qu'il deviendra automatiquement un élément de sous-menu.

De cette façon, vous pouvez créer plusieurs niveaux de sous-menus. Mais, malheureusement, tous les thèmes ne prennent pas en charge la création de tels menus à plusieurs niveaux - la plupart ne vous permettent de créer que 2 niveaux.

Ajouter des catégories au menu

Les titres sont utilisés pour créer un menu déroulant dans un blog. Et ils sont ajoutés de la même manière que les pages. Développez l'onglet "En-têtes", sélectionnez ceux dont vous avez besoin et ajoutez-les au menu.

Vous remarquerez que les rubriques apparaîtront comme des éléments de menu. Comme pour les pages, vous pouvez faire glisser et déposer des catégories avec votre souris pour les organiser dans l'ordre que vous souhaitez.

Dans l'exemple ci-dessous, j'ai fait en sorte que toutes les catégories deviennent des enfants de la page du blog.

Ajout de liens personnalisés au menu de navigation de WordPress

Modification d'un élément de menu

Lorsque vous ajoutez une page ou une catégorie, WordPress utilise automatiquement le nom de la page ou le nom de la catégorie comme texte du lien.

Cela ne signifie pas que vous ne pouvez pas le modifier.

Développez l'élément et modifiez-le si nécessaire.

Ici, vous pouvez modifier le titre, le texte du lien et ajouter l'attribut de titre au lien. Enregistrez le menu pour ne perdre aucune modification.

Suppression du menu

Développez également l'élément de menu et en bas, vous verrez le texte rouge "Supprimer".

Zones de menu de navigation

Chaque thème propose différents types de dispositions de menu de navigation.

Dans le thème de ce site, que j'ai montré dans les exemples, il existe 3 types de disposition de menu. Votre thème peut en avoir plus ou moins. Et, bien sûr, ils peuvent être appelés différemment.

Ajout d'un menu de navigation à la barre latérale

En plus des zones standard, vous pouvez ajouter des menus à la barre latérale et à d'autres zones avec des widgets.

Dans le panneau d'administration, sélectionnez "Apparence" - "Widgets" et ajoutez le widget "Menu personnalisé" à la barre latérale.

Vous devez ensuite donner un titre au widget et sélectionner l'un de vos menus personnalisés dans la liste. Cliquez sur le bouton Enregistrer.

Allez maintenant sur le site et vérifiez comment le menu est affiché dans la barre latérale.

En ce qui concerne les boutons sociaux dans le menu, certains thèmes proposent des boutons de médias sociaux intégrés.

Si votre thème n'en a pas, vous pouvez installer un plugin comme Menu Social Icons pour ajouter vous-même les boutons.

Vous etes peut etre intéressé:

Si vous avez des questions - écrivez dans les commentaires.

Et suivez-nous sur