Comment créer des structures de menu personnalisées dans WordPress

WordPress a une structure de navigation intégrée automatique qui crée vos menus pour vous. Il comprend des pages et des catégories. Il les placera dans votre menu principal sans que vous ayez à faire autre chose que de créer la page ou un article dans la catégorie. Cela fonctionne très bien si vous n'avez que quelques pages et catégories, mais après un certain temps, cela peut commencer à devenir incontrôlable. De plus, ce n'est pas parce qu'il peut gérer automatiquement votre navigation que vous devez le laisser faire.

WordPress gérera automatiquement vos menus sans aucune intervention de votre part, mais si vous voulez vraiment tirer pleinement parti de la structure de vos menus, vous pouvez créer vos propres menus personnalisés. Les menus personnalisés vous permettent de prendre le contrôle total de votre structure de navigation et peuvent donner à votre site un aspect plus propre et plus professionnel.

Types de menus

Il existe plusieurs types de menus différents. Les types de menus que vous pouvez utiliser dépendent des fonctionnalités de votre thème. Les types de menus populaires incluent :

• Menu principal - celui-ci apparaît sous l'en-tête. Il doit inclure votre navigation principale et les pages auxquelles vos visiteurs s'attendent en fonction du type de site Web que vous avez : accueil, à propos, contact, blog, portfolio, etc.
• Menu secondaire - celui-ci apparaît au-dessus de l'en-tête. Cela devrait inclure des liens et des pages que vous souhaitez donner à vos lecteurs dans un emplacement pratique, mais pas nécessairement dans votre structure de navigation principale. Il peut s'agir d'éléments tels que des tutoriels, un panier d'achat, etc.
• Barre latérale - vos menus personnalisés peuvent être placés dans la barre latérale à l'aide du widget de menu personnalisé. Vous pouvez utiliser autant de widgets que vous le souhaitez et y placer n'importe quel menu.
• Pied de page – vous pouvez créer un menu uniquement pour votre pied de page. Ce menu contient généralement moins d'informations que votre menu principal. Selon les besoins de votre site, il contient généralement la page d'accueil, à propos, contact, blog, etc. Si votre site comprend des offres d'emploi, un programme d'affiliation et des sites sœurs, ils peuvent également être inclus ici.
• Menu des liens sociaux - il s'agit d'un menu spécial qui se trouve dans des thèmes tels que Twenty Fifteen qui place vos liens de médias sociaux dans votre barre latérale. Si le thème reconnaît le réseau social, il fournira l'icône appropriée. Sinon, il affichera les noms sous forme de texte (selon la façon dont vous avez étiqueté le lien).

Les menus principal et secondaire sont les plus populaires parmi les thèmes WordPress. Ce qui s'y passe dépend vraiment de l'orientation de votre site. L'objectif principal de votre site doit apparaître dans le menu principal. Cela devrait avoir du sens pour vos visiteurs et être ce qu'ils s'attendent à voir.

Par exemple, si vous avez un magasin, votre panier doit se trouver dans le menu principal. Si vous avez un site de portefeuille mais que vous vendez également certaines choses, votre portefeuille doit être dans votre menu principal et le panier doit être dans le menu secondaire. Pensez simplement à l'endroit où il s'intègre logiquement et placez-le en conséquence.

Créer vos propres menus personnalisés

WordPress facilite la création manuelle de vos propres menus personnalisés. Vous pouvez créer, ajuster et appliquer des menus depuis le back-end, et vous pouvez sélectionner vos menus depuis le front-end pour les voir et les tester avant de les mettre en ligne.

Création des menus à partir du back-end

Sur le back-end, accédez à Apparence et sélectionnez Menus. Sur le front-end, accédez à Personnaliser et sélectionnez Navigation.

Sur l'écran du menu, sélectionnez créer un nouveau menu, donnez un nom au menu et cliquez sur le bouton Créer un menu.

Vous êtes maintenant prêt à commencer à ajouter la structure de navigation. Sur la gauche, vous avez des cases pour les pages, les liens personnalisés et les catégories. Vous pouvez tous les utiliser comme liens dans votre menu personnalisé. Au milieu, vous avez quelques options. Vous pouvez autoriser l'ajout automatique de toutes les nouvelles pages à la structure du menu ou laisser cette option décochée si vous souhaitez avoir plus de contrôle et choisir vous-même les pages et les catégories.

pages

Sélectionnez l'onglet Pages dans la fenêtre de gauche s'il n'est pas déjà ouvert. Pour ajouter des pages au menu, sélectionnez toutes les pages souhaitées et cliquez sur Ajouter au menu.

