{"id":238016,"date":"2022-04-10T14:15:00","date_gmt":"2022-04-10T11:15:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=238016"},"modified":"2021-10-27T03:59:56","modified_gmt":"2021-10-27T00:59:56","slug":"comment-ajouter-des-images-aux-elements-de-menu-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-ajouter-des-images-aux-elements-de-menu-dans-wordpress\/","title":{"rendered":"Comment ajouter des images aux \u00e9l\u00e9ments de menu dans WordPress"},"content":{"rendered":"<p>J&rsquo;ai de bonnes nouvelles.<\/p>\n<p>L&rsquo;ajout d&rsquo;images aux \u00e9l\u00e9ments de menu est \u00e9tonnamment simple.<\/p>\n<p>Normalement, l&rsquo;ajout d&rsquo;images n\u00e9cessite une compr\u00e9hension du code. Mais gr\u00e2ce \u00e0 un plugin pratique, vous n&rsquo;avez pas besoin de conna\u00eetre la premi\u00e8re chose sur le code.<\/p>\n<p>En fait, cette solution est simple comme l&rsquo;\u00e9diteur de menu habituel, et elle vous permet d&rsquo;ajouter des images comme ceci :<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39d98fbfe.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39d98fbfe.png\" alt=\"Comment ajouter des images aux \u00e9l\u00e9ments de menu dans WordPress\" ><\/a><\/p>\n<p>Dans cet article, d\u00e9couvrez un plugin qui vous permet d&rsquo;ajouter des images \u00e0 n&rsquo;importe lequel de vos \u00e9l\u00e9ments de menu et apprenez \u00e0 l&rsquo;utiliser sur votre site.<\/p>\n<p>Pour ajouter des images \u00e0 votre menu, t\u00e9l\u00e9chargez et installez le plugin <a href=\"https:\/\/wordpress.org\/plugins\/menu-image\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Menu Image<\/a>.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/menu-image\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39db9f678.png\" alt=\"Comment ajouter des images aux \u00e9l\u00e9ments de menu dans WordPress\" \/><\/a><\/p>\n<p>Ce plugin vous permet d&rsquo;ajouter une image \u00e0 n&rsquo;importe quel \u00e9l\u00e9ment de menu et de contr\u00f4ler tous les aspects du style, y compris la position et la taille de l&rsquo;image.<\/p>\n<p>Une fois activ\u00e9, visitez votre page Menus (Apparence &gt; Menus) et cliquez sur la fl\u00e8che d\u00e9roulante sur un \u00e9l\u00e9ment de menu.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39dd6dbec.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39dd6dbec.png\" alt=\"Comment ajouter des images aux \u00e9l\u00e9ments de menu dans WordPress\" ><\/a><\/p>\n<p><strong>Vous n&rsquo;avez pas encore de menu ?<\/strong> Vous devrez peut-\u00eatre d&rsquo;abord <a href=\"https:\/\/www.competethemes.com\/help\/customize-menu-cele\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cr\u00e9er un menu personnalis\u00e9<\/a>.<\/p>\n<p>Cela r\u00e9v\u00e8le les param\u00e8tres de l&rsquo;\u00e9l\u00e9ment de menu. Apr\u00e8s avoir install\u00e9 Menu Image, vous verrez un ensemble suppl\u00e9mentaire d&rsquo;options pour ajouter une image.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39df3e9e3.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39df3e9e3.png\" alt=\"Comment ajouter des images aux \u00e9l\u00e9ments de menu dans WordPress\" ><\/a><\/p>\n<p>T\u00e9l\u00e9chargez une image, modifiez l&rsquo;\u00e9tat du survol, choisissez une taille et positionnez-la avec Menu Image<\/p>\n<p>\u00c0 titre d&rsquo;exemple, je vais utiliser cette petite ic\u00f4ne de personne pour l&rsquo;\u00e9l\u00e9ment de menu \u00c0 propos\u00a0:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39e0b738b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39e0b738b.png\" alt=\"Comment ajouter des images aux \u00e9l\u00e9ments de menu dans WordPress\" ><\/a><\/p>\n<p>Pour ajouter l&rsquo;image, cliquez sur le bouton D\u00e9finir l&rsquo;image et vous verrez la fen\u00eatre contextuelle famili\u00e8re de la biblioth\u00e8que multim\u00e9dia o\u00f9 vous pouvez t\u00e9l\u00e9charger une nouvelle image ou en s\u00e9lectionner une existante.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39e243bec.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39e243bec.png\" alt=\"Comment ajouter des images aux \u00e9l\u00e9ments de menu dans WordPress\" ><\/a><\/p>\n<p>Une fois que vous avez ajout\u00e9 votre image, vous verrez un aper\u00e7u dans l&rsquo;\u00e9diteur d&rsquo;\u00e9l\u00e9ments de menu.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39e432644.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39e432644.png\" alt=\"Comment ajouter des images aux \u00e9l\u00e9ments de menu dans WordPress\" ><\/a><\/p>\n<p>Voici \u00e0 quoi cela ressemble dans le menu du <a href=\"https:\/\/www.competethemes.com\/morning\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">th\u00e8me Matin<\/a> :<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39d98fbfe.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-177507-616f39d98fbfe.png\" alt=\"Comment ajouter des images aux \u00e9l\u00e9ments de menu dans WordPress\" ><\/a><\/p>\n<h3>Personnalisation suppl\u00e9mentaire des images<\/h3>\n<p>En plus d&rsquo;ajouter une image, vous pouvez la positionner au-dessus, en dessous, avant ou apr\u00e8s l&rsquo;\u00e9l\u00e9ment de menu. Vous pouvez \u00e9galement afficher une image diff\u00e9rente lorsqu&rsquo;un visiteur survole l&rsquo;\u00e9l\u00e9ment de menu, ce qui est particuli\u00e8rement utile pour les changements de couleur.<\/p>\n<p>En ce qui concerne la taille de l&rsquo;image, vous disposez des quatre tailles d&rsquo;image cr\u00e9\u00e9es par WordPress, ainsi que de trois nouvelles tailles ajout\u00e9es par Menu Image. Les tailles disponibles sont :<\/p>\n<ul>\n<li>Format original<\/li>\n<li>La vignette<\/li>\n<li>Moyen<\/li>\n<li>Grand<\/li>\n<li>24 \u00d7 24<\/li>\n<li>36 \u00d7 36<\/li>\n<li>48 \u00d7 48<\/li>\n<\/ul>\n<p>Les dimensions des miniatures, moyennes et grandes tailles peuvent \u00eatre d\u00e9finies dans le menu Param\u00e8tres du support (Param\u00e8tres &gt; Support).<\/p>\n<p>Pr\u00e9voyez d&rsquo;abord un ensemble d&rsquo;images similaires pour votre menu, afin que votre menu ait une esth\u00e9tique coh\u00e9rente. J&rsquo;ai ajout\u00e9 une ic\u00f4ne dans mon exemple pour illustrer l&rsquo;utilisation du plugin, mais je recommanderais d&rsquo;ajouter une image \u00e0 tous les \u00e9l\u00e9ments de menu ou \u00e0 aucun.<\/p>\n<p>Vous devrez peut-\u00eatre redimensionner votre image plusieurs fois jusqu&rsquo;\u00e0 ce qu&rsquo;elle apparaisse correctement dans le menu. Si vous n&rsquo;avez pas d&rsquo;\u00e9diteur graphique de choix, consultez <a href=\"https:\/\/www.gimp.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">GIMP<\/a> (gratuit) ou <a href=\"https:\/\/www.sketchapp.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Sketch<\/a> (99 $ Mac uniquement).<\/p>\n<p>Enfin, utilisez des images PNG transparentes si vous le pouvez. L&rsquo;affichage d&rsquo;un grand carr\u00e9 autour de l&rsquo;ic\u00f4ne n&rsquo;aura l&rsquo;air bien dans aucun menu.<\/p>\n<p>Le plugin <a href=\"https:\/\/wordpress.org\/plugins\/menu-image\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Menu Image<\/a> permet \u00e0 quiconque d&rsquo;ajouter facilement des images \u00e0 ses \u00e9l\u00e9ments de menu. Vous n&rsquo;avez pas besoin de conna\u00eetre PHP ou CSS pour inclure des ic\u00f4nes \u00e9l\u00e9gantes dans votre menu.<\/p>\n<p>Avez-vous des questions sur l&rsquo;ajout ou le style d&rsquo;images dans votre menu\u00a0? Laissez un commentaire ci-dessous.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bonne nouvelle : l&rsquo;ajout d&rsquo;images aux \u00e9l\u00e9ments de menu est \u00e9tonnamment facile. Apprenez \u00e0 ajouter des images \u00e0 votre menu \u00e0 l&rsquo;aide d&rsquo;un simple plugin dans cet article.<\/p>\n","protected":false},"author":1,"featured_media":257355,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[548],"tags":[844],"class_list":["post-238016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-personnaliser-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/238016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=238016"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/238016\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/257355"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=238016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=238016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=238016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}