{"id":233346,"date":"2023-02-11T14:41:00","date_gmt":"2023-02-11T11:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233346"},"modified":"2022-11-10T20:35:56","modified_gmt":"2022-11-10T17:35:56","slug":"dodaj-przyjazne-dla-uzytkownika-niestandardowe-ustawienia-meta-do-pozycji-menu-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/dodaj-przyjazne-dla-uzytkownika-niestandardowe-ustawienia-meta-do-pozycji-menu-wordpress\/","title":{"rendered":"Dodaj przyjazne dla u\u017cytkownika niestandardowe ustawienia meta do pozycji menu WordPress"},"content":{"rendered":"\n<p>W ostatniej aktualizacji WordPressa jest teraz mo\u017cliwe i ca\u0142kiem proste dodawanie niestandardowych p\u00f3l meta do element\u00f3w menu. W tym po\u015bcie dowiemy si\u0119, jak doda\u0107 nasze niestandardowe ustawienia do element\u00f3w menu, zaktualizowa\u0107 ich ustawienia i wreszcie, jak wykorzysta\u0107 metadane w u\u017cyciu.<\/p>\n<p>Niedawno WordPress <a href=\"https:\/\/make.wordpress.org\/core\/2020\/02\/25\/wordpress-5-4-introduces-new-hooks-to-add-custom-fields-to-menu-items\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">og\u0142osi\u0142 wsparcie dla dodawania niestandardowych p\u00f3l do element\u00f3w menu<\/a> w wersji 5.4. Dodano dwie nowe akcje, kt\u00f3re umo\u017cliwiaj\u0105 programistom dodawanie niestandardowych p\u00f3l na stronie administratora menu WordPress oraz w edytorze menu Customizer. W tym po\u015bcie skupimy si\u0119 na jednym z nich, tym dla strony administratora menu WordPress.<\/p>\n<p>Dzi\u0119ki tej zmianie nie ma ju\u017c potrzeby zmuszania u\u017cytkownik\u00f3w motyw\u00f3w lub wtyczek do zapami\u0119tywania i wpisywania nazw klas, aby aktywowa\u0107 \u201eustawienia&quot; pozycji menu. Do tej pory by\u0142 to powszechny proces w przypadku takich rzeczy, jak sprawienie, by pozycja menu wygl\u0105da\u0142a jak przycisk lub prze\u0142\u0105cznik mi\u0119dzy r\u00f3\u017cnymi projektami listy rozwijanej, cz\u0119sto w po\u0142\u0105czeniu z niestandardowym menu walker.<\/p>\n<p>Pami\u0119taj, \u017ce do dzia\u0142ania tego kodu wymagana jest minimalna wersja WordPress 5.4.0.<\/p>\n<h2>Co zrobimy w tym samouczku<\/h2>\n<p>Dzi\u0119ki nowemu zaczepowi do element\u00f3w menu i obs\u0142udze WordPressa do dodawania metadanych do element\u00f3w menu naprawd\u0119 nie ma ogranicze\u0144 co do rodzaju \u017c\u0105danych ustawie\u0144. Proces zale\u017cy od efektu ko\u0144cowego. W wi\u0119kszo\u015bci przypadk\u00f3w wystarczy doda\u0107 w\u0142asn\u0105 klas\u0119 CSS do pozycji menu.<\/p>\n<p>Dla uproszczenia dodamy w tym po\u015bcie pole wyboru \u201ePoka\u017c jako przycisk&#8221;. W naszym motywie mamy CSS, kt\u00f3ry stylizuje element menu tak, aby wygl\u0105da\u0142 jak przycisk (wezwanie do dzia\u0142ania), je\u015bli element ma okre\u015blon\u0105 klas\u0119. Zamiast zmusza\u0107 u\u017cytkownika motywu do wpisania klasy CSS \u201emenu-item-button&#8221; w polu klasy CSS elementu menu w admin, oferujemy im przyjazne dla u\u017cytkownika pole wyboru.<\/p>\n<p>Na ko\u0144cu tego posta znajdziesz kilka pomys\u0142\u00f3w na inne dzia\u0142ania i filtry, kt\u00f3rych mo\u017cesz u\u017cy\u0107, je\u015bli chcesz zrobi\u0107 co\u015b wi\u0119cej ni\u017c tylko doda\u0107 klas\u0119 CSS.<\/p>\n<p>Zaczynajmy!<\/p>\n<h2>Dodawanie niestandardowych p\u00f3l do element\u00f3w menu<\/h2>\n<p>Niedawno dodany nowy haczyk to <code>[wp_nav_menu_item_custom_fields](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_item_custom_fields\/)<\/code>. Jest to hak, kt\u00f3ry uruchamia si\u0119 tu\u017c nad przyciskami przenoszenia elementu menu;<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e51560662d6.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e51560662d6.png\" alt=\"Dodaj przyjazne dla u\u017cytkownika niestandardowe ustawienia meta do pozycji menu WordPress\" ><\/a><\/p>\n<p>Haczyk ma nie mniej ni\u017c pi\u0119\u0107 parametr\u00f3w. W tym po\u015bcie zrobimy rzeczy, kt\u00f3re wymagaj\u0105 tylko dw\u00f3ch pierwszych.<\/p>\n<ul>\n<li><code>item_id<\/code>: Identyfikator aktualnego elementu menu<\/li>\n<li><code>item<\/code>: Obiekt danych pozycji menu<\/li>\n<li><code>depth<\/code>: G\u0142\u0119boko\u015b\u0107 pozycji menu w menu, oznaczona jako liczba ca\u0142kowita<\/li>\n<li><code>args<\/code>: Obiekt argument\u00f3w pozycji menu<\/li>\n<li><code>nav_id<\/code>: ID menu nawigacji<\/li>\n<\/ul>\n<p>Wszystkie dane wej\u015bciowe dodane w tym zaczepie musz\u0105 mie\u0107 <code>name<\/code>atrybut (poniewa\u017c edytor menu jest formularzem). Atrybut name mo\u017ce mie\u0107 dowoln\u0105 nazw\u0119, ale musi by\u0107 unikalny i musisz doda\u0107 identyfikator pozycji menu (pierwszy parametr) w nawiasach. Np <code>name=\"my-custom-field[&lt;item ID&gt;]<\/code>. \u201e. W ten spos\u00f3b robi\u0105 to inne standardowe ustawienia pozycji menu.<\/p>\n<p>Zacznijmy od przyk\u0142adu dodania pola wyboru, aby element menu wygl\u0105da\u0142 jak przycisk, gdy menu jest umieszczone jako menu g\u0142\u00f3wne. Zaczepimy si\u0119 <code>wp_nav_menu_item_custom_fields<\/code>tylko dwoma pierwszymi parametrami i wykonamy nast\u0119puj\u0105ce czynno\u015bci:<\/p>\n<pre><code>add_action('wp_nav_menu_item_custom_fields', function($item_id, $item) {\n    $show_as_button = get_post_meta($item_id, '_show-as-button', true);\n    ?&gt;\n    &lt;p class=\"awp-show-as-button description description-wide\"&gt;\n        &lt;label for=\"awp-menu-item-button-&lt;?php echo $item_id; ?&gt;\" &gt;\n            &lt;input type=\"checkbox\" \n                id=\"awp-menu-item-button-&lt;?php echo $item_id; ?&gt;\" \n                name=\"awp-menu-item-button[&lt;?php echo $item_id; ?&gt;]\" \n                &lt;?php checked($show_as_button, true); ?&gt; \n            \/&gt;&lt;?php _e('Show as a button', 'awp'); ?&gt;\n        &lt;\/label&gt;\n    &lt;\/p&gt;\n    &lt;?php\n}, 10, 2);<\/code><\/pre>\n<p>W wierszu <code>#2<\/code>pobieramy aktualn\u0105 warto\u015b\u0107 naszej meta pozycji menu. Pozycje menu u\u017cywaj\u0105 post meta, wi\u0119c u\u017cywamy tego, <code>[get_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/)()<\/code>co prawdopodobnie ju\u017c znasz. Przechowujemy metadane pozycji menu za pomoc\u0105 klawisza \u201e <code>_show-as-button<\/code>&#8222;.<\/p>\n<p>Nast\u0119pnie jest to kwestia powt\u00f3rzenia dobrego kodu HTML. Powy\u017cszy kod u\u017cywa niekt\u00f3rych klas ju\u017c u\u017cytych w elementach menu, aby wygl\u0105da\u0142o \u0142adnie bez dodawania w\u0142asnego stylu (<code>p<\/code>znacznik z klasami \u201e <code>description description-wide<\/code>&#8222;).<\/p>\n<p>Wa\u017cne cz\u0119\u015bci dziej\u0105 si\u0119 na linii <code>#8<\/code>i <code>#9<\/code>. Kierujemy si\u0119 zasad\u0105 atrybutu name, dodaj\u0105c <code>$item_id<\/code>w nawiasach i upewniamy si\u0119, \u017ce aktualnie zapisana warto\u015b\u0107 jest odzwierciedlona w checkboxie. Tutaj mo\u017cesz doda\u0107 dowolny typ wej\u015b\u0107, a nawet wiele wej\u015b\u0107. Pami\u0119taj tylko, aby poda\u0107 odpowiedni <code>name<\/code>atrybut i poprawnie ustawi\u0107 jego aktualn\u0105 warto\u015b\u0107.<\/p>\n<p>Dzi\u0119ki temu kodowi w kodzie motywu <code>functions.php<\/code>lub wtyczki powiniene\u015b teraz otrzyma\u0107 nowe pole wyboru dla wszystkich pozycji menu:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e5156147558.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e5156147558.png\" alt=\"Dodaj przyjazne dla u\u017cytkownika niestandardowe ustawienia meta do pozycji menu WordPress\" ><\/a><\/p>\n<p>Obecnie nie ratuje naszego pola. To kolejny krok.<\/p>\n<h2>Aktualizacja p\u00f3l niestandardowych<\/h2>\n<p>Aby zaktualizowa\u0107 niestandardowe pola na elementach menu, u\u017cywamy hooka <code>[wp_update_nav_menu_item](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_update_nav_menu_item\/)<\/code>. Zawiera trzy argumenty, ale potrzebujemy tylko drugiego, czyli identyfikatora pozycji menu.<\/p>\n<p>To, jak poradzisz sobie z zapisywaniem warto\u015bci swoich danych wej\u015bciowych, zale\u017cy od Ciebie. Zdecydowa\u0142em si\u0119 po prostu zapisa\u0107 \u201e <code>_show-as-button<\/code>&#8221; jako prawda lub fa\u0142sz. Po prostu u\u017cyj <code>[update_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/update_post_meta\/)()<\/code>i\/lub <code>[delete_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/delete_post_meta\/)()<\/code>.<\/p>\n<pre><code>add_action('wp_update_nav_menu_item', function($menu_id, $menu_item_db_id) {\n    $button_value = (isset($_POST['awp-menu-item-button'][$menu_item_db_id]) &amp;&amp; $_POST['awp-menu-item-button'][$menu_item_db_id] == 'on')? true: false;\n    update_post_meta($menu_item_db_id, '_show-as-button', $button_value);\n}, 10, 2);<\/code><\/pre>\n<p>W powy\u017cszym kodzie pobieram warto\u015b\u0107 pola niestandardowego wed\u0142ug jego nazwy w <code>$_POST<\/code>tablicy. Poniewa\u017c jest to pole wyboru, albo nie b\u0119dzie istnie\u0107 w <code>$_POST<\/code>tablicy (niezaznaczone), albo zostanie zwr\u00f3cone jako \u201e <code>on<\/code>&#8222;. Nast\u0119pnie aktualizuj\u0119 klucz meta \u201e <code>_show-as-button<\/code>&#8221; jako prawda lub fa\u0142sz.<\/p>\n<p>Z powy\u017cszym kodem powiniene\u015b zobaczy\u0107, \u017ce twoje pole aktualizuje si\u0119 poprawnie podczas zapisywania menu.<\/p>\n<p>Nast\u0119pnym krokiem jest zrobienie czego\u015b z naszymi niestandardowymi metadanymi. A spos\u00f3b, w jaki to zrobisz, zale\u017cy od tego, jaki jest Tw\u00f3j efekt ko\u0144cowy. W naszym przyk\u0142adzie wszystko, co musimy zrobi\u0107, to doda\u0107 w\u0142asn\u0105 klas\u0119 do elementu menu.<\/p>\n<h2>Zaktualizuj klas\u0119 CSS pozycji menu<\/h2>\n<p>WordPress oferuje filtr klas pozycji menu: <code>[nav_menu_css_class](https:\/\/developer.wordpress.org\/reference\/hooks\/nav_menu_css_class\/)<\/code>. Wszystko, co musimy zrobi\u0107, to doda\u0107 w\u0142asn\u0105 klas\u0119 do tablicy przez ten filtr, je\u015bli nasza niestandardowa meta to <code>true<\/code>. U\u017cywamy <code>[get_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/)()<\/code>do uzyskania warto\u015bci &#8217; <code>_show-as-button<\/code>&#8217; i je\u015bli to prawda, dodajemy klas\u0119 CSS &#8217; <code>menu-item-button<\/code>&#8217;:<\/p>\n<pre><code>add_filter('nav_menu_css_class', function($classes, $menu_item) {\n    $show_as_button = get_post_meta($menu_item-&gt;ID, '_show-as-button', true);\n    if ($show_as_button) {\n        $classes[] = 'menu-item-button';\n    }\n    return $classes;\n}, 10, 2);<\/code><\/pre>\n<p>Filtr <code>nav_menu_css_class<\/code>zawiera \u0142\u0105cznie cztery argumenty, w tym argumenty menu i g\u0142\u0119boko\u015b\u0107 elementu menu. Je\u015bli to konieczne, mo\u017cesz sprawi\u0107, \u017ce te warto\u015bci b\u0119d\u0105 mia\u0142y wp\u0142yw na nazwy klas. Na przyk\u0142ad zwykle nie ma sensu przekszta\u0142ca\u0107 elementu menu w przycisk, chyba \u017ce znajduje si\u0119 on na najwy\u017cszym poziomie (a nie w menu rozwijanym).<\/p>\n<p>W powy\u017cszym kodzie powiniene\u015b teraz zobaczy\u0107, \u017ce ka\u017cdy element menu, kt\u00f3ry zaznaczy\u0142 \u201ePoka\u017c jako przycisk&#8221;, otrzyma klas\u0119 \u201e <code>menu-item-button<\/code>&#8222;.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e515621cd00.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e515621cd00.png\" alt=\"Dodaj przyjazne dla u\u017cytkownika niestandardowe ustawienia meta do pozycji menu WordPress\" ><\/a><\/p>\n<p>Pami\u0119taj: mo\u017ce si\u0119 zdarzy\u0107, \u017ce <code>nav_menu_css_class<\/code>filtr nie zostanie zastosowany, je\u015bli menu korzysta z niestandardowego chodzika po menu, kt\u00f3ry na przyk\u0142ad zawiera metod\u0119 <code>start_el()<\/code>. Walker musi zastosowa\u0107 <code>nav_menu_css_class<\/code>filtr do klas pozycji menu (u\u017cywaj\u0105c <code>apply_filters()<\/code>), aby powy\u017cszy filtr dzia\u0142a\u0142!<\/p>\n<h2>Inne zastosowania niestandardowych p\u00f3l meta pozycji menu<\/h2>\n<p>Jak wspomniano, proces korzystania z p\u00f3l niestandardowych zale\u017cy od wyniku ko\u0144cowego. Ci\u0119\u017cko stworzy\u0107 post obejmuj\u0105cy wszystkie mo\u017cliwo\u015bci. Ale przynajmniej to powinno da\u0107 ci kilka pomys\u0142\u00f3w. Powy\u017cszy przyk\u0142ad pokaza\u0142, jak po prostu doda\u0107 niestandardow\u0105 klas\u0119 do elementu menu.<\/p>\n<p>W innych przypadkach mo\u017cesz chcie\u0107 przej\u0105\u0107 metadane w menu walker. W wi\u0119kszo\u015bci funkcji w menu walker masz dost\u0119p do identyfikatora pozycji menu, dzi\u0119ki czemu mo\u017cesz \u0142atwo pobra\u0107 metadane.<\/p>\n<p>Alternatyw\u0105 dla niestandardowego walkera po menu jest u\u017cycie filtra, <code>[wp_setup_nav_menu_item](https:\/\/developer.wordpress.org\/reference\/functions\/wp_setup_nav_menu_item\/)<\/code>aby uzyska\u0107 wi\u0119ksz\u0105 kontrol\u0119 nad obiektem pozycji menu.<\/p>\n<p>Mo\u017cesz te\u017c u\u017cy\u0107 filtru <code>[wp_get_nav_menu_items](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_nav_menu_items\/)<\/code>, aby na przyk\u0142ad wykluczy\u0107 elementy menu, je\u015bli ustawienie ma ogranicza\u0107 widoczno\u015b\u0107 element\u00f3w menu.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W ostatniej aktualizacji WordPressa jest teraz mo\u017cliwe i ca\u0142kiem proste dodawanie niestandardowych p\u00f3l meta do element\u00f3w menu. W tym po\u015bcie dowiemy si\u0119 jak!<\/p>\n","protected":false},"author":1,"featured_media":223830,"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,929,929,845,866,866],"tags":[1169],"class_list":{"0":"post-233346","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","17":"category-tematy","20":"category-wordpress-7","22":"tag-affiai-pl"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233346","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=233346"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233346\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/223830"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}