{"id":233490,"date":"2023-02-16T17:16:00","date_gmt":"2023-02-16T14:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233490"},"modified":"2022-11-10T23:58:29","modified_gmt":"2022-11-10T20:58:29","slug":"hur-man-laegger-till-fontawesome-ikoner-till-menyalternativ-med-avancerade-anpassade-faelt","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/hur-man-laegger-till-fontawesome-ikoner-till-menyalternativ-med-avancerade-anpassade-faelt\/","title":{"rendered":"Hur man l\u00e4gger till Fontawesome-ikoner till menyalternativ med avancerade anpassade f\u00e4lt"},"content":{"rendered":"\n

Det h\u00e4r inl\u00e4gget kommer att visa dig hur du kan anv\u00e4nda avancerade anpassade f\u00e4lt (ACF) f\u00f6r att till\u00e5ta att l\u00e4gga till ikoner till din meny. I det h\u00e4r exemplet l\u00e4gger vi till en Fontawesome-<\/a> ikon, men du kan \u00e4ndra koden s\u00e5 att den passar dina behov. Du kan ist\u00e4llet l\u00e4gga till en filv\u00e4ljare f\u00f6r SVG-filer eller n\u00e5got annat.<\/p>\n

Den h\u00e4r guiden fungerar med gratisversionen av Advanced Custom Fields<\/a>, men se till att du har version 5.6 eller senare.<\/p>\n

L\u00e4gger till ACF-gruppen och f\u00e4ltet<\/h2>\n

Det f\u00f6rsta steget \u00e4r att l\u00e4gga till sj\u00e4lva f\u00e4ltet till menyalternativ. Den h\u00e4r guiden kommer att l\u00e4gga till en textinmatning f\u00f6r att skriva in klassnamnet f\u00f6r Fontawesome-ikonen, men om du vill ha en annan l\u00f6sning (t.ex. filv\u00e4ljare f\u00f6r SVG-fil), \u00e4ndra f\u00e4ltinmatningarna.<\/p>\n

Se till att din Advanced Custom Field-grupps plats \u00e4r inst\u00e4lld p\u00e5 "Meny Item". Du kan st\u00e4lla in den p\u00e5 "Alla", eller s\u00e5 kan du specificera efter menyplatser eller specifika menyer.<\/p>\n

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

Om du l\u00e4gger till dina f\u00e4lt och grupperar efter kod, st\u00e4ll in platsparametern p\u00e5 ’ nav_menu_item<\/code>’. Se min fullst\u00e4ndiga referens f\u00f6r att l\u00e4gga till ACF-f\u00e4lt med kod<\/a> f\u00f6r att l\u00e4ra dig mer.<\/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
N\u00e4r det g\u00e4ller sj\u00e4lva f\u00e4ltet l\u00e4gger vi till en enkel textinmatning med namnet ’ fontawesome_icon<\/code>’.<\/p>\n
\"Hur<\/a><\/p>\n
Eller med kod, l\u00e4gg till f\u00e4ltet s\u00e5 h\u00e4r:<\/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
F\u00f6r att g\u00f6ra det mer anv\u00e4ndarv\u00e4nligt \u00e4r det en bra id\u00e9 att l\u00e4gga till en beskrivning med en l\u00e4nk till \u00f6versikten \u00f6ver tillg\u00e4ngliga Fontawesome-ikoner<\/a>. Jag l\u00e4gger till l\u00e4nken f\u00f6r att bara visa gratis ikoner, inte n\u00e5gon av Pro, eftersom det h\u00e4r \u00e4r biblioteket jag har i mitt tema.<\/p>\n
Efter att ha sparat f\u00e4ltet i admin eller i kod b\u00f6r du nu f\u00e5 det ytterligare f\u00e4ltet n\u00e4r du expanderar ett menyalternativ:<\/p>\n
\"Hur<\/a><\/p>\n
En anteckning om Fontawesome-klasser<\/h2>\n
I "\u00e4ldre dagar", f\u00f6re Fontawesome 5, kunde tillhandah\u00e5llandet av en Fontawesome-klass vara n\u00e5got f\u00f6renklat f\u00f6r anv\u00e4ndaren. F\u00f6r kundvagnen kan du helt enkelt skriva "shopping-cart" och i v\u00e5r kod kan vi l\u00e4gga till klassen " fa fa-<\/code>" och sedan den givna klassen (vilket resulterar i " fa fa-shopping-cart<\/code>"). Men sedan Fontawesome 5 har klasserna varit n\u00e5got komplicerade.<\/p>\n
Den "globala" klassen " fa<\/code>" har ersatts med kategorier som \u00e4r specifika f\u00f6r typen av ikon. Till exempel \u00e4r sociala medier eller logotyper i varum\u00e4rkeskategorin och kr\u00e4ver klassen " fab<\/code>", solida ikoner kr\u00e4ver klassen " fas<\/code>", medan vanliga ikoner kr\u00e4ver " far<\/code>", och s\u00e5 vidare. Det \u00e4r d\u00e4rf\u00f6r vi nu m\u00e5ste kr\u00e4va att temaanv\u00e4ndaren skriver i b\u00e5da Fontawesome-klasserna. Det borde vara l\u00e4tt att hitta r\u00e4tt klass eftersom detta tydligt visas i varje ikon p\u00e5 Fontawesomes webbplats:<\/p>\n
\"Hur<\/a><\/p>\n
Som ett exempel m\u00e5ste du ange " fas fa-shopping-cart<\/code>" i v\u00e5rt anpassade f\u00e4lt p\u00e5 ett menyalternativ f\u00f6r kundvagnsikonen.<\/p>\n
Visar ikonen i menyn<\/h2>\n
N\u00e4sta och sista steg \u00e4r att \u00e5terge ikonen i menyn om den \u00e4r inst\u00e4lld. F\u00f6r att g\u00f6ra detta anv\u00e4nder vi WordPress filter [wp_nav_menu_objects](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_objects\/)<\/code>. Det h\u00e4r filtret anv\u00e4nds f\u00f6r varje meny i alla renderade menyer precis innan dess HTML genereras, vilket g\u00f6r att vi kan \u00e4ndra textutdata, klasser och mer.<\/p>\n
Hur du vill mata ut ikonen \u00e4r igen upp till dig. Vill du ers\u00e4tta l\u00e4nktexten med ikonen, eller vill du visa ikonen antingen f\u00f6re eller efter textl\u00e4nken? Vi kommer att f\u00f6lja Fontawesome custom genom att mata ut en <i><\/code>tagg med den angivna klassen.<\/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
S\u00e4ttet vi modifierar menyalternativen \u00e4r genom att g\u00e5 igenom menyalternativen med hj\u00e4lp av pass by reference (l\u00e4gga till a &<\/code>f\u00f6re variabeln). Detta inneb\u00e4r att varje \u00e4ndring vi g\u00f6r p\u00e5 objektet kommer att till\u00e4mpas p\u00e5 parenting items-objektet.<\/p>\n
F\u00f6r varje objekt anv\u00e4nder vi Advanced Custom Fields get_field()<\/code>funktion f\u00f6r att f\u00e5 v\u00e4rdet p\u00e5 v\u00e5rt f\u00e4lt, ’ fontawesome_icon<\/code>’. Om det \u00e4r klart \u00e4r vi redo att g\u00e5. Ovanst\u00e5ende kodexempel l\u00e4gger till ikonen f\u00f6re texten. Om du vill l\u00e4gga till ikonen efter texten, ers\u00e4tt raden #6<\/code>med:<\/p>\n
$item->title .= '<i class=\"'. $icon. '\"><\/i>';<\/code><\/pre>\n
Eller om du vill ers\u00e4tta texten med en ikon \u2013 utan att visa n\u00e5gon text alls, ers\u00e4tt raden #6<\/code>med:<\/p>\n
$item->title = '<i class=\"'. $icon. '\" title=\"'. $item->title. '\"><\/i>';<\/code><\/pre>\n
Jag lade till ett title<\/code>attribut s\u00e5 att det \u00e4r lite mer informativt f\u00f6r frontend-anv\u00e4ndaren. Eftersom texten tas bort kan det ibland vara f\u00f6rvirrande f\u00f6r slutanv\u00e4ndaren vad menyalternativet \u00e4r till f\u00f6r. Men title<\/code>attributet ser till att anv\u00e4ndaren f\u00e5r ett verktygstips med menyobjektets text n\u00e4r han h\u00e5ller muspekaren \u00f6ver ikonen. Detta \u00e4r naturligtvis helt valfritt.<\/p>\n
Om du anv\u00e4nder ett f\u00e4lt av en annan typ, t.ex. en filv\u00e4ljare f\u00f6r SVG-filer, m\u00e5ste du justera utdata d\u00e4refter.<\/p>\n
Och det \u00e4r allt! Du b\u00f6r nu f\u00e5 en Fontawesome-ikon \u00f6verallt d\u00e4r menyn visas. Men du beh\u00f6ver f\u00f6rmodligen l\u00e4gga till lite styling till den. Till exempel att l\u00e4gga till lite mellanslag mellan ikonen och texten.<\/p>\n
L\u00e4gger till klasser f\u00f6r enklare styling<\/h3>\n
Du kan l\u00e4gga till anpassade klasser till <i><\/code>taggen eller l\u00e4gga till lite mer HTML om det beh\u00f6vs.<\/p>\n
Om du beh\u00f6ver l\u00e4gga till en klass i menyalternativet (li<\/code>elementet) har du full tillg\u00e5ng till menyalternativsklasserna som kommer att till\u00e4mpas i filtret ovan. L\u00e4gg till en anpassad menyobjektklass f\u00f6r ikonmenyalternativ som s\u00e5 h\u00e4r:<\/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
Menyn ska matas ut s\u00e5 h\u00e4r:<\/p>\n
\"Hur<\/a><\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Hur man l\u00e4gger till Fontawesome-ikoner till menyalternativ. Vi anv\u00e4nder avancerade anpassade f\u00e4lt f\u00f6r att till\u00e5ta att definiera klasser. Det \u00e4r enkelt att justera koden f\u00f6r SVG-ikoner eller liknande.<\/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":[901,724,838,848,901,1110,807,807,838,848,724,868,868],"tags":[1173],"class_list":{"0":"post-233490","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koda","8":"category-utvecklaren","9":"category-guide-foer-nyboerjare","10":"category-handledningar","12":"category-n-a","13":"category-php-9","18":"category-wordpress-9","20":"tag-affiai-sv"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233490"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233490\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}