Si vous souhaitez qu'ils soient disposés différemment, faites simplement glisser et déposez l'élément de menu que vous souhaitez déplacer vers son nouvel emplacement. Vous pouvez même en faire un sous-élément d'un autre élément de menu en le faisant glisser et en le déposant vers la droite sous l'élément dont vous voulez qu'il soit un sous-élément.

Vous pouvez sélectionner la flèche à droite pour ouvrir l'élément et effectuer des ajustements tels que le changement de nom et d'emplacement. Vous pouvez également supprimer l'élément de la structure du menu ici.

Liens personnalisés

Pour ajouter des liens personnalisés, ouvrez Liens personnalisés dans la fenêtre de gauche, ajoutez l'URL souhaitée et sélectionnez Ajouter au menu. Vous pouvez créer n'importe quel type de lien que vous voulez et les intégrer à la structure de votre menu. C'est également ainsi que vous créez des liens pour le menu Liens sociaux.

Vous pouvez ensuite le faire glisser et le déposer où vous le souhaitez dans la structure du menu.

Catégories

Vous choisissez et ajoutez des catégories de la même manière que vous choisissez et ajoutez des pages dans la fenêtre de gauche. Ils agiront de la même manière que les pages et les liens dans le menu.

Enregistrez votre menu

Une fois que vous aimez votre nouvelle structure de menu, enregistrez-la et vous pourrez l'utiliser.

Gérer les emplacements

Il y a deux façons d'utiliser votre menu depuis le back-end.

Paramètres des menus

Sur l'écran où vous avez créé le menu, il y a un groupe de cases à cocher sous Paramètres du menu. Vous pouvez sélectionner n'importe quel menu, puis sélectionner où il doit être utilisé. Vous pouvez en sélectionner autant que vous le souhaitez. N'oubliez pas de le sauvegarder.

Gérer les emplacements

Sélectionnez l'onglet Gérer les emplacements. Ici, vous pouvez choisir quel menu utiliser où dans les listes déroulantes. Vous n'êtes pas obligé de tous les utiliser. Une fois que vous avez choisi lequel de vos menus sera utilisé, appuyez simplement sur Enregistrer et vous venez de mettre à jour la structure de votre menu.

Widget

WordPress dispose également d'un widget de menu personnalisé que vous pouvez faire glisser et déposer dans vos barres latérales. De là, vous pouvez sélectionner votre menu.

Essai

Voici un aperçu de mon menu de test et de mon widget de barre latérale. La prochaine chose à faire est de tester chaque élément pour vous assurer qu'il fonctionne de manière fluide et intuitive. N'oubliez pas cette étape. Il est très important de tester votre menu pour voir s'il fonctionne comme vous l'aviez prévu. Évidemment, ce ne sont pas des titres de menu que vous devriez utiliser sur votre site Web.

Utilisation du frontal pour une vue WYSIWYG

Pour modifier la structure de votre menu depuis le frontal, accédez à Apparence et sélectionnez Personnaliser. Une fois arrivé à l'avant, choisissez Navigation. De là, vous pouvez choisir vos menus. L'avantage de cette vue est que vous pouvez voir les modifications immédiatement avant de les enregistrer. De cette façon, vous pouvez décider si vous l'aimez avant de vous engager. Malheureusement, ce système ne vous permet pas de les créer.

Personnalisez l'apparence avec des thèmes comme Divi

Certains thèmes, tels que Divi 2.4 d'Elegant Theme, vous donnent des outils pour que vous puissiez ajuster l'apparence de vos menus à partir du front-end et voir leurs effets immédiatement. De cette façon, vous saurez ce que vos visiteurs verront avant de l'enregistrer.

Voici un aperçu des ajustements du menu de Divi. Vous pouvez effectuer ces mêmes ajustements pour modifier l'apparence de chaque élément de menu.

Personnalisation encore plus poussée - Utilisation de plugins pour modifier vos menus

Il existe de nombreux plugins disponibles pour WordPress qui vous aident à modifier vos menus personnalisés avec de nouvelles fonctionnalités, apparences et fonctionnalités. Ils ajoutent de nombreux ajustements CSS, les rendent réactifs et même les rendent plus rapides. Voici un aperçu de quelques-uns des plugins les plus populaires.

Widget de l'assistant de menu personnalisé

Ce plugin gratuit ajoute un widget de menu personnalisé que vous pouvez utiliser dans vos barres latérales ou dans votre contenu en utilisant des codes abrégés. Il vous donne un contrôle total sur les paramètres de votre menu et vous permet d'utiliser des parties spécifiques de vos menus personnalisés. Il ajoute également des classes personnalisées.

