{"id":234223,"date":"2023-02-16T17:16:00","date_gmt":"2023-02-16T14:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234223"},"modified":"2022-11-12T00:59:31","modified_gmt":"2022-11-11T21:59:31","slug":"comment-ajouter-des-icones-fontawesome-aux-elements-de-menu-avec-des-champs-personnalises-avances","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-ajouter-des-icones-fontawesome-aux-elements-de-menu-avec-des-champs-personnalises-avances\/","title":{"rendered":"Comment ajouter des ic\u00f4nes Fontawesome aux \u00e9l\u00e9ments de menu avec des champs personnalis\u00e9s avanc\u00e9s"},"content":{"rendered":"\n

Cet article vous montrera comment vous pouvez utiliser les champs personnalis\u00e9s avanc\u00e9s (ACF) pour permettre l’ajout d’ic\u00f4nes \u00e0 votre menu. Dans cet exemple, nous ajouterons une ic\u00f4ne Fontawesome<\/a>, mais vous pouvez modifier le code en fonction de vos besoins. Vous pouvez \u00e0 la place ajouter un s\u00e9lecteur de fichiers pour les fichiers SVG ou autre chose.<\/p>\n

Ce guide fonctionnera avec la version gratuite de Advanced Custom Fields<\/a>, mais assurez-vous d’avoir la version 5.6 ou une version plus r\u00e9cente.<\/p>\n

Ajout du groupe et du champ ACF<\/h2>\n

La premi\u00e8re \u00e9tape consiste \u00e0 ajouter le champ lui-m\u00eame aux \u00e9l\u00e9ments de menu. Ce guide ajoutera une entr\u00e9e de texte pour saisir le nom de la classe pour l’ic\u00f4ne Fontawesome, mais si vous souhaitez une autre solution (par exemple, un s\u00e9lecteur de fichier pour le fichier SVG), modifiez les entr\u00e9es du champ.<\/p>\n

Assurez-vous que l’emplacement de votre groupe de champs personnalis\u00e9s avanc\u00e9s est d\u00e9fini sur "\u00c9l\u00e9ment de menu". Vous pouvez le d\u00e9finir sur "Tous", ou vous pouvez sp\u00e9cifier des emplacements de menu ou des menus sp\u00e9cifiques.<\/p>\n

\"Comment<\/a><\/p>\n

Si vous ajoutez vos champs et groupez par code, d\u00e9finissez le param\u00e8tre d’emplacement sur ‘ nav_menu_item<\/code>‘. Reportez-vous \u00e0 ma r\u00e9f\u00e9rence compl\u00e8te pour l’ajout de champs ACF par code<\/a> pour en savoir plus.<\/p>\n

acf_add_local_field_group([\n    ...\n    'location' => [\n        [\n            [\n                'param' => 'nav_menu_item',\n                'operator' => '==',\n                'value' => 'all'\n            ]\n        ]\n    ]\n]);<\/code><\/pre>\n
Quant au champ lui-m\u00eame, nous ajouterons une simple entr\u00e9e de texte avec le nom ‘ fontawesome_icon<\/code>‘.<\/p>\n
\"Comment<\/a><\/p>\n
Ou par code, ajoutez le champ comme ceci\u00a0:<\/p>\n
[\n    'key' => 'field_fontawesome_icon',\n    'label' => __('Fontawesome icon class', 'txtdomain'),\n    'name' => 'fontawesome_icon',\n    'instructions' => __('Type the name of a <a href=\"https:\/\/fontawesome.com\/icons?d=gallery&m=free\" target=\"_blank\">Fontawesome icon<\/a> class. Example: \"fab fa-facebook\".', 'txtdomain'),\n    'type' => 'text',\n]<\/code><\/pre>\n
Pour le rendre plus convivial, c’est une bonne id\u00e9e d’ajouter une description avec un lien vers l’ aper\u00e7u des ic\u00f4nes Fontawesome disponibles<\/a>. J’ajoute le lien pour afficher uniquement les ic\u00f4nes gratuites, pas les Pro, car il s’agit de la biblioth\u00e8que que j’ai dans mon th\u00e8me.<\/p>\n
Apr\u00e8s avoir enregistr\u00e9 le champ dans l’administrateur ou dans le code, vous devriez maintenant obtenir le champ suppl\u00e9mentaire lorsque vous d\u00e9veloppez un \u00e9l\u00e9ment de menu\u00a0:<\/p>\n
\"Comment<\/a><\/p>\n
Une note sur les cours Fontawesome<\/h2>\n
Dans les "jours anciens", avant Fontawesome 5, fournir une classe Fontawesome pouvait \u00eatre quelque peu simplifi\u00e9 pour l’utilisateur. Pour le panier, vous pouvez simplement \u00e9crire "shopping-cart" et dans notre code, nous pourrions ajouter la classe " fa fa-<\/code>" puis la classe donn\u00e9e (r\u00e9sultant en " fa fa-shopping-cart<\/code>"). Mais depuis Fontawesome 5, les cours ont \u00e9t\u00e9 quelque peu compliqu\u00e9s.<\/p>\n
La classe \u00abglobale\u00bb \u00abfa<\/code>\u00bb a \u00e9t\u00e9 remplac\u00e9e par des cat\u00e9gories sp\u00e9cifiques au type d’ic\u00f4ne. Par exemple, les m\u00e9dias sociaux ou les logos sont dans la cat\u00e9gorie des marques et n\u00e9cessitent la classe " fab<\/code>", les ic\u00f4nes solides n\u00e9cessitent la classe " fas<\/code>", tandis que les ic\u00f4nes r\u00e9guli\u00e8res n\u00e9cessitent " far<\/code>", etc. C’est pourquoi nous devons maintenant demander \u00e0 l’utilisateur du th\u00e8me de taper dans les deux classes Fontawesome. Il devrait \u00eatre facile de trouver la bonne classe car cela est clairement indiqu\u00e9 dans chaque ic\u00f4ne du site de Fontawesome :<\/p>\n
\"Comment<\/a><\/p>\n
Par exemple, vous devez saisir \u00abfas fa-shopping-cart<\/code>\u00bb dans notre champ personnalis\u00e9 sur un \u00e9l\u00e9ment de menu pour l’ic\u00f4ne du panier.<\/p>\n
Affichage de l’ic\u00f4ne dans le menu<\/h2>\n
La prochaine et derni\u00e8re \u00e9tape consiste \u00e0 rendre l’ic\u00f4ne dans le menu si elle est d\u00e9finie. Pour ce faire, nous utilisons le filtre de WordPress [wp_nav_menu_objects](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_objects\/)<\/code>. Ce filtre est appliqu\u00e9 pour chaque menu dans tous les menus rendus juste avant de g\u00e9n\u00e9rer son HTML, ce qui nous permet de modifier la sortie de texte, les classes et plus encore.<\/p>\n
La mani\u00e8re dont vous souhaitez afficher l’ic\u00f4ne d\u00e9pend \u00e0 nouveau de vous. Voulez-vous remplacer le texte du lien par l’ic\u00f4ne ou souhaitez-vous afficher l’ic\u00f4ne avant ou apr\u00e8s le lien texte\u00a0? Nous suivrons la coutume de Fontawesome en produisant une <i><\/code>balise avec la classe fournie.<\/p>\n
add_filter('wp_nav_menu_objects', function($items) {\n    foreach ($items as &$item) {\n        $icon = get_field('fontawesome_icon', $item);     \n        if ($icon) {\n            $item->title = '<i class=\"'. $icon. '\"><\/i>'. $item->title;\n        }\n    }\n    return $items;\n});<\/code><\/pre>\n
La fa\u00e7on dont nous modifions les \u00e9l\u00e9ments de menu consiste \u00e0 parcourir les \u00e9l\u00e9ments de menu en utilisant le passage par r\u00e9f\u00e9rence (en ajoutant un &<\/code>avant la variable). Cela signifie que toute modification apport\u00e9e \u00e0 l’\u00e9l\u00e9ment sera appliqu\u00e9e \u00e0 l’objet des \u00e9l\u00e9ments parentaux.<\/p>\n
Pour chaque \u00e9l\u00e9ment, nous utilisons la fonction Advanced Custom Field get_field()<\/code>pour obtenir la valeur de notre champ, ‘ fontawesome_icon<\/code>‘. Si c’est r\u00e9gl\u00e9, nous sommes pr\u00eats \u00e0 partir. L’exemple de code ci-dessus ajoutera l’ic\u00f4ne avant le texte. Si vous vouliez ajouter l’ic\u00f4ne apr\u00e8s le texte, remplacez la ligne #6<\/code>par\u00a0:<\/p>\n
$item->title .= '<i class=\"'. $icon. '\"><\/i>';<\/code><\/pre>\n
Ou si vous vouliez remplacer le texte par une ic\u00f4ne – ne montrant aucun texte, remplacez la ligne #6<\/code>par\u00a0:<\/p>\n
$item->title = '<i class=\"'. $icon. '\" title=\"'. $item->title. '\"><\/i>';<\/code><\/pre>\n
J’ai ajout\u00e9 un title<\/code>attribut afin qu’il soit un peu plus informatif pour l’utilisateur frontal. \u00c9tant donn\u00e9 que le texte est supprim\u00e9, il peut parfois \u00eatre d\u00e9routant pour l’utilisateur final de savoir \u00e0 quoi sert l’\u00e9l\u00e9ment de menu. Mais l’ title<\/code>attribut garantit que l’utilisateur obtient une info-bulle avec le texte de l’\u00e9l\u00e9ment de menu lorsqu’il survole l’ic\u00f4ne. Ceci est enti\u00e8rement facultatif bien s\u00fbr.<\/p>\n
Si vous utilisez un champ d’un type diff\u00e9rent, par exemple un s\u00e9lecteur de fichiers pour les fichiers SVG, vous devez ajuster la sortie en cons\u00e9quence.<\/p>\n
Et c’est tout! Vous devriez maintenant obtenir une ic\u00f4ne Fontawesome partout o\u00f9 le menu est rendu. Mais vous avez probablement besoin d’y ajouter un peu de style. Par exemple, ajouter un espace entre l’ic\u00f4ne et le texte.<\/p>\n
Ajout de classes pour un style plus facile<\/h3>\n
Vous pouvez ajouter des classes personnalis\u00e9es \u00e0 la <i><\/code>balise ou ajouter du code HTML suppl\u00e9mentaire si n\u00e9cessaire.<\/p>\n
Si vous devez ajouter une classe \u00e0 l’\u00e9l\u00e9ment de menu d’habillage (l’ li<\/code>\u00e9l\u00e9ment), vous avez un acc\u00e8s complet aux classes d’\u00e9l\u00e9ments de menu qui seront appliqu\u00e9es dans le filtre ci-dessus. Ajoutez une classe d’\u00e9l\u00e9ments de menu personnalis\u00e9s pour les \u00e9l\u00e9ments de menu d’ic\u00f4nes comme suit\u00a0:<\/p>\n
        ...\n        if ($icon) {\n            $item->title = '<i class=\"'. $icon. '\"><\/i>'. $item->title;\n            $item->classes[] = 'menu-with-icon';\n        }\n        ...<\/code><\/pre>\n
Le menu devrait \u00eatre affich\u00e9 comme ceci\u00a0:<\/p>\n
\"Comment<\/a><\/p>\n
Source d’enregistrement:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Comment ajouter des ic\u00f4nes Fontawesome aux \u00e9l\u00e9ments de menu. Nous utilisons des champs personnalis\u00e9s avanc\u00e9s pour permettre de d\u00e9finir des classes. Il est facile d’ajuster le code pour les ic\u00f4nes SVG ou similaires.<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,893,717,717,832,1110,801,801,832,841,841,862,862],"tags":[1167],"class_list":{"0":"post-234223","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-code-2","9":"category-developpeur","11":"category-guide-pour-les-debutants","12":"category-n-a","13":"category-php-3","16":"category-tutoriels","18":"category-wordpress-3","20":"tag-affiai-fr"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234223"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234223\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}