{"id":10141,"date":"2020-05-15T02:57:17","date_gmt":"2020-05-15T02:57:17","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-concevoir-des-menus-de-navigation-wordpress\/"},"modified":"2020-05-15T02:57:17","modified_gmt":"2020-05-15T02:57:17","slug":"comment-concevoir-des-menus-de-navigation-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-concevoir-des-menus-de-navigation-wordpress\/","title":{"rendered":"Comment concevoir des menus de navigation WordPress"},"content":{"rendered":"

Voulez-vous concevoir vos menus de navigation WordPress pour changer leurs couleurs ou leur apparence? Alors que votre th\u00e8me WordPress g\u00e8re l’apparence de vos menus de navigation, vous pouvez facilement le personnaliser en utilisant CSS pour r\u00e9pondre \u00e0 vos besoins. Dans cet article, nous vous montrerons comment concevoir des menus de navigation WordPress sur votre site. <\/p>\n

\"Conception<\/p>\n

Nous allons montrer deux m\u00e9thodes diff\u00e9rentes. La premi\u00e8re m\u00e9thode est destin\u00e9e aux d\u00e9butants car elle utilise un plugin et ne n\u00e9cessite aucune connaissance du code. La deuxi\u00e8me m\u00e9thode est destin\u00e9e aux utilisateurs interm\u00e9diaires de bricolage qui pr\u00e9f\u00e8rent utiliser du code CSS au lieu d’un plugin.<\/p>\n

<\/span>M\u00e9thode 1: concevoir des menus de navigation WordPress \u00e0 l’aide d’un plugin<\/span><\/h4>\n

Votre th\u00e8me WordPress utilise CSS pour concevoir des menus de navigation. De nombreux d\u00e9butants ne sont pas \u00e0 l’aise pour \u00e9diter des fichiers de th\u00e8me ou \u00e9crire du code CSS par eux-m\u00eames. <\/p>\n

C’est \u00e0 ce moment qu’un plugin de style WordPress devient pratique. Il vous \u00e9vite de modifier des fichiers de th\u00e8me ou d’\u00e9crire n’importe quel code.<\/p>\n

La premi\u00e8re chose \u00e0 faire est d’installer et d’activer le plugin CSS Hero. Pour plus de d\u00e9tails, consultez notre guide \u00e9tape par \u00e9tape sur la fa\u00e7on d’installer un plugin WordPress.<\/p>\n

CSS Hero est un plugin WordPress premium qui vous permet de concevoir votre propre th\u00e8me WordPress sans \u00e9crire une seule ligne de code (aucun HTML ou CSS requis). Consultez notre revue CSS Hero pour plus d’informations. <\/p>\n

Les utilisateurs de WPBeginner peuvent utiliser ce coupon CSS Hero pour obtenir une remise de 34% sur leur achat. <\/p>\n

Lors de l’activation, vous serez redirig\u00e9 pour obtenir votre cl\u00e9 de licence CSS Hero. Suivez simplement les instructions \u00e0 l’\u00e9cran et vous serez redirig\u00e9 vers votre site en quelques clics.<\/p>\n

Ensuite, vous devez cliquer sur le bouton CSS Hero dans la barre d’outils d’administration WordPress. <\/p>\n

\"Lancer<\/p>\n

CSS Hero propose un \u00e9diteur WYSIWYG (ce que vous voyez est ce que vous obtenez). En cliquant sur le bouton, vous acc\u00e9derez \u00e0 votre site Web avec une barre d’outils CSS Hero flottante visible \u00e0 l’\u00e9cran. <\/p>\n

\"Barre<\/p>\n

Vous devez cliquer sur l’ic\u00f4ne bleue en haut pour commencer l’\u00e9dition.<\/p>\n

Apr\u00e8s avoir cliqu\u00e9 sur l’ic\u00f4ne bleue, d\u00e9placez votre souris vers votre menu de navigation et CSS Hero la mettra en surbrillance en affichant les bordures autour d’elle. Lorsque vous cliquez sur le menu de navigation en surbrillance, il vous montrera les \u00e9l\u00e9ments que vous pouvez modifier. <\/p>\n

\"Pointez<\/p>\n

Dans la capture d’\u00e9cran ci-dessus, il nous montre le conteneur du menu de navigation sup\u00e9rieur. Supposons que nous voulions changer la couleur d’arri\u00e8re-plan de notre menu de navigation. Dans ce cas, nous s\u00e9lectionnerons la navigation sup\u00e9rieure qui affecte l’ensemble de notre menu.<\/p>\n

CSS Hero vous montrera maintenant diff\u00e9rentes propri\u00e9t\u00e9s que vous pouvez modifier comme le texte, l’arri\u00e8re-plan, la bordure, les marges, le remplissage, etc. <\/p>\n

\"Propri\u00e9t\u00e9s<\/p>\n

Vous pouvez cliquer sur n’importe quelle propri\u00e9t\u00e9 que vous souhaitez modifier. CSS Hero vous montrera une interface simple o\u00f9 vous pourrez effectuer vos modifications. <\/p>\n

\"Modifier<\/p>\n

Dans la capture d’\u00e9cran ci-dessus, nous avons s\u00e9lectionn\u00e9 l’arri\u00e8re-plan et cela nous a montr\u00e9 une belle interface pour s\u00e9lectionner la couleur d’arri\u00e8re-plan, le d\u00e9grad\u00e9, l’image et plus encore. <\/p>\n

Lorsque vous apportez des modifications, vous pouvez les voir en direct dans l’aper\u00e7u du th\u00e8me. <\/p>\n

\"Aper\u00e7u<\/p>\n

Une fois que vous \u00eates satisfait des modifications, cliquez sur le bouton Enregistrer de la barre d’outils CSS Hero pour enregistrer les modifications.<\/p>\n

La meilleure chose \u00e0 propos de l’utilisation de cette m\u00e9thode est que vous pouvez facilement annuler toutes les modifications que vous apportez. CSS Hero conserve un historique complet de toutes vos modifications et peut aller et venir entre ces modifications. <\/p>\n

<\/span>M\u00e9thode 2: concevoir manuellement des menus de navigation WordPress<\/span><\/h4>\n

Cette m\u00e9thode n\u00e9cessite que vous ajoutiez manuellement du CSS personnalis\u00e9 et est destin\u00e9e aux utilisateurs interm\u00e9diaires.<\/p>\n

Les menus de navigation WordPress sont affich\u00e9s dans une liste non ordonn\u00e9e (liste \u00e0 puces).<\/p>\n

Habituellement, si vous utilisez la balise de menu par d\u00e9faut de WordPress, il affichera une liste sans classes CSS associ\u00e9es. <\/p>\n

\r\n<\/pre>\n
Votre liste non ordonn\u00e9e aurait le nom de classe “menu” avec chaque \u00e9l\u00e9ment de liste ayant sa propre classe CSS. <\/p>\n
Cela pourrait fonctionner si vous n’avez qu’un seul emplacement de menu. Cependant, la plupart des th\u00e8mes ont plusieurs emplacements o\u00f9 vous pouvez afficher les menus de navigation.<\/p>\n
L’utilisation de la classe CSS par d\u00e9faut peut provoquer des conflits avec les menus d’autres emplacements.<\/p>\n
C’est pourquoi vous devez \u00e9galement d\u00e9finir la classe CSS et l’emplacement du menu. Il y a de fortes chances que votre th\u00e8me WordPress le fasse d\u00e9j\u00e0 en ajoutant les menus de navigation en utilisant un code comme celui-ci: <\/p>\n
\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n