Vous pouvez afficher des parties spécifiques du menu ou le menu entier. Vous pouvez également rendre la sortie conditionnelle. Il s'affichera sous forme plate ou hiérarchique selon le nombre de niveaux que vous spécifiez. Vous pouvez également modifier la sortie avec HTML.

Les paramètres du widget sont faciles à utiliser. Vous choisissez le menu dans une liste déroulante et sélectionnez les filtres, les solutions de secours, la sortie, le conteneur, les classes, les liens et l'alternative (il s'agit d'un autre niveau de conditions). Il vous donne également un shortcode pour que vous puissiez coller vos menus dans votre contenu.

Menu accordéon Nextend

Ce plugin vous permet de créer des menus de style accordéon avec un contrôle complet sur les niveaux de menu, les couleurs, l'animation, etc., chacun avec ses propres paramètres et skins. Vous contrôlez les niveaux et les états des polices, des arrière-plans, des couleurs, des images, etc. Il accélère le système de menus en utilisant le cache, fournit différents types d'animation, propose des niveaux de menus illimités et fournit 30 paramètres.

J'aime la façon dont les menus d'accordéon fonctionnent. Vous pouvez les développer lorsque vous souhaitez les utiliser, puis les masquer pour vous donner une mise en page plus propre lorsque vous ne souhaitez pas les voir à l'écran. Le plugin est facile à utiliser et à configurer. Vous créez des menus comme vous le feriez pour des types de contenu personnalisés. Vous pouvez ensuite faire glisser le widget dans vos barres latérales et choisir le menu dans le widget.

Il existe également une édition Pro qui ajoute trois thèmes et un support. Les prix commencent à 29 $.

Menu réactif

Ce plugin gratuit dispose de 70 options pour ajuster l'apparence, la sensation et l'action de vos menus. Vous pouvez ajuster les titres, le CSS, les actions, les tailles, l'animation, les scripts et bien plus encore. Il fonctionne très bien pour les appareils mobiles et possède des fonctionnalités pour tirer le menu d'un côté et définir l'emplacement du menu. Cela réduira même le CSS et le JavaScript de votre menu. Vous pouvez également ajouter du code HTML personnalisé et importer/exporter vos paramètres.

Il y a beaucoup de réglages dans les paramètres mais ils sont tous simples à comprendre et à régler. Il existe également un niveau avancé de paramètres, mais vous pouvez les ignorer si vous le souhaitez. Il comprend des shortcodes et vous pouvez même ajouter le code PHP à votre thème si vous préférez.

Autres plugins pour modifier les menus

Voici une liste d'autres plugins que j'ai trouvé intéressants. Ils ajoutent ou modifient les fonctionnalités de vos menus et vous permettent de les contrôler de différentes manières.

• WordPress Méga Menu
• Méga menu déroulant CSS3
• Menu réactif WP
• Font Awesome 4 Menus
• Shortcodes dans les menus
• Apparence plus rapide – Menus
• Menu Nourriture et Boissons
• Menus de vente au détail simples
• Purifier les menus WordPress
• Menuiseur de widget

Conseils pour créer de superbes structures de menus

• Utilisez vos menus pour garder votre structure de navigation organisée.
• Utilisez le moins de niveaux possible. Pensez en termes de Primaire et Secondaire.
• Utilisez des noms qui ont du sens pour les lecteurs sans qu'ils aient à déchiffrer votre code.
• Utilisez la méthode KISS. Rappelez-vous - plus simple est mieux. Les menus doivent être faciles à utiliser et intuitifs.
• Vérifiez les structures de menu de vos sites préférés et voyez ce que vous aimez et ce que vous n'aimez pas. Améliorez ensuite la vôtre.

Dernières pensées

L'ajout de votre propre structure de menu personnalisée est facile et donnera à votre site WordPress une apparence et une sensation plus professionnelles et empêchera votre structure de paraître aléatoire. Cela ne prend que quelques minutes pour créer votre propre ensemble de menus et vous pouvez les voir et les essayer avant de les mettre en ligne. Vos visiteurs apprécieront une structure de menu qui leur permet de naviguer sur votre site de manière plus rapide et intuitive.

À ton tour! Avez-vous créé votre propre structure de menu personnalisée ? Avez-vous quelque chose à ajouter? Utilisez-vous des plugins pour modifier vos menus ? Parlez-nous-en dans les commentaires ci-dessous.