Hur man lägger till Fontawesome-ikoner till menyalternativ med avancerade anpassade fält
Det här inlägget kommer att visa dig hur du kan använda avancerade anpassade fält (ACF) för att tillåta att lägga till ikoner till din meny. I det här exemplet lägger vi till en Fontawesome- ikon, men du kan ändra koden så att den passar dina behov. Du kan istället lägga till en filväljare för SVG-filer eller något annat.
Den här guiden fungerar med gratisversionen av Advanced Custom Fields, men se till att du har version 5.6 eller senare.
Lägger till ACF-gruppen och fältet
Det första steget är att lägga till själva fältet till menyalternativ. Den här guiden kommer att lägga till en textinmatning för att skriva in klassnamnet för Fontawesome-ikonen, men om du vill ha en annan lösning (t.ex. filväljare för SVG-fil), ändra fältinmatningarna.
Se till att din Advanced Custom Field-grupps plats är inställd på "Meny Item". Du kan ställa in den på "Alla", eller så kan du specificera efter menyplatser eller specifika menyer.
Om du lägger till dina fält och grupperar efter kod, ställ in platsparametern på ‘ nav_menu_item‘. Se min fullständiga referens för att lägga till ACF-fält med kod för att lära dig mer.
När det gäller själva fältet lägger vi till en enkel textinmatning med namnet ‘ fontawesome_icon‘.
Eller med kod, lägg till fältet så här:
För att göra det mer användarvänligt är det en bra idé att lägga till en beskrivning med en länk till översikten över tillgängliga Fontawesome-ikoner. Jag lägger till länken för att bara visa gratis ikoner, inte någon av Pro, eftersom det här är biblioteket jag har i mitt tema.
Efter att ha sparat fältet i admin eller i kod bör du nu få det ytterligare fältet när du expanderar ett menyalternativ:
En anteckning om Fontawesome-klasser
I "äldre dagar", före Fontawesome 5, kunde tillhandahållandet av en Fontawesome-klass vara något förenklat för användaren. För kundvagnen kan du helt enkelt skriva "shopping-cart" och i vår kod kan vi lägga till klassen " fa fa-" och sedan den givna klassen (vilket resulterar i " fa fa-shopping-cart"). Men sedan Fontawesome 5 har klasserna varit något komplicerade.
Den "globala" klassen " fa" har ersatts med kategorier som är specifika för typen av ikon. Till exempel är sociala medier eller logotyper i varumärkeskategorin och kräver klassen " fab", solida ikoner kräver klassen " fas", medan vanliga ikoner kräver " far", och så vidare. Det är därför vi nu måste kräva att temaanvändaren skriver i båda Fontawesome-klasserna. Det borde vara lätt att hitta rätt klass eftersom detta tydligt visas i varje ikon på Fontawesomes webbplats:
Som ett exempel måste du ange " fas fa-shopping-cart" i vårt anpassade fält på ett menyalternativ för kundvagnsikonen.
Visar ikonen i menyn
Nästa och sista steg är att återge ikonen i menyn om den är inställd. För att göra detta använder vi WordPress filter [wp_nav_menu_objects](https://developer.wordpress.org/reference/hooks/wp_nav_menu_objects/). Det här filtret används för varje meny i alla renderade menyer precis innan dess HTML genereras, vilket gör att vi kan ändra textutdata, klasser och mer.
Hur du vill mata ut ikonen är igen upp till dig. Vill du ersätta länktexten med ikonen, eller vill du visa ikonen antingen före eller efter textlänken? Vi kommer att följa Fontawesome custom genom att mata ut en <i>tagg med den angivna klassen.
Sättet vi modifierar menyalternativen är genom att gå igenom menyalternativen med hjälp av pass by reference (lägga till a &före variabeln). Detta innebär att varje ändring vi gör på objektet kommer att tillämpas på parenting items-objektet.
För varje objekt använder vi Advanced Custom Fields get_field()funktion för att få värdet på vårt fält, ‘ fontawesome_icon‘. Om det är klart är vi redo att gå. Ovanstående kodexempel lägger till ikonen före texten. Om du vill lägga till ikonen efter texten, ersätt raden #6med:
Eller om du vill ersätta texten med en ikon – utan att visa någon text alls, ersätt raden #6med:
Jag lade till ett titleattribut så att det är lite mer informativt för frontend-användaren. Eftersom texten tas bort kan det ibland vara förvirrande för slutanvändaren vad menyalternativet är till för. Men titleattributet ser till att användaren får ett verktygstips med menyobjektets text när han håller muspekaren över ikonen. Detta är naturligtvis helt valfritt.
Om du använder ett fält av en annan typ, t.ex. en filväljare för SVG-filer, måste du justera utdata därefter.
Och det är allt! Du bör nu få en Fontawesome-ikon överallt där menyn visas. Men du behöver förmodligen lägga till lite styling till den. Till exempel att lägga till lite mellanslag mellan ikonen och texten.
Lägger till klasser för enklare styling
Du kan lägga till anpassade klasser till <i>taggen eller lägga till lite mer HTML om det behövs.
Om du behöver lägga till en klass i menyalternativet (lielementet) har du full tillgång till menyalternativsklasserna som kommer att tillämpas i filtret ovan. Lägg till en anpassad menyobjektklass för ikonmenyalternativ som så här:
Menyn ska matas ut så här:
