Kuidas lisada täpsemate kohandatud väljadega menüüüksustele suurepäraseid ikoone
See postitus näitab teile, kuidas saate oma menüüsse ikoonide lisamiseks kasutada täpsemaid kohandatud välju (ACF). Selles näites lisame ikooni Fontawesome, kuid saate koodi oma vajadustele vastavaks muuta. Selle asemel võiksite lisada SVG-failide jaoks failivalija või midagi muud.
See juhend töötab Advanced Custom Fields tasuta versiooniga, kuid veenduge, et teil oleks versioon 5.6 või uuem.
ACF-rühma ja -välja lisamine
Esimene samm on välja enda menüüelementide lisamine. See juhend lisab tekstisisestuse Fontawesome’i ikooni klassi nime sisestamiseks, kuid kui soovite muud lahendust (nt SVG-faili failivalija), muutke välja sisestusi.
Veenduge, et teie täpsemate kohandatud väljade rühma asukohaks on määratud „Menüüüksus". Saate määrata selle väärtuseks „Kõik” või määrata menüü asukohtade või konkreetsete menüüde järgi.
Kui lisate oma välju ja rühmitate koodi järgi, määrake asukoha parameetriks " nav_menu_item". Lisateabe saamiseks vaadake minu täielikku viidet ACF-väljade lisamise kohta koodi järgi.
Mis puutub välja endasse, siis lisame lihtsa tekstisisestuse nimega " fontawesome_icon".
Või koodi järgi lisage väli järgmiselt:
Selle kasutajasõbralikumaks muutmiseks on hea mõte lisada kirjeldus koos lingiga saadaolevate Fontawesome’i ikoonide ülevaatele. Lisan lingi, et kuvada ainult tasuta ikoone, mitte ühtegi Pro-i, kuna see on minu teema teek.
Pärast välja salvestamist administraatorisse või koodisse peaksite nüüd menüüüksuse laiendamisel saama täiendava välja:
Märkus Fontawesome’i tundide kohta
Vanadel aegadel, enne Fontawesome 5, võis Fontawesome’i klassi pakkumine olla kasutaja jaoks mõnevõrra lihtsustatud. Ostukorvi jaoks võite lihtsalt kirjutada "ostukorv" ja meie koodi lisada klass " fa fa-" ja seejärel antud klass (tulemuseks " fa fa-shopping-cart"). Kuid alates Fontawesome 5-st on tunnid olnud mõnevõrra keerulised.
"Üldine" klass " fa" on asendatud ikoonitüübile vastavate kategooriatega. Näiteks sotsiaalmeedia või logod kuuluvad kaubamärkide kategooriasse ja nõuavad klassi " fab", tahkete ikoonide jaoks on vaja klassi " fas", tavaliste ikoonide jaoks aga " far" jne. Seetõttu peame nüüd nõudma, et teemakasutaja sisestaks mõlemasse Fontawesome’i klassi. Õige klassi leidmine peaks olema lihtne, kuna see on selgelt näidatud igal Fontawesome’i saidi ikoonil:
Näiteks peate sisestama fas fa-shopping-cartostukorvi ikooni menüüüksuse kohandatud väljale " ".
Järgmine ja viimane samm on ikooni renderdamine menüüs, kui see on määratud. Selleks kasutame WordPressi filtrit [wp_nav_menu_objects](https://developer.wordpress.org/reference/hooks/wp_nav_menu_objects/). Seda filtrit rakendatakse iga menüü jaoks kõigis renderdatud menüüdes vahetult enne selle HTML-i genereerimist, võimaldades meil muuta tekstiväljundit, klasse ja palju muud.
See, kuidas soovite ikooni väljastada, on jällegi teie otsustada. Kas soovite lingi teksti asendada ikooniga või soovite ikooni näidata kas enne või pärast tekstilinki? Järgime Fontawesome’i harjumust, väljastades <i>pakutud klassiga sildi.
Menüüüksusi muudetakse nii, et sirvime menüüelemente, kasutades viidet (&muutuja ette lisades). See tähendab, et kõik üksuses tehtavad muudatused rakenduvad põhiüksuste objektile.
Iga üksuse puhul kasutame get_field()oma välja väärtuse leidmiseks funktsiooni Advanced Custom Field fontawesome_icon. Kui see on määratud, oleme valmis minema. Ülaltoodud koodinäide lisab ikooni teksti ette. Kui soovite lisada ikooni pärast teksti, asendage rida #6järgmisega:
Või kui soovite teksti asendada ikooniga – teksti ei kuvata, asendage rida #6järgmisega:
Lisasin titleatribuudi, et see oleks kasutajaliidese kasutaja jaoks veidi informatiivsem. Kuna tekst on eemaldatud, võib mõnikord olla lõppkasutaja jaoks segadusse, mille jaoks see menüüelement on mõeldud. Kuid titleatribuut tagab, et kasutaja saab kursorit ikooni kohal hõljutades menüüüksuse tekstiga kohtspikri. See on loomulikult täiesti vabatahtlik.
Kui kasutate teist tüüpi välja, nt SVG-failide failivalijat, peate väljundit vastavalt kohandama.
Ja see ongi kõik! Nüüd peaksite saama Fontawesome’i ikooni kõikjal, kus menüü renderdatakse. Kuid tõenäoliselt peate sellele veidi stiili lisama. Näiteks tühiku lisamine ikooni ja teksti vahele.
Klasside lisamine lihtsamaks stiiliks
Saate lisada <i>märgendile kohandatud klasse või lisada vajadusel veel HTML-i.
Kui teil on vaja ümbrismenüüüksusele (lielemendile) klass lisada, on teil täielik juurdepääs menüüüksuste klassidele, mida rakendatakse ülaltoodud filtris. Lisage kohandatud menüüüksuste klass ikoonimenüü üksuste jaoks, näiteks:
Menüü tuleks väljastada järgmiselt:
