{"id":233520,"date":"2023-02-16T16:52:00","date_gmt":"2023-02-16T13:52:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233520"},"modified":"2022-11-11T00:08:33","modified_gmt":"2022-11-10T21:08:33","slug":"kuidas-lisada-taepsemate-kohandatud-vaeljadega-menueueueksustele-suurepaeraseid-ikoone","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kuidas-lisada-taepsemate-kohandatud-vaeljadega-menueueueksustele-suurepaeraseid-ikoone\/","title":{"rendered":"Kuidas lisada t\u00e4psemate kohandatud v\u00e4ljadega men\u00fc\u00fc\u00fcksustele suurep\u00e4raseid ikoone"},"content":{"rendered":"\n

See postitus n\u00e4itab teile, kuidas saate oma men\u00fc\u00fcsse ikoonide lisamiseks kasutada t\u00e4psemaid kohandatud v\u00e4lju (ACF). Selles n\u00e4ites lisame ikooni Fontawesome<\/a>, kuid saate koodi oma vajadustele vastavaks muuta. Selle asemel v\u00f5iksite lisada SVG-failide jaoks failivalija v\u00f5i midagi muud.<\/p>\n

See juhend t\u00f6\u00f6tab Advanced Custom Fields tasuta versiooniga<\/a>, kuid veenduge, et teil oleks versioon 5.6 v\u00f5i uuem.<\/p>\n

ACF-r\u00fchma ja -v\u00e4lja lisamine<\/h2>\n

Esimene samm on v\u00e4lja enda men\u00fc\u00fcelementide lisamine. See juhend lisab tekstisisestuse Fontawesome’i ikooni klassi nime sisestamiseks, kuid kui soovite muud lahendust (nt SVG-faili failivalija), muutke v\u00e4lja sisestusi.<\/p>\n

Veenduge, et teie t\u00e4psemate kohandatud v\u00e4ljade r\u00fchma asukohaks on m\u00e4\u00e4ratud \u201eMen\u00fc\u00fc\u00fcksus". Saate m\u00e4\u00e4rata selle v\u00e4\u00e4rtuseks \u201eK\u00f5ik” v\u00f5i m\u00e4\u00e4rata men\u00fc\u00fc asukohtade v\u00f5i konkreetsete men\u00fc\u00fcde j\u00e4rgi.<\/p>\n

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

Kui lisate oma v\u00e4lju ja r\u00fchmitate koodi j\u00e4rgi, m\u00e4\u00e4rake asukoha parameetriks " nav_menu_item<\/code>". Lisateabe saamiseks vaadake minu t\u00e4ielikku viidet ACF-v\u00e4ljade lisamise kohta koodi j\u00e4rgi<\/a>.<\/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
Mis puutub v\u00e4lja endasse, siis lisame lihtsa tekstisisestuse nimega " fontawesome_icon<\/code>".<\/p>\n
\"Kuidas<\/a><\/p>\n
V\u00f5i koodi j\u00e4rgi lisage v\u00e4li j\u00e4rgmiselt:<\/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
Selle kasutajas\u00f5bralikumaks muutmiseks on hea m\u00f5te lisada kirjeldus koos lingiga saadaolevate Fontawesome’i ikoonide \u00fclevaatele<\/a>. Lisan lingi, et kuvada ainult tasuta ikoone, mitte \u00fchtegi Pro-i, kuna see on minu teema teek.<\/p>\n
P\u00e4rast v\u00e4lja salvestamist administraatorisse v\u00f5i koodisse peaksite n\u00fc\u00fcd men\u00fc\u00fc\u00fcksuse laiendamisel saama t\u00e4iendava v\u00e4lja:<\/p>\n
\"Kuidas<\/a><\/p>\n
M\u00e4rkus Fontawesome’i tundide kohta<\/h2>\n
Vanadel aegadel, enne Fontawesome 5, v\u00f5is Fontawesome’i klassi pakkumine olla kasutaja jaoks m\u00f5nev\u00f5rra lihtsustatud. Ostukorvi jaoks v\u00f5ite lihtsalt kirjutada "ostukorv" ja meie koodi lisada klass " fa fa-<\/code>" ja seej\u00e4rel antud klass (tulemuseks " fa fa-shopping-cart<\/code>"). Kuid alates Fontawesome 5-st on tunnid olnud m\u00f5nev\u00f5rra keerulised.<\/p>\n
"\u00dcldine" klass " fa<\/code>" on asendatud ikoonit\u00fc\u00fcbile vastavate kategooriatega. N\u00e4iteks sotsiaalmeedia v\u00f5i logod kuuluvad kaubam\u00e4rkide kategooriasse ja n\u00f5uavad klassi " fab<\/code>", tahkete ikoonide jaoks on vaja klassi " fas<\/code>", tavaliste ikoonide jaoks aga " far<\/code>" jne. Seet\u00f5ttu peame n\u00fc\u00fcd n\u00f5udma, et teemakasutaja sisestaks m\u00f5lemasse Fontawesome’i klassi. \u00d5ige klassi leidmine peaks olema lihtne, kuna see on selgelt n\u00e4idatud igal Fontawesome’i saidi ikoonil:<\/p>\n
\"Kuidas<\/a><\/p>\n
N\u00e4iteks peate sisestama fas fa-shopping-cart<\/code>ostukorvi ikooni men\u00fc\u00fc\u00fcksuse kohandatud v\u00e4ljale " ".<\/p>\n
Ikooni kuvamine men\u00fc\u00fcs<\/h2>\n
J\u00e4rgmine ja viimane samm on ikooni renderdamine men\u00fc\u00fcs, kui see on m\u00e4\u00e4ratud. Selleks kasutame WordPressi filtrit [wp_nav_menu_objects](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_objects\/)<\/code>. Seda filtrit rakendatakse iga men\u00fc\u00fc jaoks k\u00f5igis renderdatud men\u00fc\u00fcdes vahetult enne selle HTML-i genereerimist, v\u00f5imaldades meil muuta tekstiv\u00e4ljundit, klasse ja palju muud.<\/p>\n
See, kuidas soovite ikooni v\u00e4ljastada, on j\u00e4llegi teie otsustada. Kas soovite lingi teksti asendada ikooniga v\u00f5i soovite ikooni n\u00e4idata kas enne v\u00f5i p\u00e4rast tekstilinki? J\u00e4rgime Fontawesome’i harjumust, v\u00e4ljastades <i><\/code>pakutud klassiga sildi.<\/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
Men\u00fc\u00fc\u00fcksusi muudetakse nii, et sirvime men\u00fc\u00fcelemente, kasutades viidet (&<\/code>muutuja ette lisades). See t\u00e4hendab, et k\u00f5ik \u00fcksuses tehtavad muudatused rakenduvad p\u00f5hi\u00fcksuste objektile.<\/p>\n
Iga \u00fcksuse puhul kasutame get_field()<\/code>oma v\u00e4lja v\u00e4\u00e4rtuse leidmiseks funktsiooni Advanced Custom Field fontawesome_icon<\/code>. Kui see on m\u00e4\u00e4ratud, oleme valmis minema. \u00dclaltoodud koodin\u00e4ide lisab ikooni teksti ette. Kui soovite lisada ikooni p\u00e4rast teksti, asendage rida #6<\/code>j\u00e4rgmisega:<\/p>\n
$item->title .= '<i class=\"'. $icon. '\"><\/i>';<\/code><\/pre>\n
V\u00f5i kui soovite teksti asendada ikooniga \u2013 teksti ei kuvata, asendage rida #6<\/code>j\u00e4rgmisega:<\/p>\n
$item->title = '<i class=\"'. $icon. '\" title=\"'. $item->title. '\"><\/i>';<\/code><\/pre>\n
Lisasin title<\/code>atribuudi, et see oleks kasutajaliidese kasutaja jaoks veidi informatiivsem. Kuna tekst on eemaldatud, v\u00f5ib m\u00f5nikord olla l\u00f5ppkasutaja jaoks segadusse, mille jaoks see men\u00fc\u00fcelement on m\u00f5eldud. Kuid title<\/code>atribuut tagab, et kasutaja saab kursorit ikooni kohal h\u00f5ljutades men\u00fc\u00fc\u00fcksuse tekstiga kohtspikri. See on loomulikult t\u00e4iesti vabatahtlik.<\/p>\n
Kui kasutate teist t\u00fc\u00fcpi v\u00e4lja, nt SVG-failide failivalijat, peate v\u00e4ljundit vastavalt kohandama.<\/p>\n
Ja see ongi k\u00f5ik! N\u00fc\u00fcd peaksite saama Fontawesome’i ikooni k\u00f5ikjal, kus men\u00fc\u00fc renderdatakse. Kuid t\u00f5en\u00e4oliselt peate sellele veidi stiili lisama. N\u00e4iteks t\u00fchiku lisamine ikooni ja teksti vahele.<\/p>\n
Klasside lisamine lihtsamaks stiiliks<\/h3>\n
Saate lisada <i><\/code>m\u00e4rgendile kohandatud klasse v\u00f5i lisada vajadusel veel HTML-i.<\/p>\n
Kui teil on vaja \u00fcmbrismen\u00fc\u00fc\u00fcksusele (li<\/code>elemendile) klass lisada, on teil t\u00e4ielik juurdep\u00e4\u00e4s men\u00fc\u00fc\u00fcksuste klassidele, mida rakendatakse \u00fclaltoodud filtris. Lisage kohandatud men\u00fc\u00fc\u00fcksuste klass ikoonimen\u00fc\u00fc \u00fcksuste jaoks, n\u00e4iteks:<\/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
Men\u00fc\u00fc tuleks v\u00e4ljastada j\u00e4rgmiselt:<\/p>\n
\"Kuidas<\/a><\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Kuidas lisada men\u00fc\u00fc\u00fcksustele Fontawesome’i ikoone. Klasside m\u00e4\u00e4ratlemiseks kasutame t\u00e4psemaid kohandatud v\u00e4lju. SVG-ikoonide v\u00f5i muu sarnase koodi kohandamine on lihtne.<\/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":[718,894,718,833,894,1110,842,802,802,833,842,863,863],"tags":[1165],"class_list":{"0":"post-233520","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-arendaja","8":"category-kood","10":"category-juhend-algajatele","12":"category-n-a","13":"category-opetused","14":"category-php-4","18":"category-wordpress-4","20":"tag-affiai-et"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=233520"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233520\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}