{"id":233545,"date":"2023-02-16T16:32:00","date_gmt":"2023-02-16T13:32:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233545"},"modified":"2022-11-11T00:16:08","modified_gmt":"2022-11-10T21:16:08","slug":"come-aggiungere-icone-fontawesome-alle-voci-di-menu-con-campi-personalizzati-avanzati","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/come-aggiungere-icone-fontawesome-alle-voci-di-menu-con-campi-personalizzati-avanzati\/","title":{"rendered":"Come aggiungere icone Fontawesome alle voci di menu con campi personalizzati avanzati"},"content":{"rendered":"\n

Questo post ti mostrer\u00e0 come utilizzare i campi personalizzati avanzati (ACF) per consentire l’aggiunta di icone al tuo menu. In questo esempio aggiungeremo un’icona Fontawesome<\/a>, ma puoi modificare il codice in base alle tue esigenze. Potresti invece aggiungere un selettore di file per i file SVG o qualcos’altro.<\/p>\n

Questa guida funzioner\u00e0 con la versione gratuita di Advanced Custom Fields<\/a>, ma assicurati di avere la versione 5.6 o successiva.<\/p>\n

Aggiunta del gruppo e del campo ACF<\/h2>\n

Il primo passaggio consiste nell’aggiungere il campo stesso alle voci di menu. Questa guida aggiunger\u00e0 un input di testo per digitare il nome della classe per l’icona Fontawesome, ma se desideri un’altra soluzione (ad esempio il selettore di file per il file SVG), modifica gli input del campo.<\/p>\n

Assicurati che la posizione del tuo gruppo di campi personalizzati avanzati sia impostata su "Voce di menu". Puoi impostarla su "Tutto" oppure puoi specificare per posizioni di menu o menu specifici.<\/p>\n

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

Se stai aggiungendo i tuoi campi e raggruppandoli per codice, imposta il parametro della posizione su ‘ nav_menu_item<\/code>‘. Fare riferimento al mio riferimento completo per aggiungere campi ACF per codice<\/a> per saperne di pi\u00f9.<\/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
Per quanto riguarda il campo stesso, aggiungeremo un semplice input di testo con il nome ‘ fontawesome_icon<\/code>‘.<\/p>\n
\"Come<\/a><\/p>\n
Oppure per codice, aggiungi il campo in questo modo:<\/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
Per renderlo pi\u00f9 user-friendly \u00e8 una buona idea aggiungere una descrizione con un collegamento alla panoramica delle icone Fontawesome disponibili<\/a>. Sto aggiungendo il collegamento per mostrare solo le icone gratuite, non nessuna delle Pro, poich\u00e9 questa \u00e8 la libreria che ho nel mio tema.<\/p>\n
Dopo aver salvato il campo in admin o nel codice, ora dovresti ottenere il campo aggiuntivo quando espandi una voce di menu:<\/p>\n
\"Come<\/a><\/p>\n
Una nota sulle classi Fontawesome<\/h2>\n
Nei "vecchi tempi", prima di Fontawesome 5, fornire una classe Fontawesome poteva essere in qualche modo semplificato per l’utente. Per il carrello potresti semplicemente scrivere “carrello" e nel nostro codice potremmo aggiungere la classe ” fa fa-<\/code>” e poi la classe data (risultando ” fa fa-shopping-cart<\/code>“). Ma da Fontawesome 5 le lezioni sono state alquanto complicate.<\/p>\n
La classe “globale” ” fa<\/code>” \u00e8 stata sostituita con categorie specifiche per il tipo di icona. Ad esempio i social media o i loghi sono nella categoria dei marchi e richiedono la classe " fab<\/code>", le icone solide richiedono la classe " fas<\/code>", mentre le icone normali richiedono " far<\/code>" e cos\u00ec via. Questo \u00e8 il motivo per cui ora dobbiamo richiedere all’utente del tema di digitare in entrambe le classi Fontawesome. Dovrebbe essere facile trovare la classe giusta in quanto questo \u00e8 chiaramente mostrato in ogni icona sul sito di Fontawesome:<\/p>\n
\"Come<\/a><\/p>\n
Ad esempio, devi inserire " fas fa-shopping-cart<\/code>" nel nostro campo personalizzato su una voce di menu per l’icona del carrello.<\/p>\n
Visualizzazione dell’icona nel menu<\/h2>\n
Il passaggio successivo e finale \u00e8 il rendering dell’icona nel menu se \u00e8 impostata. Per fare ci\u00f2 utilizziamo il filtro di WordPress [wp_nav_menu_objects](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_objects\/)<\/code>. Questo filtro viene applicato per ogni menu in tutti i menu renderizzati subito prima di generare il relativo HTML, consentendoci di modificare l’output di testo, le classi e altro.<\/p>\n
Il modo in cui desideri visualizzare l’icona dipende di nuovo da te. Vuoi sostituire il testo del link con l’icona o vuoi mostrare l’icona prima o dopo il link testuale? Seguiremo Fontawesome custom emettendo un <i><\/code>tag con la classe fornita.<\/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
Il modo in cui modifichiamo le voci di menu \u00e8 scorrere le voci di menu utilizzando passa per riferimento (aggiungendo a &<\/code>prima della variabile). Ci\u00f2 significa che qualsiasi modifica che apportiamo all’elemento, verr\u00e0 applicata all’oggetto degli elementi padre.<\/p>\n
Per ogni articolo utilizziamo la funzione Advanced Custom Field get_field()<\/code>per ottenere il valore del nostro campo, ‘ fontawesome_icon<\/code>‘. Se \u00e8 impostato, siamo a posto. L’esempio di codice sopra aggiunger\u00e0 l’icona prima del testo. Se vuoi aggiungere l’icona dopo il testo, sostituisci la riga #6<\/code>con:<\/p>\n
$item->title .= '<i class=\"'. $icon. '\"><\/i>';<\/code><\/pre>\n
Oppure, se desideri sostituire il testo con un’icona, senza mostrare alcun testo, sostituisci la riga #6<\/code>con:<\/p>\n
$item->title = '<i class=\"'. $icon. '\" title=\"'. $item->title. '\"><\/i>';<\/code><\/pre>\n
Ho aggiunto un title<\/code>attributo in modo che sia un po’ pi\u00f9 informativo per l’utente frontend. Poich\u00e9 il testo viene rimosso, a volte pu\u00f2 essere fonte di confusione per l’utente finale a cosa serve la voce di menu. Ma l’ title<\/code>attributo assicura che l’utente riceva un suggerimento con il testo della voce di menu quando passa il mouse sopra l’icona. Questo \u00e8 del tutto facoltativo, ovviamente.<\/p>\n
Se si utilizza un campo di un tipo diverso, ad esempio un filepicker per i file SVG, \u00e8 necessario regolare l’output di conseguenza.<\/p>\n
E questo \u00e8 tutto! Ora dovresti ottenere un’icona Fontawesome ovunque sia visualizzato il menu. Ma probabilmente devi aggiungere un po’ di stile. Ad esempio aggiungendo dello spazio tra l’icona e il testo.<\/p>\n
Aggiunta di classi per uno styling pi\u00f9 semplice<\/h3>\n
Puoi aggiungere classi personalizzate al <i><\/code>tag o aggiungere altro HTML se necessario.<\/p>\n
Se devi aggiungere una classe alla voce di menu di wrapping (l’ li<\/code>elemento) hai pieno accesso alle classi di voci di menu che verranno applicate nel filtro sopra. Aggiungi una classe di voci di menu personalizzata per le voci di menu con icone in questo modo:<\/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
Il menu dovrebbe essere emesso in questo modo:<\/p>\n
\"Come<\/a><\/p>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Come aggiungere icone Fontawesome alle voci di menu. Utilizziamo i campi personalizzati avanzati per consentire la definizione delle classi. \u00c8 facile regolare il codice per le icone SVG o simili.<\/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":[896,896,720,835,1110,804,804,835,720,844,844,865,865],"tags":[1168],"class_list":{"0":"post-233545","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-codice","9":"category-sviluppatore","10":"category-guida-per-principianti","11":"category-n-a","12":"category-php-6","16":"category-tutorial","18":"category-wordpress-6","20":"tag-affiai-it"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=233545"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233545\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}