{"id":233352,"date":"2023-02-11T14:24:00","date_gmt":"2023-02-11T11:24:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233352"},"modified":"2022-11-10T20:38:09","modified_gmt":"2022-11-10T17:38:09","slug":"lisage-wordpressi-menueueueksustele-kasutajasobralikud-kohandatud-metaseaded","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/lisage-wordpressi-menueueueksustele-kasutajasobralikud-kohandatud-metaseaded\/","title":{"rendered":"Lisage WordPressi men\u00fc\u00fc\u00fcksustele kasutajas\u00f5bralikud kohandatud metaseaded"},"content":{"rendered":"\n<p>Hiljutises WordPressi v\u00e4rskenduses on n\u00fc\u00fcd v\u00f5imalik ja \u00fcsna lihtne lisada men\u00fc\u00fc\u00fcksustele kohandatud metav\u00e4lju. Sellest postitusest \u00f5pime, kuidas lisada men\u00fc\u00fc\u00fcksustele kohandatud s\u00e4tteid, v\u00e4rskendada nende s\u00e4tteid ja l\u00f5puks metaandmeid kasutusele v\u00f5tta.<\/p>\n<p>Hiljuti teatas WordPress, et toetab versiooni 5.4 <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\">men\u00fc\u00fc\u00fcksustele kohandatud v\u00e4ljade lisamist .<\/a> Lisati kaks uut toimingut, mis v\u00f5imaldavad arendajatel lisada kohandatud v\u00e4lju WordPressi men\u00fc\u00fc administraatori lehel ja kohandaja men\u00fc\u00fcredaktoris. Selles postituses keskendume \u00fchele neist, WordPressi men\u00fc\u00fc administraatori lehe omale.<\/p>\n<p>Selle muudatusega ei ole enam vaja sundida teemade v\u00f5i pistikprogrammide kasutajaid meelde j\u00e4tma ja klassinimesid v\u00e4lja tippima, et aktiveerida men\u00fc\u00fc\u00fcksus &quot;seaded&quot;. See on siiani olnud tavaline protsess n\u00e4iteks men\u00fc\u00fc\u00fcksuse nupu v\u00f5i l\u00fcliti moodi muutmiseks. erineva kujundusega rippmen\u00fc\u00fc vahel. Sageli kombineerituna kohandatud men\u00fc\u00fck\u00e4ijaga.<\/p>\n<p>Pidage meeles, et selle koodi toimimiseks on vaja WordPressi minimaalset versiooni 5.4.0.<\/p>\n<h2>Mida me selles \u00f5petuses teeme<\/h2>\n<p>T\u00e4nu uuele konksule men\u00fc\u00fc\u00fcksustele ja WordPressi toele metaandmete lisamiseks men\u00fc\u00fc\u00fcksustele ei ole soovitud seadete osas tegelikult piiranguid. Protsess s\u00f5ltub sellest, milline on teie l\u00f5pptulemus. Enamikul juhtudel piisab kohandatud CSS-klassi lisamisest men\u00fc\u00fcelemendile.<\/p>\n<p>Lihtsuse huvides lisame sellesse postitusse m\u00e4rkeruudu &quot;Kuva nupuna&quot;. Meie teemas on CSS, mis muudab men\u00fc\u00fcelemendi stiiliks (kutse tegevusele) nupuks, kui \u00fcksusel on teatud klass. Selle asemel, et sundida teemakasutajat sisestama CSS-klassi &#8220;menu-item-button&quot; men\u00fc\u00fcelemendi CSS-klassi v\u00e4ljale administraatoris, pakume talle kasutajas\u00f5bralikku m\u00e4rkeruutu.<\/p>\n<p>Selle postituse l\u00f5pust leiate ideid muude toimingute ja filtrite kohta, mida kasutada, kui soovite teha enamat kui lihtsalt CSS-klassi lisamine.<\/p>\n<p>Alustame!<\/p>\n<h2>Kohandatud v\u00e4ljade lisamine men\u00fc\u00fc\u00fcksustele<\/h2>\n<p>Hiljuti lisatud uus konks on <code>[wp_nav_menu_item_custom_fields](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_item_custom_fields\/)<\/code>. See on konks, mis vallandub otse men\u00fc\u00fcelemendi liigutusnuppude kohal;<\/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=\"Lisage WordPressi men\u00fc\u00fc\u00fcksustele kasutajas\u00f5bralikud kohandatud metaseaded\" ><\/a><\/p>\n<p>Konksul on v\u00e4hemalt viis parameetrit. Selles postituses teeme asju, mis n\u00f5uavad ainult kahte.<\/p>\n<ul>\n<li><code>item_id<\/code>: praeguse men\u00fc\u00fc\u00fcksuse ID<\/li>\n<li><code>item<\/code>: Men\u00fc\u00fc\u00fcksuse andmeobjekt<\/li>\n<li><code>depth<\/code>: men\u00fc\u00fcelemendi s\u00fcgavus men\u00fc\u00fcs, t\u00e4histatuna t\u00e4isarvuna<\/li>\n<li><code>args<\/code>: men\u00fc\u00fc\u00fcksuse argumentide objekt<\/li>\n<li><code>nav_id<\/code>: navigeerimismen\u00fc\u00fc ID<\/li>\n<\/ul>\n<p>K\u00f5igil sellesse konksu lisatud sisenditel peab olema <code>name<\/code>atribuut (kuna men\u00fc\u00fcredaktor on vorm). Nimeatribuudile v\u00f5ib anda soovitud nime, kuid see peab olema kordumatu ja sulgudes tuleb lisada men\u00fc\u00fc\u00fcksuse ID (esimene parameeter). Nt <code>name=\"my-custom-field[&lt;item ID&gt;]<\/code>&quot;. Nii teevad seda ka teised standardsed men\u00fc\u00fck\u00e4sud.<\/p>\n<p>Alustame n\u00e4itega m\u00e4rkeruudu lisamisest, et muuta men\u00fc\u00fcelement nupuna, kui men\u00fc\u00fc on asetatud peamen\u00fc\u00fcks. Kasutame <code>wp_nav_menu_item_custom_fields<\/code>ainult kahte esimest parameetrit ja teeme j\u00e4rgmist.<\/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>Real <code>#2<\/code>toome meie men\u00fc\u00fcelemendi meta praeguse v\u00e4\u00e4rtuse. Men\u00fc\u00fc elemendid kasutavad post metat, seega kasutame seda, <code>[get_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/)()<\/code>millega olete ilmselt juba tuttav. Men\u00fc\u00fc\u00fcksuse metaandmed salvestame klahvi &#8216; <code>_show-as-button<\/code>&#8216; abil.<\/p>\n<p>Siis on vaja m\u00f5nda head HTML-i v\u00e4lja tuua. \u00dclaltoodud kood kasutab m\u00f5nda klassi, mida juba men\u00fc\u00fcelementide jaoks on kasutatud, et see n\u00e4eks kena v\u00e4lja ilma kohandatud stiili lisamata (<code>p<\/code>silt klassidega &quot; <code>description description-wide<\/code>&quot;).<\/p>\n<p>Olulised osad toimuvad joonel <code>#8<\/code>ja <code>#9<\/code>. J\u00e4rgime atribuudi name reeglit, lisades <code>$item_id<\/code>sulgudesse, ja veendume, et praegune salvestatud v\u00e4\u00e4rtus kajastub m\u00e4rkeruudus. Siin saate lisada mis tahes t\u00fc\u00fcpi sisendeid ja isegi mitut sisendit. \u00c4rge unustage sisestada sobiv <code>name<\/code>atribuut ja m\u00e4\u00e4rata nende praegune v\u00e4\u00e4rtus \u00f5igesti.<\/p>\n<p>Kui see kood on teie teema <code>functions.php<\/code>v\u00f5i pistikprogrammi koodis, peaksite n\u00fc\u00fcd saama k\u00f5igi men\u00fc\u00fc\u00fcksuste jaoks uue m\u00e4rkeruudu:<\/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=\"Lisage WordPressi men\u00fc\u00fc\u00fcksustele kasutajas\u00f5bralikud kohandatud metaseaded\" ><\/a><\/p>\n<p>Praegu see meie p\u00f5ldu ei p\u00e4\u00e4sta. See on j\u00e4rgmine samm.<\/p>\n<h2>Kohandatud v\u00e4ljade v\u00e4rskendamine<\/h2>\n<p>Men\u00fc\u00fc\u00fcksuste kohandatud v\u00e4ljade v\u00e4rskendamiseks kasutame konksu <code>[wp_update_nav_menu_item](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_update_nav_menu_item\/)<\/code>. Sellel on kolm argumenti, kuid vajame ainult teist, mis on men\u00fc\u00fc\u00fcksuse ID.<\/p>\n<p>See, kuidas te oma sisendi(te) v\u00e4\u00e4rtuse salvestamisega tegelete, on teie otsustada. Olen valinud, et salvestada &quot; <code>_show-as-button<\/code>&quot; t\u00f5eseks v\u00f5i valeks. Lihtsalt kasutage <code>[update_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/update_post_meta\/)()<\/code>ja\/v\u00f5i <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>\u00dclaltoodud koodist toon kohandatud v\u00e4lja v\u00e4\u00e4rtuse selle <code>$_POST<\/code>massiivi nime j\u00e4rgi. Kuna see on m\u00e4rkeruut, siis seda kas <code>$_POST<\/code>massiivis ei eksisteeri (m\u00e4rkimata) v\u00f5i tagastatakse see kui &quot; <code>on<\/code>&quot;. Seej\u00e4rel v\u00e4rskendan metav\u00f5tit &quot; <code>_show-as-button<\/code>&quot; t\u00f5eseks v\u00f5i v\u00e4\u00e4raks.<\/p>\n<p>\u00dclaltoodud koodiga peaksite men\u00fc\u00fc salvestamisel n\u00e4gema, et teie v\u00e4li v\u00e4rskendatakse \u00f5igesti.<\/p>\n<p>J\u00e4rgmine samm on teha midagi meie kohandatud metaandmetega. Ja kuidas te seda teete, s\u00f5ltub sellest, milline on teie l\u00f5pptulemus. Meie n\u00e4ite puhul peame vaid lisama men\u00fc\u00fcelemendile kohandatud klassi.<\/p>\n<h2>V\u00e4rskenda men\u00fc\u00fc\u00fcksuse CSS-klassi<\/h2>\n<p>WordPress pakub men\u00fc\u00fcelemendi klassidele filtrit: <code>[nav_menu_css_class](https:\/\/developer.wordpress.org\/reference\/hooks\/nav_menu_css_class\/)<\/code>. Peame vaid selle filtri abil massiivile kohandatud klassi lisama, kui meie kohandatud meta on <code>true<\/code>. Kasutame <code>[get_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/)()<\/code>\u201e &#8221; v\u00e4\u00e4rtuse saamiseks <code>_show-as-button<\/code>ja kui see on t\u00f5si, lisame CSS-klassi \u201e <code>menu-item-button<\/code>&#8220;:<\/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>Filtril <code>nav_menu_css_class<\/code>on kokku neli argumenti, sealhulgas men\u00fc\u00fcargumendid ja men\u00fc\u00fcelemendi s\u00fcgavus. Vajadusel saate nende v\u00e4\u00e4rtustega m\u00f5jutada klasside nimesid. N\u00e4iteks pole tavaliselt m\u00f5tet muuta men\u00fc\u00fc\u00fcksust nupuks, v\u00e4lja arvatud juhul, kui see asub \u00fclemisel tasemel (ja mitte men\u00fc\u00fc rippmen\u00fc\u00fcs).<\/p>\n<p>\u00dclaltoodud koodiga peaksite n\u00fc\u00fcd n\u00e4gema, et iga men\u00fc\u00fcelement, mis on m\u00e4rkinud &quot;N\u00e4ita nupuna&quot;, saab klassi &quot; <code>menu-item-button<\/code>&quot;.<\/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=\"Lisage WordPressi men\u00fc\u00fc\u00fcksustele kasutajas\u00f5bralikud kohandatud metaseaded\" ><\/a><\/p>\n<p><code>nav_menu_css_class<\/code>Pidage meeles. Kui men\u00fc\u00fc kasutab kohandatud men\u00fc\u00fck\u00e4ijat, mis sisaldab n\u00e4iteks meetodit, v\u00f5ite kogeda, et filtrit ei rakendata <code>start_el()<\/code>. K\u00f5ndija peab rakendama <code>nav_menu_css_class<\/code>filtri men\u00fc\u00fcelemendi klassidele (kasutades <code>apply_filters()<\/code>), et \u00fclaltoodud filter t\u00f6\u00f6taks!<\/p>\n<h2>Men\u00fc\u00fc\u00fcksuse kohandatud metav\u00e4ljade muud kasutusviisid<\/h2>\n<p>Nagu mainitud, s\u00f5ltub kohandatud v\u00e4ljade kasutamise protsess l\u00f5pptulemusest. K\u00f5iki v\u00f5imalusi h\u00f5lmavat postitust on raske teha. Kuid see peaks teile v\u00e4hemalt ideid andma. \u00dclaltoodud n\u00e4ide n\u00e4itas, kuidas lihtsalt kohandatud klass men\u00fc\u00fcelemendile lisada.<\/p>\n<p>Muudel juhtudel v\u00f5ite soovida metaandmeid men\u00fc\u00fck\u00e4ijal edasi kasutada. Enamiku men\u00fc\u00fck\u00e4ija funktsioonide puhul on teil juurdep\u00e4\u00e4s men\u00fc\u00fc\u00fcksuse ID-le ja seega saate h\u00f5lpsasti metaandmeid tuua.<\/p>\n<p>Alternatiivina kohandatud men\u00fc\u00fck\u00e4ija kasutamisele saate men\u00fc\u00fc\u00fcksuse <code>[wp_setup_nav_menu_item](https:\/\/developer.wordpress.org\/reference\/functions\/wp_setup_nav_menu_item\/)<\/code>objekti paremaks juhtimiseks kasutada filtrit.<\/p>\n<p>V\u00f5i v\u00f5ite kasutada filtrit <code>[wp_get_nav_menu_items](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_nav_menu_items\/)<\/code>n\u00e4iteks men\u00fc\u00fcelementide v\u00e4listamiseks, kui teie seade on men\u00fc\u00fcelemendi n\u00e4htavust piirata.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hiljutises WordPressi v\u00e4rskenduses on n\u00fc\u00fcd v\u00f5imalik ja \u00fcsna lihtne lisada men\u00fc\u00fc\u00fcksustele kohandatud metav\u00e4lju. Selles postituses \u00f5pime, kuidas!<\/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":[718,894,718,833,894,1110,842,802,802,833,926,926,842,863,863],"tags":[1165],"class_list":{"0":"post-233352","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","17":"category-teemasid","20":"category-wordpress-4","22":"tag-affiai-et"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233352","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=233352"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/223830"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}