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.
Jiří Vaněk
J'ai toujours voulu éviter les plugins pour ce genre de choses. C'est pourquoi j'apprécie toujours lorsque vous proposez également l'option d'utiliser WP Code et des snippets. Je les essaie toujours d'abord sur un site de test et celui-ci fonctionne très bien. Je sauvegarde ensuite vos snippets dans mon propre magasin de code, auquel je peux toujours revenir si nécessaire. Merci.
Support WPBeginner
Glad to hear you found our code snippets helpful!
Admin
Mike
Merci d'avoir montré le code, j'ai un problème, mon nouveau nouveau affiche toujours le même contenu que le menu principal après que j'ai appliqué :
wp_nav_menu( array( ‘theme_location’=>’too-right-menu’, ‘container_class’=>’top-right-class’ ) );
Aidez-moi s'il vous plaît.
Support WPBeginner
Vous utilisez peut-être le même nom qu'un autre menu actif dans votre thème. Si ce n'est pas déjà fait, veuillez essayer un nom d'emplacement différent.
Admin
Shubham Kumar
Comment puis-je rendre ce menu fixe ? J'utilise la première méthode, c'est-à-dire coller le code dans le fichier header.php du thème. Maintenant, j'aimerais rendre cet élément fixe si l'utilisateur fait défiler à partir de cet emplacement de menu.
Amit Singh
J'ai créé deux menus. Un à gauche du logo et l'autre à droite. Maintenant, je veux ajouter un sous-menu. Je fais simplement glisser les menus sous le parent, mais cela ne fonctionne pas. Avez-vous un article expliquant comment ajouter un sous-menu personnalisé
Support WPBeginner
Pas pour le moment, mais nous en tiendrons certainement compte pour de futurs articles.
Admin
Mohit
Continuez votre excellent travail
Support WPBeginner
Glad you continue to enjoy our content
Admin
Saurabh
mon menu ne s'affiche pas dans l'en-tête. il s'affiche sous le titre de la page
Support WPBeginner
Vous devrez peut-être modifier l'emplacement d'insertion du code dans le modèle, mais si vous contactez le support de votre thème actuel, ils devraient pouvoir vous indiquer où l'en-tête est ajouté dans leur thème.
Admin
ian
bonjour
pourquoi je ne peux pas voir la page des menus de mon site web ?
la mise en page des tutoriels ne ressemble absolument pas à mon écran
merci
Support WPBeginner
Votre site est-il un site WordPress.com ? https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
krishna
bonjour
je veux ajouter mon propre html pour l'en-tête
comment puis-je faire cela ?
Mukeshwar Singh
Salut, j'utilise Magazine Pro et il n'y a pas d'option de menu personnalisé dans la zone des widgets !! J'ai utilisé votre code pour créer un menu personnalisé mais j'ai besoin d'aide car il n'y a pas d'option de menu personnalisé dans la zone des widgets, ce qui m'empêche de le faire glisser et déposer dans la zone du pied de page... S'il vous plaît, aidez-moi
Elle
Salut ! J'ai terminé le tutoriel et j'ai pu ajouter le menu à l'emplacement souhaité sur mon site. Je l'ai stylisé et tout. PROBLÈME : Le menu apparaît au moment du rechargement de la page, je peux même cliquer dessus ! Cependant, il disparaît rapidement derrière mon en-tête. Il n'est pas cliquable après avoir disparu. Mon cerveau explose en essayant de comprendre ça !!
Furqan
Salut
Au début, je crée le menu d'ajout avec un nom, mon menu personnalisé, et il est parfaitement fonctionnel et récupéré, puis je change son nom en menu de pied de page, après avoir changé son nom en navigation personnalisée, il ne récupère pas, quelle est la raison
Himanshu
Juste une question : que dois-je faire avec la barre de navigation existante de WordPress ? Comment la supprimer.
karima
Salut, une amie a un problème, enfin plusieurs. Elle a la barre de navigation horizontale de l'en-tête mais aussi une barre verticale à côté qui obstrue le contenu de la page. Elle apparaît lorsque vous commencez à faire défiler la page d'accueil mais est fixe sur toutes les pages de contenu. Quelqu'un peut-il regarder et conseiller s'il vous plaît ? Il y a aussi un avis d'erreur dont nous ne trouvons pas comment nous débarrasser. Toute aide est appréciée.
sudhakar
comment supprimer le curseur par défaut de n'importe quel thème et comment ajouter notre nouveau modèle de curseur sur la page d'accueil
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://www.wpbeginner.com/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