{"id":233510,"date":"2023-02-16T16:49:00","date_gmt":"2023-02-16T13:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233510"},"modified":"2022-11-11T00:05:42","modified_gmt":"2022-11-10T21:05:42","slug":"jak-dodac-fontawesome-ikony-do-pozycji-menu-za-pomoca-zaawansowanych-pol-niestandardowych","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/jak-dodac-fontawesome-ikony-do-pozycji-menu-za-pomoca-zaawansowanych-pol-niestandardowych\/","title":{"rendered":"Jak doda\u0107 Fontawesome ikony do pozycji menu za pomoc\u0105 zaawansowanych p\u00f3l niestandardowych?"},"content":{"rendered":"\n

W tym po\u015bcie dowiesz si\u0119, jak u\u017cywa\u0107 zaawansowanych p\u00f3l niestandardowych (ACF), aby umo\u017cliwi\u0107 dodawanie ikon do menu. W tym przyk\u0142adzie dodamy ikon\u0119 Fontawesome<\/a>, ale mo\u017cesz zmodyfikowa\u0107 kod, aby dopasowa\u0107 go do swoich potrzeb. Zamiast tego mo\u017cesz doda\u0107 selektor plik\u00f3w dla plik\u00f3w SVG lub co\u015b innego.<\/p>\n

Ten przewodnik b\u0119dzie dzia\u0142a\u0142 z bezp\u0142atn\u0105 wersj\u0105 zaawansowanych p\u00f3l niestandardowych<\/a>, ale upewnij si\u0119, \u017ce masz wersj\u0119 5.6 lub nowsz\u0105.<\/p>\n

Dodawanie grupy i pola ACF<\/h2>\n

Pierwszym krokiem jest dodanie samego pola do element\u00f3w menu. Ten przewodnik doda tekst wej\u015bciowy, aby wpisa\u0107 nazw\u0119 klasy dla ikony Fontawesome, ale je\u015bli potrzebujesz innego rozwi\u0105zania (np. Selektora plik\u00f3w dla pliku SVG), zmodyfikuj pola wej\u015bciowe.<\/p>\n

Upewnij si\u0119, \u017ce lokalizacja grupy Zaawansowane pole niestandardowe jest ustawiona na \u201ePozycja menu". Mo\u017cesz ustawi\u0107 j\u0105 na \u201eWszystko” lub mo\u017cesz okre\u015bli\u0107 wed\u0142ug lokalizacji menu lub okre\u015blonych menu.<\/p>\n

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

Je\u015bli dodajesz pola i grupujesz wed\u0142ug kodu, ustaw parametr lokalizacji na \u201e nav_menu_item<\/code>„. Aby dowiedzie\u0107 si\u0119 wi\u0119cej, zapoznaj si\u0119 z moim pe\u0142nym dokumentem dotycz\u0105cym dodawania p\u00f3l ACF wed\u0142ug kodu .<\/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
Je\u015bli chodzi o samo pole, dodamy prosty tekst o nazwie \u201e fontawesome_icon<\/code>„.<\/p>\n
\"Jak<\/a><\/p>\n
Lub wed\u0142ug kodu dodaj pole w nast\u0119puj\u0105cy spos\u00f3b:<\/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
Aby uczyni\u0107 go bardziej przyjaznym dla u\u017cytkownika, dobrym pomys\u0142em jest dodanie opisu z linkiem do przegl\u0105du dost\u0119pnych ikon Fontawesome<\/a>. Dodaj\u0119 link, aby pokaza\u0107 tylko darmowe ikony, a nie wszystkie Pro, poniewa\u017c jest to biblioteka, kt\u00f3r\u0105 mam w moim motywie.<\/p>\n
Po zapisaniu pola w adminie lub w kodzie, powiniene\u015b teraz otrzyma\u0107 dodatkowe pole, gdy rozwiniesz element menu:<\/p>\n
\"Jak<\/a><\/p>\n
Uwaga na temat zaj\u0119\u0107 z Fontawesome<\/h2>\n
W \u201estarszych czasach”, przed Fontawesome 5, dostarczanie klasy Fontawesome mog\u0142o by\u0107 nieco uproszczone dla u\u017cytkownika. Do koszyka mo\u017cna by\u0142o po prostu napisa\u0107 \u201ekoszyk” iw naszym kodzie mo\u017cemy doda\u0107 klas\u0119 \u201e fa fa-<\/code>„, a nast\u0119pnie podan\u0105 klas\u0119 (w wyniku \u201e fa fa-shopping-cart<\/code>„). Ale od czasu Fontawesome 5 klasy s\u0105 nieco skomplikowane.<\/p>\n
Klasa \u201eglobalna” \u201e fa<\/code>” zosta\u0142a zast\u0105piona kategoriami specyficznymi dla typu ikony. Na przyk\u0142ad media spo\u0142eczno\u015bciowe lub logo znajduj\u0105 si\u0119 w kategorii marek i wymagaj\u0105 klasy \u201e fab<\/code>„, pe\u0142ne ikony wymagaj\u0105 klasy \u201e fas<\/code>„, podczas gdy zwyk\u0142e ikony wymagaj\u0105 \u201e far<\/code>„, i tak dalej. Dlatego teraz musimy wymaga\u0107 od u\u017cytkownika motywu, aby wpisa\u0142 obie klasy Fontawesome. Znalezienie odpowiedniej klasy powinno by\u0107 \u0142atwe, poniewa\u017c jest to wyra\u017anie pokazane w ka\u017cdej ikonie na stronie Fontawesome:<\/p>\n
\"Jak<\/a><\/p>\n
Jako przyk\u0142ad musisz wpisa\u0107 \u201e fas fa-shopping-cart<\/code>” w naszym polu niestandardowym w elemencie menu dla ikony koszyka.<\/p>\n
Wy\u015bwietlanie ikony w menu<\/h2>\n
Nast\u0119pnym i ostatnim krokiem jest renderowanie ikony w menu, je\u015bli jest ustawiona. W tym celu korzystamy z filtra WordPressa [wp_nav_menu_objects](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_objects\/)<\/code>. Ten filtr jest stosowany do ka\u017cdego menu we wszystkich renderowanych menu tu\u017c przed wygenerowaniem kodu HTML, co pozwala nam modyfikowa\u0107 wynik tekstowy, klasy i nie tylko.<\/p>\n
To, jak chcesz wy\u015bwietli\u0107 ikon\u0119, zale\u017cy od Ciebie. Czy chcesz zast\u0105pi\u0107 tekst linku ikon\u0105, czy chcesz wy\u015bwietli\u0107 ikon\u0119 przed linkiem tekstowym lub za nim? B\u0119dziemy pod\u0105\u017ca\u0107 za niestandardowym Fontawesome, wy\u015bwietlaj\u0105c <i><\/code>tag z podan\u0105 klas\u0105.<\/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
Spos\u00f3b, w jaki modyfikujemy elementy menu, polega na przechodzeniu przez elementy menu w p\u0119tli przy u\u017cyciu polecenia pass by reference (dodanie a &<\/code>przed zmienn\u0105). Oznacza to, \u017ce ka\u017cda zmiana, kt\u00f3r\u0105 wprowadzimy w elemencie, zostanie zastosowana do obiektu element\u00f3w nadrz\u0119dnych.<\/p>\n
Dla ka\u017cdego elementu u\u017cywamy get_field()<\/code>funkcji Advanced Custom Field, aby uzyska\u0107 warto\u015b\u0107 naszego pola \u201e fontawesome_icon<\/code>„. Je\u015bli jest ustawiony, dobrze jest i\u015b\u0107. Powy\u017cszy przyk\u0142ad kodu doda ikon\u0119 przed tekstem. Je\u015bli chcesz doda\u0107 ikon\u0119 po tek\u015bcie, zamie\u0144 wiersz #6<\/code>na:<\/p>\n
$item->title .= '<i class=\"'. $icon. '\"><\/i>';<\/code><\/pre>\n
Lub je\u015bli chcesz zast\u0105pi\u0107 tekst ikon\u0105 \u2013 nie wy\u015bwietlaj\u0105c w og\u00f3le tekstu, zamie\u0144 lini\u0119 #6<\/code>na:<\/p>\n
$item->title = '<i class=\"'. $icon. '\" title=\"'. $item->title. '\"><\/i>';<\/code><\/pre>\n
Doda\u0142em title<\/code>atrybut, aby by\u0142 troch\u0119 bardziej informacyjny dla u\u017cytkownika frontendu. Poniewa\u017c tekst jest usuwany, czasami mo\u017ce by\u0107 myl\u0105ce dla u\u017cytkownika ko\u0144cowego, do czego s\u0142u\u017cy dany element menu. Ale title<\/code>atrybut zapewnia, \u017ce \u200b\u200bu\u017cytkownik otrzyma podpowied\u017a z tekstem elementu menu po najechaniu na ikon\u0119. Jest to oczywi\u015bcie ca\u0142kowicie opcjonalne.<\/p>\n
Je\u015bli u\u017cywasz pola innego typu, np. selektora plik\u00f3w dla plik\u00f3w SVG, musisz odpowiednio dostosowa\u0107 wyj\u015bcie.<\/p>\n
I to wszystko! Powiniene\u015b teraz wy\u015bwietla\u0107 ikon\u0119 Fontawesome w ka\u017cdym miejscu, w kt\u00f3rym jest renderowane menu. Ale prawdopodobnie musisz doda\u0107 do tego troch\u0119 stylizacji. Na przyk\u0142ad dodanie przestrzeni mi\u0119dzy ikon\u0105 a tekstem.<\/p>\n
Dodanie zaj\u0119\u0107 dla \u0142atwiejszej stylizacji<\/h3>\n
Mo\u017cesz doda\u0107 niestandardowe klasy do <i><\/code>tagu lub doda\u0107 wi\u0119cej kodu HTML, je\u015bli to konieczne.<\/p>\n
Je\u015bli potrzebujesz doda\u0107 klas\u0119 do elementu zawijania menu (li<\/code>elementu), masz pe\u0142ny dost\u0119p do klas element\u00f3w menu, kt\u00f3re zostan\u0105 zastosowane w powy\u017cszym filtrze. Dodaj niestandardow\u0105 klas\u0119 elementu menu dla element\u00f3w menu ikon, takich jak:<\/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
Menu powinno wygl\u0105da\u0107 tak:<\/p>\n
\"Jak<\/a><\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Jak doda\u0107 ikony Fontawesome do element\u00f3w menu. U\u017cywamy zaawansowanych p\u00f3l niestandardowych, aby umo\u017cliwi\u0107 definiowanie klas. \u0141atwo jest dostosowa\u0107 kod do ikon SVG lub podobnych.<\/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":[897,721,721,897,1110,805,805,836,836,845,845,866,866],"tags":[1169],"class_list":{"0":"post-233510","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-kod","8":"category-deweloper","11":"category-n-a","12":"category-php-7","14":"category-przewodnik-dla-poczatkujacych","16":"category-samouczki","18":"category-wordpress-7","20":"tag-affiai-pl"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=233510"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233510\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}