{"id":29843,"date":"2020-07-14T19:06:51","date_gmt":"2020-07-14T19:06:51","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-creer-des-menus-de-navigation-pour-wordpress\/"},"modified":"2020-07-14T19:06:51","modified_gmt":"2020-07-14T19:06:51","slug":"comment-creer-des-menus-de-navigation-pour-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-creer-des-menus-de-navigation-pour-wordpress\/","title":{"rendered":"Comment cr\u00e9er des menus de navigation pour WordPress"},"content":{"rendered":"

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

\"Conception<\/p>\n

Nous allons vous 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 le code CSS au lieu du 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 cr\u00e9er des menus de navigation. De nombreux d\u00e9butants n’aiment pas modifier les 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. Cela vous emp\u00eache de modifier des fichiers de th\u00e8me ou d’\u00e9crire du 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 cr\u00e9er 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

Apr\u00e8s 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 Web en quelques clics.<\/p>\n

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

\"D\u00e9marrer<\/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 flottante CSS Hero 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 le menu de navigation et CSS Hero la mettra en surbrillance en montrant les bords autour d’elle. Lorsque vous cliquez sur le menu de navigation en surbrillance, il affiche les \u00e9l\u00e9ments que vous pouvez modifier. <\/p>\n

\"Pointez<\/p>\n

Dans la capture d’\u00e9cran ci-dessus, il montre le conteneur dans le menu de navigation sup\u00e9rieur. Supposons que nous voulons 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 du menu.<\/p>\n

CSS Hero affichera d\u00e9sormais diff\u00e9rentes propri\u00e9t\u00e9s que vous pouvez modifier, telles que 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, 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

Lorsque 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 vos modifications. 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

En g\u00e9n\u00e9ral, si vous utilisez la balise de menu WordPress standard, elle affichera une liste sans classes CSS associ\u00e9es. <\/p>\n

Votre liste non ordonn\u00e9e aurait le nom de classe \u00abmenu\u00bb, chaque \u00e9l\u00e9ment de la liste ayant sa propre classe CSS. <\/p>\n

Cela peut 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 standard peut provoquer des conflits avec les menus dans d’autres emplacements.<\/p>\n

C’est pourquoi vous devez \u00e9galement d\u00e9finir la classe CSS et l’emplacement du menu. Votre th\u00e8me WordPress le fait probablement d\u00e9j\u00e0 en ajoutant des menus de navigation en utilisant un code comme celui-ci: <\/p>\n

\n
\n

Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n