Chez WPBeginner, nous avons aidé d'innombrables lecteurs à personnaliser leurs sites WordPress pour améliorer l'expérience utilisateur, renforcer leur image de marque et générer des conversions. Et nous avons constaté que, lorsqu'elle est bien faite, un menu de navigation unique peut aider à augmenter l'engagement et à maintenir les visiteurs plus longtemps sur votre site.
Le problème est que tous les thèmes WordPress ont des emplacements prédéfinis où vous pouvez afficher un menu de navigation, donc le modifier peut être délicat. C'est particulièrement vrai si vous êtes débutant car la modification des fichiers de thème est un processus délicat.
Lorsque vous utilisez un thème basé sur des blocs, vous pouvez le faire avec l'éditeur complet du site. Mais, d'après notre expérience, il existe de meilleures options qui fonctionneront pour tous les types de thèmes.
Par exemple, si vous souhaitez des personnalisations avancées, vous pouvez utiliser un puissant constructeur de pages comme SeedProd. Ou, si vous recherchez un moyen simple d'utiliser du code personnalisé, WPCode est de loin le meilleur choix.
Dans cet article, nous vous montrerons comment ajouter un menu de navigation personnalisé à n'importe quelle zone de votre thème WordPress. Nous vous présenterons 3 options différentes afin que vous puissiez choisir le tutoriel qui convient à vos besoins.
Pourquoi ajouter des menus de navigation personnalisés dans les thèmes WordPress ?
Un menu de navigation est une liste de liens pointant vers des zones importantes de votre site Web. Ils permettent aux visiteurs de trouver facilement du contenu intéressant, ce qui peut augmenter les vues de page et réduire le taux de rebond dans WordPress.
L'emplacement exact de votre menu variera en fonction de votre thème WordPress. La plupart des thèmes ont plusieurs options, vous pouvez donc créer différents menus et les afficher à différents endroits.
Pour voir où vous pouvez afficher les menus dans votre thème WordPress actuel, rendez-vous simplement dans Apparence » Menus, puis regardez la section « Emplacement d'affichage ».
L'image suivante montre les emplacements pris en charge par le thème WordPress Astra.
Parfois, vous voudrez peut-être afficher un menu dans une zone qui n'est pas répertoriée comme « Emplacement d'affichage » dans votre thème.
Dans cette optique, examinons comment ajouter un menu de navigation personnalisé à n'importe quelle zone de votre thème WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder à la méthode de votre choix :
- Méthode 1 : Utilisation de l'éditeur de site complet (thèmes basés sur des blocs uniquement)
- Méthode 2 : Utilisation d'un plugin de constructeur de pages (fonctionne avec tous les thèmes)
- Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)
Méthode 1 : Utilisation de l'éditeur de site complet (thèmes basés sur des blocs uniquement)
Si vous utilisez un thème de blocs tel que ThemeIsle Hestia Pro, vous pouvez alors ajouter un menu de navigation personnalisé en utilisant l'édition complète de site (FSE) et l'éditeur de blocs.
Pour plus de détails, vous pouvez consulter notre article sur les meilleurs thèmes WordPress d'édition complète de site.
Cette méthode ne fonctionne pas avec tous les thèmes et ne permet pas de personnaliser toutes les parties du menu. Si vous souhaitez ajouter un menu entièrement personnalisé à n’importe quel thème WordPress, nous vous recommandons plutôt d’utiliser un plugin de constructeur de page.
Si vous utilisez un thème basé sur des blocs, rendez-vous dans Apparence » Éditeur.
Par défaut, l'éditeur de site complet affiche le modèle de page d'accueil de votre thème, mais vous pouvez ajouter un menu de navigation à n'importe quelle zone.
Pour voir toutes les options disponibles, sélectionnez simplement « Modèles », « Motifs » ou « Pages ».
Vous pouvez maintenant cliquer sur le modèle, la partie de modèle ou la page où vous souhaitez ajouter un menu de navigation personnalisé.
WordPress affichera maintenant un aperçu du design. Pour modifier ce modèle, cliquez sur la petite icône en forme de crayon.
L'étape suivante consiste à ajouter un bloc Navigation à la zone où vous souhaitez afficher votre menu.
Dans le coin supérieur gauche, cliquez sur le bouton bleu « + ».
Maintenant, tapez « Navigation » dans la barre de recherche.
Lorsque le bloc « Navigation » apparaît, faites-le simplement glisser et déposez-le sur votre mise en page.
Ensuite, cliquez pour sélectionner le bloc Navigation.
Si vous avez déjà créé le menu que vous souhaitez afficher, cliquez pour sélectionner le bloc Navigation. Dans le menu de droite, cliquez sur l'icône à trois points à côté de « Menu ».
Vous pouvez ensuite choisir un menu dans la liste déroulante.
Une autre option consiste à créer un menu dans l'éditeur complet du site en ajoutant des pages, des articles, des liens personnalisés, etc. Pour ajouter des éléments au nouveau menu, cliquez simplement sur l'icône « + ».
Cela ouvre une fenêtre contextuelle où vous ajoutez n'importe quel article ou page et décidez si ces liens doivent s'ouvrir dans un nouvel onglet.
Vous pouvez également ajouter une barre de recherche au menu WordPress, ajouter des icônes de médias sociaux, et plus encore. Dans la fenêtre contextuelle, tapez simplement le bloc que vous souhaitez ajouter au menu et sélectionnez la bonne option lorsqu'elle apparaît.
Vous pouvez ensuite configurer ce bloc à l'aide des paramètres de la mini-barre d'outils et du menu de droite. Répétez simplement ces étapes pour ajouter d'autres éléments au menu.
Lorsque vous êtes satisfait de l'apparence du menu, cliquez simplement sur le bouton « Enregistrer ».
Votre site utilisera désormais le nouveau modèle, et les visiteurs pourront interagir avec votre menu de navigation personnalisé.
Méthode 2 : Utilisation d'un plugin de constructeur de pages (fonctionne avec tous les thèmes)
L'éditeur complet du site vous permet d'ajouter des menus aux thèmes basés sur des blocs. Cependant, si vous souhaitez ajouter un menu avancé et entièrement personnalisable à n'importe quel thème WordPress, vous aurez besoin d'un plugin de création de pages.
SeedProd est le meilleur plugin de constructeur de pages WordPress du marché qui vous permet de personnaliser chaque partie de votre menu de navigation.
Nous avons une expérience approfondie dans l'utilisation de cet outil pour créer des menus de navigation personnalisés, des pages de destination et bien plus encore. Pour plus de détails, consultez notre avis complet sur SeedProd.
En ce qui concerne les pages, SeedProd est livré avec plus de 350 modèles conçus par des professionnels que vous pouvez utiliser comme point de départ. Après avoir choisi un modèle, vous pouvez ajouter un menu de navigation personnalisé à votre site en utilisant le bloc Menu de navigation prêt à l'emploi de SeedProd.
Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Remarque : Il existe également une version gratuite de SeedProd qui vous permet de créer des menus de navigation personnalisés sans écrire de code. Cependant, dans ce guide, nous utiliserons SeedProd Pro car il dispose du bloc Menu de navigation, ainsi que de modèles supplémentaires et de fonctionnalités avancées.
Après avoir activé le plugin, SeedProd vous demandera votre clé de licence.
Vous pouvez trouver ces informations dans votre compte sur le site Web de SeedProd. Après avoir saisi la clé, cliquez sur le bouton « Vérifier la clé ».
Une fois que vous avez fait cela, allez dans SeedProd » Pages de destination et cliquez sur le bouton « Ajouter une nouvelle page de destination ».
Vous pouvez maintenant choisir un modèle pour votre page personnalisée.
Pour vous aider à trouver le bon design, tous les modèles de SeedProd sont organisés en différents types de campagnes, tels que les campagnes « Bientôt disponible » et les campagnes de capture de prospects. Vous pouvez même utiliser les modèles de SeedProd pour améliorer votre page 404.
Pour examiner de plus près n'importe quel design, survolez simplement votre souris sur ce modèle, puis cliquez sur l'icône de la loupe.
Lorsque vous trouvez un design que vous souhaitez utiliser, cliquez sur ‘Choisir ce modèle’.
Nous utilisons le modèle « Page de ventes du Black Friday » dans toutes nos images, mais vous pouvez utiliser le modèle de votre choix.
Après avoir choisi un modèle, tapez un nom pour cette page personnalisée. SeedProd créera automatiquement une URL basée sur le titre de la page, mais vous pouvez modifier cette URL comme vous le souhaitez.
Par exemple, vous pourriez ajouter des mots-clés pertinents pour aider les moteurs de recherche à comprendre de quoi parle la page. Cela peut améliorer votre SEO WordPress et aider le moteur de recherche à montrer la page aux personnes qui recherchent du contenu similaire au vôtre.
Après avoir saisi ces informations, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».
La plupart des modèles contiennent déjà des blocs, qui sont les éléments principaux de toutes les mises en page SeedProd.
Pour personnaliser un bloc, cliquez simplement dessus pour le sélectionner dans l'éditeur de page.
La barre d'outils de gauche affichera désormais tous les paramètres de ce bloc. Par exemple, dans l'image ci-dessous, nous modifions le texte d'un bloc « Titre ».
Vous pouvez formater le texte, changer son alignement, ajouter des liens, et plus encore en utilisant les paramètres du menu de gauche.
Si vous sélectionnez l'onglet « Avancé », vous aurez accès à encore plus de paramètres. Par exemple, vous pouvez faire ressortir le bloc en ajoutant des ombres portées et des animations CSS.
Pour ajouter de nouveaux blocs à votre design, trouvez simplement un bloc dans le menu de gauche, puis faites-le glisser sur la page. Si vous souhaitez supprimer un bloc, cliquez dessus pour le sélectionner, puis utilisez l'icône de la corbeille.
Comme nous voulons créer un menu de navigation personnalisé, faites glisser un bloc « Menu de navigation » sur la page.
Cela crée un menu de navigation avec un seul élément par défaut « À propos ».
Vous pouvez maintenant créer un nouveau menu dans l'éditeur SeedProd ou choisir un menu que vous avez déjà créé dans le tableau de bord WordPress.
Pour afficher un menu que vous avez créé précédemment, cliquez sur le bouton « Menu WordPress ». Vous pouvez maintenant ouvrir le menu déroulant « Menus » et choisir n'importe quelle option dans la liste.
Après cela, vous pouvez modifier la taille de la police, l'alignement du texte, et plus encore en utilisant les paramètres du menu de gauche.
Si vous souhaitez plutôt créer un nouveau menu dans SeedProd, sélectionnez le bouton « Simple ».
Ensuite, cliquez pour développer l'élément « À propos » que SeedProd crée par défaut.
Cela ouvre des contrôles où vous pouvez modifier le texte et ajouter l'URL vers laquelle le lien de l'élément de menu pointera.
Par défaut, le lien sera « dofollow » et s'ouvrira dans la même fenêtre de navigateur. Vous pouvez modifier ces paramètres à l'aide des cases à cocher dans la section « Lien URL ».
Dans l'image suivante, nous créons un lien « nofollow » qui s'ouvrira dans une nouvelle fenêtre. Pour en savoir plus sur ce sujet, veuillez consulter notre guide pour débutants sur les liens nofollow.
Pour ajouter d'autres éléments au menu, cliquez simplement sur le bouton « Ajouter un nouvel élément ».
Vous pouvez ensuite personnaliser chacun de ces éléments en suivant le même processus décrit ci-dessus.
Le menu de gauche contient également des paramètres qui modifient la taille de la police et l'alignement du texte.
Vous pouvez même créer un séparateur, qui apparaîtra entre chaque élément du menu.
Après cela, passez à l'onglet « Avancé ». Ici, vous pouvez modifier les couleurs, l'espacement, la typographie et d'autres options avancées du menu.
Au fur et à mesure que vous apportez des modifications, l'aperçu en direct se mettra à jour automatiquement, vous permettant d'essayer différents paramètres pour voir ce qui convient à votre conception.
Par défaut, SeedProd affiche le même menu sur les appareils mobiles et de bureau. Cependant, les écrans des appareils mobiles sont généralement beaucoup plus petits que ceux des ordinateurs de bureau.
Dans cette optique, vous pourriez vouloir créer un menu distinct à afficher sur les appareils mobiles. Par exemple, vous pourriez utiliser une disposition verticale afin que les utilisateurs mobiles n'aient pas besoin de faire défiler horizontalement. Vous pourriez également vouloir afficher moins de liens sur les smartphones et les tablettes.
Pour créer un menu adapté aux mobiles, concevez simplement le menu en suivant le même processus décrit ci-dessus. Ensuite, sélectionnez l'onglet « Avancé » et cliquez pour développer la section « Visibilité de l'appareil ».
Vous pouvez maintenant activer le curseur « Masquer sur ordinateur ».
Désormais, SeedProd n'affichera ce menu qu'aux utilisateurs mobiles.
Lorsque vous êtes satisfait de l'apparence de votre menu personnalisé, il est temps de le publier.
Cliquez simplement sur la flèche déroulante à côté de « Enregistrer » puis sélectionnez « Publier ».
Maintenant, si vous visitez votre blog WordPress, vous verrez le menu de navigation personnalisé en action.
Méthode 3 : Créer un menu de navigation personnalisé dans WordPress à l’aide de code (avancé)
Si vous ne souhaitez pas installer de plugin de création de pages, vous pouvez ajouter un menu de navigation personnalisé à l’aide de code. Vous trouverez souvent des guides expliquant comment ajouter des extraits de code personnalisés au fichier functions.php de votre thème.
Cependant, nous ne recommandons pas cette méthode, car une petite erreur dans votre code pourrait causer un certain nombre d'erreurs WordPress courantes, voire casser complètement votre site. Vous perdrez également le code personnalisé lors de la mise à jour de votre thème WordPress.
C’est pourquoi nous recommandons d’utiliser WPCode. C’est le moyen le plus simple et le plus sûr d’ajouter du code personnalisé dans WordPress sans avoir à modifier les fichiers principaux de WordPress.
Remarque : Il existe de nombreuses façons d’utiliser WPCode pour personnaliser votre site WordPress en toute sécurité. Il dispose d’une bibliothèque d’extraits de code intégrée et prend en charge tous les langages WordPress les plus importants, y compris PHP, JavaScript, CSS et HTML. Pour plus d’informations sur le plugin, consultez notre avis complet sur WPCode.
La première chose à faire est d'installer et d'activer le plugin gratuit WPCode. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Après l'activation, allez dans Snippets de code » Ajouter un snippet dans votre tableau de bord WordPress.
Ici, vous verrez tous les extraits prêts à l'emploi que vous pouvez ajouter à votre site. Ceux-ci incluent un extrait qui vous permet de désactiver complètement les commentaires, de téléverser des types de fichiers que WordPress ne prend généralement pas en charge, désactiver les pages de pièces jointes, et bien plus encore.
Pour créer votre propre extrait, survolez « Ajouter votre code personnalisé (Nouvel extrait) » avec votre souris, puis cliquez sur le bouton « + Ajouter un extrait personnalisé ».
Ensuite, vous devez choisir un type de code dans la liste des options qui apparaissent à l'écran. Pour ce tutoriel, sélectionnez « Extrait PHP » comme type de code.
Vous serez ensuite dirigé vers la page Créer un extrait personnalisé.
Pour commencer, entrez un titre pour l'extrait de code personnalisé. Il peut s'agir de tout ce qui vous aide à identifier l'extrait dans votre tableau de bord WordPress.
Une fois que vous avez fait cela, collez simplement l'extrait suivant dans l'éditeur de code :
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
Cela ajoutera un nouvel emplacement de menu à votre thème appelé « Mon menu personnalisé ». Pour utiliser un nom différent, modifiez simplement l'extrait de code.
Si vous souhaitez ajouter plus d'un menu de navigation personnalisé à votre thème, ajoutez simplement une ligne supplémentaire à l'extrait de code.
Par exemple, ici, nous ajoutons deux nouveaux emplacements de menu à notre thème, appelés « Mon menu personnalisé » et « Menu supplémentaire » :
function wpb_custom_new_menu() {
register_nav_menus(
array(
'my-custom-menu' => __( 'My Custom Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );
Après cela, faites défiler jusqu'aux options « Insertion ». Si ce n'est pas déjà sélectionné, choisissez la méthode « Insertion automatique » afin que WPCode insère l'extrait sur l'ensemble de votre site.
Ensuite, ouvrez le menu déroulant « Emplacement » et cliquez sur « Exécuter partout ».
Maintenant, vous êtes prêt à faire défiler jusqu'en haut de l'écran et à cliquer sur le bouton « Inactif » pour qu'il devienne « Actif ».
Enfin, cliquez sur « Enregistrer » pour rendre cet extrait actif.
Ensuite, allez dans Apparence » Menus et regardez la zone « Emplacement d’affichage ».
Vous devriez maintenant voir une nouvelle option « Mon menu personnalisé ».
Vous pouvez maintenant ajouter des éléments de menu au nouvel emplacement. Pour plus d’informations, veuillez consulter notre guide étape par étape sur comment ajouter des menus de navigation pour les débutants.
Lorsque votre menu vous convient, la prochaine étape consiste à l’ajouter à votre thème WordPress.
La plupart des sites web affichent le menu de navigation directement sous la section d’en-tête. Cela signifie que le menu est l’une des premières choses que les visiteurs voient, avec le logo du site ou le titre.
Vous pouvez ajouter le menu de navigation personnalisé à n’importe quel emplacement en ajoutant du code au fichier modèle de votre thème.
Dans votre tableau de bord WordPress, allez dans Apparence » Éditeur de fichiers du thème.
Dans le menu de droite, choisissez le modèle dans lequel vous souhaitez ajouter le menu. Par exemple, si vous souhaitez afficher le menu de navigation personnalisé dans l'en-tête de votre site web, vous sélectionnerez généralement le fichier header.php.
Pour obtenir de l'aide afin de trouver le bon fichier modèle, veuillez consulter notre guide sur comment trouver les fichiers à modifier dans votre thème WordPress.
Après avoir sélectionné le fichier, vous devrez ajouter une fonction wp_nav_menu et spécifier le nom de votre menu personnalisé.
Par exemple, dans l'extrait de code suivant, nous ajoutons « Mon Menu Personnalisé » à l'en-tête du thème :
wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );
Après avoir ajouté le code, cliquez sur le bouton « Mettre à jour le fichier » pour enregistrer vos modifications.
Maintenant, si vous visitez votre site, vous verrez le menu personnalisé en action.
Par défaut, votre menu apparaîtra sous forme de simple liste à puces.
Vous pouvez styliser le menu de navigation personnalisé pour qu'il corresponde mieux à votre thème WordPress ou à l'image de marque de votre entreprise en ajoutant du code CSS personnalisé à votre site.
Pour ce faire, allez dans Apparence » Personnaliser.
Dans le personnaliseur de thème WordPress, cliquez sur « CSS additionnel ».
Cela ouvre un petit éditeur de code où vous pouvez taper du CSS.
Vous pouvez maintenant styliser votre menu en utilisant la classe CSS que vous avez ajoutée à votre modèle de thème. Dans notre exemple, il s'agit de .custom_menu_class.
Dans le code suivant, nous ajoutons des marges et du rembourrage, définissons la couleur du texte sur noir et organisons les éléments du menu dans une disposition horizontale :
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
display:inline-block;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline-block;
}
div.custom-menu-class a {
color:#000;
}
Le personnaliseur WordPress se mettra à jour automatiquement.
Il montrera maintenant à quoi ressemblera le menu avec le nouveau style.
Si vous êtes satisfait de l'apparence du menu, cliquez sur « Publier » pour rendre vos modifications publiques.
Pour plus d'informations, consultez notre guide sur comment styliser les menus de navigation WordPress.
Guides d'experts : Faites-en plus avec les menus de navigation WordPress
Avec WordPress, vous pouvez créer toutes sortes de menus utiles et attrayants. Dans cet esprit, voici quelques guides d'experts pour vous aider à tirer encore plus parti de vos menus de navigation :
- Comment ajouter des icônes d'image aux menus de navigation dans WordPress
- Comment ajouter une logique conditionnelle aux menus dans WordPress (étape par étape)
- Comment ajouter des descriptions de menu dans vos thèmes WordPress
- Comment ajouter un menu réactif plein écran dans WordPress
- Comment créer un méga menu sur votre site WordPress (étape par étape)
Nous espérons que ce guide ultime vous a aidé à apprendre comment ajouter un menu de navigation personnalisé dans WordPress. Vous voudrez peut-être aussi consulter nos guides sur comment ajouter un bouton dans votre menu d'en-tête WordPress ou comment mettre en surbrillance un élément de menu dans WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Imran
J'ai un en-tête personnalisé créé pour WordPress avec des éléments de menu codés en dur. Comment puis-je utiliser le menu WordPress dans l'en-tête au lieu du menu codé en dur ?
cheryl
Je suis assez nouveau sur WordPress, mais j'aimerais modifier un menu personnalisé que nous avons créé car quelque chose semble mal fonctionner dans le menu.
Comment faire ?
Manu
Excellent tutorial! This was exactly what I needed right now. Within 5 minutes I was able to set up a footer menu in a theme that by default didn’t have any. Thank you so much
Munna Hossain
Article utile. Je suis un utilisateur de WordPress et ces conseils m'aideront à ajouter des menus de navigation personnalisés. Merci de partager.
Daniel Keith
Salut,
Super tutoriel. Comment puis-je appliquer du CSS à ce menu personnalisé ?
Bien que ce soit une excellente façon d'ajouter plusieurs menus, sans CSS approprié, le site Web a l'air étrange.
Zaheer Abbas
Je crée mon thème WordPress mais le menu et le widget ne s'affichent pas dans le panneau d'administration ???
Ce sont des fonctionnalités intégrées à WordPress ou je dois créer des menus et des widgets avec du code, s'il vous plaît, guidez-moi.
Tabitha
Comment puis-je transformer mon menu déroulant en colonnes ? Mon menu déroulant actuel est trop long.
Aakash Salunke
Je suis un utilisateur un peu avancé. Mon thème ne prend en charge qu'un seul menu. Mais je veux en ajouter un autre. Je l'ai créé, mais comment puis-je l'ajouter ?
Support WPBeginner
Vous devrez d'abord enregistrer l'emplacement du menu, puis modifier les fichiers de votre thème pour afficher votre menu de navigation.
Admin
bobit
ça a fonctionné, merci pour le super article
Aijaz Ansari
Génial, tutoriel, cela aide vraiment un novice comme moi.
Merci
Victoria
Merci pour l'article !!! J'ai créé mon nouveau menu.
J'ai cependant un problème.
Mon site Web a une largeur fixe, et lorsque je redimensionne la fenêtre, tout reste en place, sauf le nouveau menu. La largeur minimale n'est pas une option car ce n'est pas exactement le comportement que je souhaite.
Comment puis-je le faire se comporter de la même manière que le reste du contenu de la page ?
Merci !
Joey
MERCI ! Je cherchais depuis longtemps, je n'aurais jamais pensé que ce serait si simple.
Cory
J'ai un vieux thème fou qui ne prenait pas en charge les menus WP 3.0+. Ce tutoriel était tellement facile. Il m'a fallu 3 minutes pour le mettre un peu à jour. Merci beaucoup.
Jacques Goudreau
Merci pour l'astuce ! Super tuto !
Emma
Où allez-vous pour apporter ces modifications ? Je ne vois aucune de ces options sous les onglets Thème ou Options du thème.
I use the Buenos Theme, but can’t find on the Buenos theme page does it support these changes? I want to put in an Archive menu with a list of all the recipes on my blog… should be easy but proving impossible
Personnel éditorial
La plupart des thèmes le prennent en charge. Regardez Apparence > Menus. Cet article s'adresse aux concepteurs de thèmes qui souhaitent ajouter cette fonctionnalité dans leurs thèmes pour permettre aux utilisateurs d'ajouter des menus depuis le backend.
Admin
Zoe
J'ai essayé d'ajouter une classe personnalisée à une URL personnalisée singulière (pour changer la couleur d'une seule URL) dans la section Menus de navigation supérieure, mais cela ajoute ma classe comme une extension de la classe existante dans le code source de sortie et rien ne se passe.
Voici mon code CSS et le code source qui est généré sur mon site :
.myCustomClass { color: #FFFF00; }
Un lien coloré unique
Des suggestions pour que cela fonctionne ?
Personnel éditorial
Oui, ajoutez-le comme color: #ffff00 !important; dans cette classe. Cela devrait faire l'affaire.
Admin
Jeremy Johnson
J'ai pu implémenter ces modifications et le menu personnalisé fonctionne. Cependant, le CSS de mon thème choisi ne semble pas prendre en charge les sous-menus. L'élément du sous-menu est toujours visible, le survol de l'élément parent ne fait rien, et l'élément du menu parent est aussi large que l'élément enfant plus large, ce qui décale les autres éléments du menu plus loin que prévu. Des suggestions pour rendre le sous-menu dynamique ? Je suis assez nouveau en CSS.
Personnel éditorial
Le meilleur endroit pour commencer serait de prendre le thème par défaut Twenty Eleven. Utilisez le CSS de navigation de celui-ci, puis commencez à modifier.
Admin
Cedric
Toujours à la recherche d'une solution pour cela.
shaunling
C'est tout simplement génial !
digitfox
Oui ! C'est un bon tutoriel pour moi ! Je suis très nouveau sur WP ! Merci
PauloNeves
J'ai besoin d'aide.
Suivez toutes les étapes, mais dans le panneau Apparence, le menu d'options n'est pas activé.
Lorsque je sélectionne un autre thème, cela fonctionne.
Comment activer le menu d'options ?
Merci.
Paulo Neves
wpbeginner
@PauloNeves Vous devez ajouter cette ligne dans le fichier functions.php de votre thème : add_theme_support( ‘menus’ );
Brad
Merci pour cela ! Cela a incroyablement bien fonctionné pour moi et a beaucoup aidé mon client ! – aptdesign
eeebasic
C'est très utile pour moi, même si la version 3.3 de WordPress est sortie il y a quelques jours.
citydan
J'ai suivi les instructions et cet article ainsi que l'article ici (https://014.leahstevensyj.workers.dev/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/), et j'ai compris comment faire apparaître mon menu correctement avec mon CSS, mais les éléments enfants (sous-menus) n'apparaissent pas. Je les ai correctement configurés dans l'éditeur de menus, mais ils n'apparaissent pas sur le site. Ils ne sont pas cachés par le CSS car ils ne sont pas présents dans le code source de la page.
Des idées pourquoi mes sous-éléments de menu n'apparaissent pas ?
GourabMalla
Bonjour,
J'ai ajouté le menu personnalisé dans la navigation supérieure mais je veux savoir comment activer la « Current Page Class ».
J'utilise WordPress 3.2
Merci
Gourab
DanFlynnDesign
Merci ! J'adore la façon dont tout cela est dynamique pour que le client puisse le modifier si nécessaire, en plus de pouvoir indiquer quelle est la page actuelle et appliquer un effet de survol ! EXACTEMENT ce que je cherchais !
asharperrazor
J'ai essayé cela plusieurs fois. J'ai un ancien thème WordPress. Si ancien que je ne suis même pas sûr pour quelle version de WordPress il a été écrit. Quoi qu'il en soit, je peux faire fonctionner la partie fonctions. Je peux enregistrer le bon menu. Je peux mettre le code dans d'autres parties de mon site web, disons le pied de page, bien qu'il s'affiche comme une liste hiérarchique et non horizontalement.
N'apparaîtra pas dans le menu de navigation supérieur. Ai-je besoin d'un nouveau thème ou est-il possible de modifier mon thème actuel pour permettre la nouvelle fonction de menu ?
Merci d'avance. Le site web est http://www.asharperrazor.com
JamesGeorge
Je l'ai implémenté SANS AUCUN problème - merci ! J'ai pris le code du « menu de navigation » et je l'ai placé dans le div où le thème de mon client appelait la liste des pages. Je l'ai essentiellement remplacé par votre code ci-dessus et je l'ai téléchargé, et le CSS l'a gardé dans le même style. Ça rend super et ça fonctionne parfaitement. GÉNIAL !
ÁlvaroBenavides
J'ai vraiment besoin d'aide pour implémenter le CSS des classes, alors s'il vous plaît, prévenez-moi quand vous aurez terminé !
Bec
Excellent article – merci !
J'ai implémenté comme ci-dessus et mes éléments de menu s'affichent sur le site, le seul problème est que chaque page est vide ?!
des idées ?
Personnel éditorial
Cela ressemble à une erreur PHP. Veuillez valider votre PHP pour vous assurer qu'il n'y a pas d'erreur.
Admin
Joseph McCullough
Rapide et sale – la façon dont j'aime mes extraits de code. Merci beaucoup.
Paul
J'ai créé des menus de navigation personnalisés à quelques reprises. Ce qui est étrange, c'est qu'après les avoir créés et enregistrés, ils apparaissent pendant un certain temps, puis la barre de navigation revient à seulement 2 onglets, comme si les paramètres étaient automatiquement écrasés. Sur des sites avec le même modèle où je n'ai jamais créé de barre personnalisée, ils s'affichent correctement.
Des idées ?
Personnel éditorial
Non, aucune idée pourquoi cela se produit.
Admin
Narendra Choudhary
Vous pouvez définir des classes personnalisées pour chaque navigation, puis ajouter une image en arrière-plan. Vous pouvez même utiliser la propriété CSS (text-indent) pour supprimer le texte du menu si vous le souhaitez.
Répondre
Ram
J'ai une question sur le menu de navigation,
y a-t-il un moyen d'ajouter une image à la liste des menus de navigation..
Merci,
Ram
Personnel éditorial
Vous pouvez définir des classes personnalisées pour chaque navigation, puis ajouter une image en arrière-plan. Vous pouvez même utiliser la propriété CSS (text-indent) pour supprimer le texte du menu si vous le souhaitez.
Admin
Ram
thanks for your response but i need more clearly that custom menu image for the wordpress.
Im using wp_list_categories(‘exclude=4,7&title_li=’); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me
Merci,
Ram
Personnel éditorial
Oui, il est possible d'ajouter différentes images avec le menu personnalisé. Celui que vous utilisez n'est pas le menu dont nous parlons dans cet article.
Julie @ Inspired to Write
Pouvez-vous ajouter du code pour le rendre plus présentable (polices, boutons, taille, etc.) ? Si oui, pouvez-vous me donner un exemple et où mettre ce code ? Merci !
Personnel éditorial
C'est une question liée au CSS. Vous devrez ajouter la taille de la police dans les classes appropriées du fichier CSS. Nous allons bientôt publier un article sur les styles CSS.
Admin
Chris
Question concernant la gestion du menu.
J'ai un menu aligné à droite, donc les éléments du menu apparaissent dans l'ordre inverse.
Existe-t-il un moyen de trier `menu_order` en ordre INVERSE ?
donc : `sort_column’ => ‘menu_order’` aurait quelque chose ajouté pour inverser l'ordre.
Merci !
Personnel éditorial
Ce n'est pas parce qu'ils sont alignés à droite qu'ils doivent apparaître dans l'ordre inverse. Pour résoudre ce problème, vous devez modifier votre CSS plutôt que d'inverser le hook. Créez un div conteneur aligné à droite, puis faites flotter les balises de liste à gauche.
Admin
Julie
J'ai suivi les instructions mais après avoir créé des menus et ajouté les catégories appropriées à utiliser, je ne les vois pas dans ma barre de navigation – des idées sur ce que j'ai mal fait ?
Personnel éditorial
Avez-vous collé les codes dans votre fichier `header.php` ou là où ce menu est censé apparaître ?
Admin
dan
Vous devez également ajouter ceci à votre fichier functions.php pour pouvoir utiliser les menus
register_nav_menus( array( 'primary' => __( 'Navigation principale', 'twentyten' ), ) );
Personnel éditorial
C'est certainement quelque chose que vous devriez avoir lors de la publication de thèmes gratuits, mais pour les thèmes personnalisés, tout dépend de ce dont vous avez besoin. Parfois, vous n'avez pas besoin d'enregistrer d'emplacements.
Admin
errr
je ne comprends absolument pas… pourriez-vous être plus clair sur l'endroit où je dois insérer ce code (add_theme_support( ‘menus’ );) dans le fichier functions.php ?
je suis complètement perdu
Personnel éditorial
Quelque part entre les balises php. Si vous n'avez pas d'expérience en PHP, nous vous recommandons d'engager un professionnel.
Admin
BanyanTree
Si vous allez écrire des articles pour les débutants, il est logique que vous répondiez à des questions simples. Sinon, payez simplement pour des publicités pour promouvoir votre entreprise et arrêtez le prétexte.
wpbeginner
@BanyanTree Ajouter des codes au fichier functions.php n'est pas si difficile. Vous le collez entre les balises php. Nous avons écrit un article comme celui-ci :https://014.leahstevensyj.workers.dev/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ Mais il est tout simplement impossible de lier cet article à tous nos articles. Quand quelqu'un vous demande comment changer le fond en CSS et que vous lui dites d'ajouter background: #000 ou un autre code hexadécimal dans la propriété CSS, c'est une aide suffisante. Maintenant, s'il demande où dans le fichier CSS je dois coller cela, alors c'est quelque chose que vous devez savoir à l'avance. Ce site n'est pas un site PHP pour les nuls ou CSS pour les nuls. Nous faisons de notre mieux pour aider autant de personnes que possible GRATUITEMENT.
BanyanTree
@wpbeginner@BanyanTree Vous n’avez pas besoin de mettre des liens vers des articles, personne ne vous l’a demandé. Trois mots répondent à sa question ; « à la fin », ce qui est plus facile à taper qu’une remarque désobligeante. Gardez à l’esprit que vous avez nommé votre site ; « wpbeginner », et si c’est l’audience que vous recherchez, adaptez-vous en conséquence.
wpbeginner
@f1mktsol Oui et le site a grandi au-delà de l’audience avec laquelle nous avons initialement commencé. Ce site a évolué. C’est pourquoi nous avons des catégories… Le mot « débutant » est utilisé sur une échelle relative.
Nous avons des articles pour les grands débutants qui ne sont que des utilisateurs dans notre catégorie Guide pour débutants… Nous avons également des articles dans notre catégorie Plugins WordPress qui sont destinés à cette audience. Si vous êtes dans notre catégorie Thèmes WP, alors les articles sont écrits pour les développeurs de thèmes débutants. Ce sont des débutants dans le domaine du développement. Idem pour les tutoriels.
J’espère que cela explique.
f1mktsol
@wpbeginner Si vous avez dépassé votre nom, vous devriez le changer pour qu’il corresponde à l’audience que vous semblez préférer. Envisagez de consulter un professionnel.
Skubeedoo
J'ai ajouté add_theme_support( ‘menus’ );
et je n'ai vu aucune option dans le panneau d'administration [où dois-je chercher ?] J'utilise le thème intrepidity. Je suis un débutant, donc c'est peut-être juste devant moi et je ne fais pas la différence. J'ai un site web qui contient un WP à l'intérieur et je veux pouvoir naviguer hors de WP et revenir à mon URL principale. Tout ce dont j'ai besoin est un lien de navigation "Accueil".
Merci d'avance.
Personnel éditorial
Il devrait apparaître sous l’onglet Apparence.
Admin
ianarosh
ami tu as un site génial et je suis content de l'avoir trouvé !
Je me cassais la tête pour comprendre comment ajouter le menu personnalisé et c'était facile après l'avoir vu ! Simplement incroyable.
Une suggestion, avez-vous déjà pensé à faire des articles sur la sécurité des blogs/serveurs ? (pas sûr que vous ayez déjà eu besoin d'explorer davantage :O)
Meilleures salutations et continuez le bon travail, mon ami !
Personnel éditorial
Faites une recherche, nous avons déjà un article à ce sujet.
Admin
Charles
Quelqu'un peut-il me dire comment ajouter la prise en charge de plusieurs menus dans le fichier functions.php. Je veux inclure deux ensembles de menus
Personnel éditorial
Vous n'avez pas besoin de deux ensembles de functions.php... Appelez simplement la fonction principale. Créez plusieurs menus en utilisant l'interface utilisateur dans wp-admin. Ensuite, vous devrez appeler les menus dans le code php.
Admin
Jamie
Juste pour vous informer, mais ce qui suit :
"add_theme_support( 'nav-menus' );"
A changé dans la version finale pour :
"add_theme_support( 'menus' );"
Thanks!
Peter Luit
@Jamie : Merci pour cette dernière remarque !
Personnel éditorial
Thanks Jamie, Post fixed
Admin
Jacob
Super. Juste ce que je cherchais. Comment ajouter le slug du menu à la fonction ?
Personnel éditorial
'menu' => 'Project Nav' comme ceci <<
Admin
Chris Creed
Merci pour cela – j'expérimente actuellement le nouveau système de menus – c'est une excellente fonctionnalité supplémentaire qui va rendre les choses tellement plus faciles. Je développe des thèmes et je reçois pas mal de demandes de support de personnes souhaitant créer des sections de navigation personnalisées sur leur site – les nouveaux menus devraient, espérons-le, aider à simplifier beaucoup les choses (surtout pour les personnes ayant peu d'expérience WordPress).
Gopal Bhattacharjee
Je teste également WordPress 3.0 Beta, maintenant je peux jouer avec les menus... Merci !
Angie
Je me demande comment supprimer ACCUEIL de mon menu de navigation en utilisant WP 3.0 bêta. Dois-je modifier la fonction wp_nav_menu ou y a-t-il une autre façon ?
Si je modifie la fonction, pouvez-vous me donner des instructions ?
Personnel éditorial
Vous pouvez simplement cliquer sur Supprimer... comme n'importe quel autre lien de navigation.
Admin
Kevin
C'est dommage qu'il n'y ait aucun moyen d'ajouter la page « accueil » au menu depuis le constructeur de menu. C'est un défaut majeur.
Personnel éditorial
Pourquoi pas ? Vous pouvez créer un lien de navigation personnalisé appelé Accueil et y ajouter l'URL de votre page d'accueil.
Admin
Noor
Je teste également WordPress 3.0 Beta et j'ai trouvé quelques mauvaises choses dans les menus... par exemple, c'est incohérent et j'espère que d'ici la sortie finale, cela deviendra cohérent.
michelle
beau tutoriel ! merci pour le partage !
Mani Viswanathan
Bons tutoriels d'abord ! ce sera utile lorsque je passerai à la version 3.0