{"id":17532,"date":"2020-06-05T14:40:17","date_gmt":"2020-06-05T14:40:17","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/15-meilleurs-tutoriels-pour-maitriser-les-menus-de-navigation-wordpress\/"},"modified":"2020-06-05T14:40:17","modified_gmt":"2020-06-05T14:40:17","slug":"15-meilleurs-tutoriels-pour-maitriser-les-menus-de-navigation-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/15-meilleurs-tutoriels-pour-maitriser-les-menus-de-navigation-wordpress\/","title":{"rendered":"15 meilleurs tutoriels pour ma\u00eetriser les menus de navigation WordPress"},"content":{"rendered":"<p>Recherchez-vous les meilleurs tutoriels pour travailler avec les menus de navigation WordPress? Les menus de navigation WordPress vous permettent de personnaliser et de g\u00e9rer facilement les menus de votre site Web. Dans cet article, nous vous montrerons les meilleurs tutoriels pour ma\u00eetriser les menus de navigation WordPress. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Les meilleurs tutoriels pour ma\u00eetriser les menus de navigation WordPress\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/navmenuswp.jpg\" alt=\"Les meilleurs tutoriels pour ma\u00eetriser les menus de navigation WordPress\" width=\"520\" height=\"340\" class=\"alignnone size-full wp-image-39283\"><\/p>\n<p>Comme il s&#8217;agit d&#8217;un article complet, nous avons ajout\u00e9 une liste de contenus pour faciliter la navigation. <\/p>\n<ol>\n<li>Commencer avec les menus de navigation de WordPress<\/li>\n<li>Ajouter des ic\u00f4nes de m\u00e9dias sociaux aux menus WordPress<\/li>\n<li>Afficher diff\u00e9rents menus pour les utilisateurs WordPress enregistr\u00e9s<\/li>\n<li>Ajouter une logique conditionnelle aux menus de navigation<\/li>\n<li>Style de menu de navigation WordPress<\/li>\n<li>Ajouter des ic\u00f4nes d&#8217;image avec des menus de navigation dans WordPress<\/li>\n<li>Ajouter des menus de navigation personnalis\u00e9s dans WordPress<\/li>\n<li>Ajouter le menu du panneau coulissant dans les th\u00e8mes WordPress<\/li>\n<li>Cr\u00e9ez un menu WordPress r\u00e9actif pr\u00eat pour les appareils mobiles<\/li>\n<li>Ajouter un menu plein \u00e9cran r\u00e9actif dans WordPress<\/li>\n<li>Ajouter une description avec des menus de navigation dans WordPress<\/li>\n<li>Comment ajouter des th\u00e8mes dans les menus de navigation de WordPress<\/li>\n<li>Comment ajouter des menus de navigation dans la barre lat\u00e9rale de WordPress<\/li>\n<li>Ajouter un menu de navigation WordPress sur les publications et les pages<\/li>\n<li>Ajouter des liens NoFollow dans les menus de navigation de WordPress<\/li>\n<\/ol>\n<h4 id=\"gettingstarted\"><span class=\"ez-toc-section\" id=\"1_Introduction_aux_menus_de_navigation_de_WordPress\"><\/span>1. Introduction aux menus de navigation de WordPress<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Dans la conception Web, le menu de navigation est une liste de liens qui permet aux visiteurs de votre site Web de visiter diff\u00e9rentes pages et sections de votre site Web. Il aide les utilisateurs \u00e0 naviguer sur leur site Web, d&#8217;o\u00f9 le nom du menu de navigation. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Le menu de navigation\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/navigationmenu.png\" alt=\"Le menu de navigation\" width=\"520\" height=\"254\" class=\"alignnone size-full wp-image-39275\"><\/p>\n<p>WordPress est livr\u00e9 avec un outil int\u00e9gr\u00e9 qui vous permet de cr\u00e9er et d&#8217;utiliser des menus sur votre site Web. Cet outil est en <strong>Apparence \u00bbMenus<\/strong> page dans votre zone d&#8217;administration WordPress. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Cr\u00e9er et g\u00e9rer des menus de navigation dans WordPress\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/menusinwp.png\" alt=\"Cr\u00e9er et g\u00e9rer des menus de navigation dans WordPress\" width=\"520\" height=\"317\" class=\"alignnone size-full wp-image-39276\"><\/p>\n<p>Ici, vous pouvez cr\u00e9er des menus en ajoutant des \u00e9l\u00e9ments de la colonne de gauche \u00e0 droite. Vous pouvez ajouter des articles, des pages, des cat\u00e9gories et des liens personnalis\u00e9s WordPress \u00e0 vos menus. <\/p>\n<p>Pour des instructions d\u00e9taill\u00e9es, consultez notre guide du d\u00e9butant sur la fa\u00e7on d&#8217;ajouter des menus de navigation dans WordPress. <\/p>\n<h4 id=\"socialmediaicons\"><span class=\"ez-toc-section\" id=\"2_Ajoutez_des_icones_de_medias_sociaux_aux_menus_WordPress\"><\/span>2. Ajoutez des ic\u00f4nes de m\u00e9dias sociaux aux menus WordPress<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Les menus WordPress peuvent \u00e9galement \u00eatre utilis\u00e9s pour ajouter des boutons de m\u00e9dias sociaux \u00e0 votre site Web. Cela vous permet de mettre \u00e0 jour facilement les ic\u00f4nes, de les r\u00e9organiser et d&#8217;ajouter de nouvelles ic\u00f4nes de r\u00e9seaux sociaux \u00e0 tout moment. <\/p>\n<p>La fa\u00e7on la plus simple de le faire est d&#8217;utiliser le plugin Social Icon Menu. Pour plus de d\u00e9tails, consultez notre guide \u00e9tape par \u00e9tape sur la fa\u00e7on d&#8217;installer un plugin WordPress.<\/p>\n<p>Apr\u00e8s l&#8217;activation, acc\u00e9dez \u00e0 <strong>Apparence \u00bbMenus<\/strong> page. Cr\u00e9ez un nouveau menu social, puis sur l&#8217;onglet de liens personnalis\u00e9s dans la colonne de gauche. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Ajouter des menus sociaux\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/social-icons-menu.png\" alt=\"Ajouter des menus sociaux\" width=\"520\" height=\"289\" class=\"alignnone size-full wp-image-39175\"> <\/p>\n<p>Vous verrez des ic\u00f4nes de m\u00e9dias sociaux sous le texte du lien et les champs URL. Tout ce que vous avez \u00e0 faire est de cliquer sur une ic\u00f4ne de r\u00e9seau social et de saisir l&#8217;URL de votre profil social. Lorsque vous avez termin\u00e9, cliquez sur le bouton Ajouter au menu. <\/p>\n<p>R\u00e9p\u00e9tez ce processus pour tous les profils de m\u00e9dias sociaux que vous souhaitez ajouter. Une fois que vous avez termin\u00e9, s\u00e9lectionnez un emplacement de menu, puis cliquez sur le bouton Enregistrer le menu. <\/p>\n<p>Pour des instructions plus d\u00e9taill\u00e9es, consultez notre guide sur la fa\u00e7on d&#8217;ajouter des ic\u00f4nes de m\u00e9dias sociaux aux menus WordPress. <\/p>\n<h4 id=\"loggedinusers\"><span class=\"ez-toc-section\" id=\"3_Affichez_differents_menus_pour_les_utilisateurs_WordPress_enregistres\"><\/span>3. Affichez diff\u00e9rents menus pour les utilisateurs WordPress enregistr\u00e9s<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Si vous ex\u00e9cutez un site d&#8217;adh\u00e9sion WordPress, vous souhaiterez peut-\u00eatre afficher diff\u00e9rents menus pour vos utilisateurs enregistr\u00e9s. Voici comment vous pouvez facilement y parvenir. <\/p>\n<p>Vous devez d&#8217;abord cr\u00e9er deux menus diff\u00e9rents. Un pour les utilisateurs connect\u00e9s et un pour les utilisateurs non connect\u00e9s. Vous pouvez nommer ces menus connect\u00e9s et d\u00e9connect\u00e9s.<\/p>\n<p>Ensuite, vous devez ajouter ce code au fichier functions.php de votre th\u00e8me ou \u00e0 un plug-in sp\u00e9cifique au site. <\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">function my_wp_nav_menu_args( $args=\"\" ) {\r\n\r\nif( is_user_logged_in() ) { \r\n\t$args['menu'] = 'logged-in';\r\n} else { \r\n\t$args['menu'] = 'logged-out';\r\n} \r\n\treturn $args;\r\n}\r\nadd_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );\r\n<\/pre>\n<p>C&#8217;est tout. Vous pouvez maintenant tester vos menus de navigation en action. <\/p>\n<p>Pour des instructions plus d\u00e9taill\u00e9es, consultez notre tutoriel sur la fa\u00e7on d&#8217;afficher diff\u00e9rents menus pour les utilisateurs WordPress enregistr\u00e9s. <\/p>\n<p>Voulez-vous changer les menus en fonction de certaines conditions? Comme un menu diff\u00e9rent sur la page d&#8217;accueil, ou masquez un \u00e9l\u00e9ment dans des publications individuelles. Voil\u00e0 comment vous pouvez y parvenir dans WordPress. <\/p>\n<p>Vous devez d&#8217;abord installer et activer le plugin If Menu. <\/p>\n<p>Lors de l&#8217;activation, visitez <strong>Apparence \u00bbMenus<\/strong> l&#8217;\u00e9cran et cliquez sur un \u00e9l\u00e9ment de menu que vous souhaitez modifier. Vous remarquerez une nouvelle option pour \u00abActiver la logique conditionnelle\u00bb. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Option logique conditionnelle pour un \u00e9l\u00e9ment de menu\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/conditional-menu.gif\" alt=\"Option logique conditionnelle pour un \u00e9l\u00e9ment de menu\" width=\"520\" height=\"421\" class=\"alignnone size-full wp-image-39181\"><\/p>\n<p>Cocher cette option vous montrera deux options d\u00e9roulantes. Vous pouvez s\u00e9lectionner afficher ou masquer pour un menu s&#8217;il correspond \u00e0 certaines conditions. Par exemple, masquez l&#8217;\u00e9l\u00e9ment de menu si un utilisateur est un administrateur ou affichez un \u00e9l\u00e9ment de menu uniquement si un utilisateur examine une seule publication. <\/p>\n<p>Pour des instructions plus d\u00e9taill\u00e9es, consultez notre article sur l&#8217;ajout de logique conditionnelle aux menus WordPress. <\/p>\n<p>Votre th\u00e8me WordPress contr\u00f4le l&#8217;apparence des menus de navigation sur votre site Web. En utilisant CSS, vous pouvez personnaliser l&#8217;apparence des menus de navigation. <\/p>\n<p>La fa\u00e7on la plus simple de le faire est d&#8217;utiliser le plugin CSS Hero. Il s&#8217;agit d&#8217;un plugin WordPress premium qui vous permet de personnaliser n&#8217;importe quel th\u00e8me WordPress sans \u00e9crire une seule ligne de code (aucun HTML ou CSS requis). Consultez notre revue CSS Hero pour plus d&#8217;informations.<\/p>\n<p>Vous pouvez \u00e9galement concevoir vos menus de navigation en \u00e9crivant CSS manuellement. Pour des instructions d\u00e9taill\u00e9es, consultez notre guide sur la conception des menus de navigation WordPress. <\/p>\n<h4 id=\"imageicons\"><span class=\"ez-toc-section\" id=\"6_Ajoutez_des_icones_dimage_avec_des_menus_de_navigation_dans_WordPress\"><\/span>6. Ajoutez des ic\u00f4nes d&#8217;image avec des menus de navigation dans WordPress<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Ic\u00f4nes d'image dans les menus de navigation\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/menuicons1.jpg\" alt=\"Ic\u00f4nes d'image dans les menus de navigation\" width=\"520\" height=\"300\" class=\"alignnone size-full wp-image-39205\"><\/p>\n<p>De nombreux sites Web populaires utilisent des ic\u00f4nes d&#8217;image \u00e0 c\u00f4t\u00e9 de leurs menus de navigation pour les rendre plus visibles. Voici comment vous pouvez ajouter des ic\u00f4nes d&#8217;image avec des menus de navigation dans WordPress. <\/p>\n<p>Tout d&#8217;abord, vous devez installer et activer le plugin d&#8217;image de menu. Apr\u00e8s l&#8217;activation, acc\u00e9dez \u00e0 Apparence \u00bbMenus. L\u00e0, vous verrez une option pour ajouter des images avec chaque \u00e9l\u00e9ment de votre menu existant.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Ajouter une image \u00e0 un \u00e9l\u00e9ment de menu dans WordPress\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/menu-image.png\" alt=\"Ajouter une image \u00e0 un \u00e9l\u00e9ment de menu dans WordPress\" width=\"520\" height=\"365\" class=\"alignnone size-full wp-image-39206\"><\/p>\n<p>Vous pouvez \u00e9galement utiliser CSS pour ajouter des ic\u00f4nes d&#8217;image. Pour des instructions d\u00e9taill\u00e9es, consultez notre guide sur la fa\u00e7on d&#8217;ajouter des ic\u00f4nes d&#8217;image avec des menus de navigation dans WordPress. <\/p>\n<p>La plupart des th\u00e8mes WordPress gratuits et premium sont livr\u00e9s avec des emplacements pr\u00e9d\u00e9finis pour afficher leurs menus de navigation. Cependant, vous pouvez \u00e9galement ajouter des menus de navigation personnalis\u00e9s \u00e0 vos th\u00e8mes. <\/p>\n<p>Tout d&#8217;abord, vous devrez enregistrer votre nouveau menu de navigation en ajoutant ce code au fichier functions.php de votre th\u00e8me.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">function wpb_custom_new_menu() {\r\n  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));\r\n}\r\nadd_action( 'init', 'wpb_custom_new_menu' );\r\n<\/pre>\n<p>Ce code cr\u00e9era &#8220;Mon menu personnalis\u00e9&#8221; pour votre th\u00e8me. Vous pouvez le voir en modifiant un menu dans <strong>Apparence \u00bbMenus<\/strong> page. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" title=\"Emplacement du th\u00e8me pour votre menu personnalis\u00e9\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/mycustommenu.jpg\" alt=\"Emplacement du th\u00e8me pour votre menu personnalis\u00e9\" width=\"520\" height=\"341\" class=\"alignnone size-full wp-image-39207\"><\/p>\n<p>Afin d&#8217;afficher votre menu personnalis\u00e9, vous devrez ajouter ce code \u00e0 votre th\u00e8me o\u00f9 vous souhaitez afficher le menu. <\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\n  <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 ez-toc-wrap-center counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogging-techies.com\/fr\/15-meilleurs-tutoriels-pour-maitriser-les-menus-de-navigation-wordpress\/#1_Introduction_aux_menus_de_navigation_de_WordPress\" >1. Introduction aux menus de navigation de WordPress<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogging-techies.com\/fr\/15-meilleurs-tutoriels-pour-maitriser-les-menus-de-navigation-wordpress\/#2_Ajoutez_des_icones_de_medias_sociaux_aux_menus_WordPress\" >2. Ajoutez des ic\u00f4nes de m\u00e9dias sociaux aux menus WordPress<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogging-techies.com\/fr\/15-meilleurs-tutoriels-pour-maitriser-les-menus-de-navigation-wordpress\/#3_Affichez_differents_menus_pour_les_utilisateurs_WordPress_enregistres\" >3. Affichez diff\u00e9rents menus pour les utilisateurs WordPress enregistr\u00e9s<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogging-techies.com\/fr\/15-meilleurs-tutoriels-pour-maitriser-les-menus-de-navigation-wordpress\/#6_Ajoutez_des_icones_dimage_avec_des_menus_de_navigation_dans_WordPress\" >6. Ajoutez des ic\u00f4nes d&#8217;image avec des menus de navigation dans WordPress<\/a><\/li><\/ul><\/nav><\/div>\n ","protected":false},"excerpt":{"rendered":"<p>Recherchez-vous les meilleurs tutoriels pour travailler avec les menus de navigation WordPress? Les menus de navigation WordPress vous permettent de personnaliser et de g\u00e9rer facilement les menus de votre site Web. Dans cet article, nous vous montrerons les meilleurs tutoriels pour ma\u00eetriser les menus de navigation WordPress. Comme il s&#8217;agit d&#8217;un article complet, nous avons [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":17533,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-17532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-comparaison"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/17532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/comments?post=17532"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/17532\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media\/17533"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media?parent=17532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/categories?post=17532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/tags?post=17532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}