{"id":233342,"date":"2023-02-11T14:45:00","date_gmt":"2023-02-11T11:45:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233342"},"modified":"2022-11-10T20:34:33","modified_gmt":"2022-11-10T17:34:33","slug":"lisaeae-kaeyttaejaeystaevaelliset-mukautetut-meta-asetukset-wordpressin-valikkokohtiin","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/lisaeae-kaeyttaejaeystaevaelliset-mukautetut-meta-asetukset-wordpressin-valikkokohtiin\/","title":{"rendered":"Lis\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4lliset mukautetut meta-asetukset WordPressin valikkokohtiin"},"content":{"rendered":"\n<p>Tuoreessa WordPress-p\u00e4ivityksess\u00e4 on nyt mahdollista ja melko yksinkertaista lis\u00e4t\u00e4 mukautettuja metakentti\u00e4 valikon kohtiin. T\u00e4ss\u00e4 viestiss\u00e4 opimme lis\u00e4\u00e4m\u00e4\u00e4n mukautettuja asetuksiamme valikkokohtiin, p\u00e4ivitt\u00e4m\u00e4\u00e4n niiden asetuksia ja lopuksi kuinka otamme metatiedot k\u00e4ytt\u00f6\u00f6n.<\/p>\n<p>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\">ilmoitti \u00e4skett\u00e4in tuesta mukautettujen kenttien lis\u00e4\u00e4miselle valikkokohtiin<\/a> versiossa 5.4. Lis\u00e4ttiin kaksi uutta toimintoa, joiden avulla kehitt\u00e4j\u00e4t voivat lis\u00e4t\u00e4 mukautettuja kentti\u00e4 WordPress-valikon hallintasivulle ja Customizerin valikkoeditoriin. T\u00e4ss\u00e4 viestiss\u00e4 keskitymme yhteen niist\u00e4, WordPress-valikon j\u00e4rjestelm\u00e4nvalvojasivulle.<\/p>\n<p>T\u00e4m\u00e4n muutoksen my\u00f6t\u00e4 ei en\u00e4\u00e4 tarvitse pakottaa teeman tai liit\u00e4nn\u00e4isen k\u00e4ytt\u00e4ji\u00e4 muistamaan ja kirjoittamaan luokkien nimi\u00e4 valikkokohdan &quot;asetukset&quot; aktivoimiseksi. T\u00e4m\u00e4 on t\u00e4h\u00e4n asti ollut yleinen prosessi esimerkiksi valikkokohteen saattamiseksi n\u00e4ytt\u00e4m\u00e4\u00e4n painikkeelta tai kytkimelt\u00e4. pudotusvalikon eri mallien v\u00e4lill\u00e4. Usein yhdistettyn\u00e4 mukautetun valikon k\u00e4velij\u00e4n kanssa.<\/p>\n<p>Muista, ett\u00e4 t\u00e4m\u00e4n koodin toimiminen edellytt\u00e4\u00e4 WordPressin v\u00e4hint\u00e4\u00e4n versiota 5.4.0.<\/p>\n<h2>Mit\u00e4 teemme t\u00e4ss\u00e4 opetusohjelmassa<\/h2>\n<p>Uudella koukulla valikon kohtiin ja WordPressin tuella metatietojen lis\u00e4\u00e4miselle valikkokohtiin ei todellakaan ole rajaa sille, millaisia \u200b\u200basetuksia haluat. Prosessi riippuu siit\u00e4, mik\u00e4 on lopputulos. Useimmissa tapauksissa mukautetun CSS-luokan lis\u00e4\u00e4minen valikon kohtaan riitt\u00e4\u00e4.<\/p>\n<p>Yksinkertaisuuden vuoksi lis\u00e4\u00e4mme t\u00e4h\u00e4n viestiin &quot;N\u00e4yt\u00e4 painikkeena&quot; -valintaruudun. Teemassamme on CSS, joka muotoilee valikon kohdan n\u00e4ytt\u00e4m\u00e4\u00e4n (toimintakehotus) -painikkeelta, jos kohteella on tietty luokka. Sen sijaan, ett\u00e4 pakottaisimme teemak\u00e4ytt\u00e4j\u00e4n kirjoittamaan CSS-luokan &quot;menu-item-button&quot; valikon kohdan CSS-luokkakentt\u00e4\u00e4n adminissa, tarjoamme h\u00e4nelle k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisen valintaruudun.<\/p>\n<p>T\u00e4m\u00e4n viestin lopusta l\u00f6yd\u00e4t ideoita muihin toimiin ja suodattimiin, joita voit k\u00e4ytt\u00e4\u00e4, jos haluat tehd\u00e4 enemm\u00e4n kuin vain lis\u00e4t\u00e4 CSS-luokan.<\/p>\n<p>Aloitetaan!<\/p>\n<h2>Mukautettujen kenttien lis\u00e4\u00e4minen valikon kohtiin<\/h2>\n<p>\u00c4skett\u00e4in lis\u00e4tty uusi koukku on <code>[wp_nav_menu_item_custom_fields](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_item_custom_fields\/)<\/code>. Se on koukku, joka laukeaa valikkokohdan siirtopainikkeiden yl\u00e4puolella;<\/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=\"Lis\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4lliset mukautetut meta-asetukset WordPressin valikkokohtiin\" ><\/a><\/p>\n<p>Koukulla on v\u00e4hint\u00e4\u00e4n viisi parametria. T\u00e4ss\u00e4 viestiss\u00e4 teemme asioita, jotka vaativat vain kaksi ensin.<\/p>\n<ul>\n<li><code>item_id<\/code>: Nykyisen valikon kohdan tunnus<\/li>\n<li><code>item<\/code>: Valikkokohdan tietoobjekti<\/li>\n<li><code>depth<\/code>: Valikkokohdan syvyys valikossa, ilmaistuna kokonaislukuna<\/li>\n<li><code>args<\/code>: Valikkokohdan argumenttien objekti<\/li>\n<li><code>nav_id<\/code>: Navigointivalikon tunnus<\/li>\n<\/ul>\n<p>Kaikilla t\u00e4h\u00e4n koukkuun lis\u00e4tyill\u00e4 sy\u00f6tteill\u00e4 on oltava <code>name<\/code>attribuutti (koska valikkoeditori on lomake). Nimi-attribuutti voidaan nimet\u00e4 haluamallasi tavalla, mutta sen on oltava yksil\u00f6llinen, ja sinun on lis\u00e4tt\u00e4v\u00e4 valikkokohdan tunnus (ensimm\u00e4inen parametri) hakasulkeisiin. Esim <code>name=\"my-custom-field[&lt;item ID&gt;]<\/code>&quot;. N\u00e4in muut vakiovalikon asetukset tekev\u00e4t sen.<\/p>\n<p>Aloitetaan esimerkill\u00e4 valintaruudun lis\u00e4\u00e4misest\u00e4, jotta valikon kohta n\u00e4ytt\u00e4\u00e4 painikkeelta, kun valikko asetetaan p\u00e4\u00e4valikkoon. Yhdist\u00e4mme <code>wp_nav_menu_item_custom_fields<\/code>vain kahteen ensimm\u00e4iseen parametriin ja toimimme seuraavasti:<\/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>Rivill\u00e4 <code>#2<\/code>noudetaan valikkokohtamme metan nykyinen arvo. Valikkokohdissa k\u00e4ytet\u00e4\u00e4n post metaa, joten k\u00e4yt\u00e4mme sit\u00e4, <code>[get_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/)()<\/code>jonka olet todenn\u00e4k\u00f6isesti jo tuttu. Tallennamme valikkokohdan metatiedot n\u00e4pp\u00e4imell\u00e4 &#8217; <code>_show-as-button<\/code>&#8217;.<\/p>\n<p>Sitten on kaikuttava hyv\u00e4 HTML-koodi. Yll\u00e4 oleva koodi k\u00e4ytt\u00e4\u00e4 joitain valikkokohdissa jo k\u00e4ytettyj\u00e4 luokkia, jotta se n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4 ilman mukautettua tyyli\u00e4 (<code>p<\/code>tunniste, jossa on luokkia &quot; <code>description description-wide<\/code>&quot;).<\/p>\n<p>T\u00e4rke\u00e4t osat tapahtuvat linjalla <code>#8<\/code>ja <code>#9<\/code>. Noudatamme name-attribuutin s\u00e4\u00e4nt\u00f6\u00e4 lis\u00e4\u00e4m\u00e4ll\u00e4 <code>$item_id<\/code>sulkuihin ja varmistamme, ett\u00e4 nykyinen tallennettu arvo n\u00e4kyy valintaruudussa. Voit lis\u00e4t\u00e4 t\u00e4h\u00e4n mink\u00e4 tahansa tyyppisi\u00e4 tuloja ja jopa useita tuloja. Muista vain antaa oikea <code>name<\/code>attribuutti ja asettaa niiden nykyinen arvo oikein.<\/p>\n<p>Kun t\u00e4m\u00e4 koodi on teemasi <code>functions.php<\/code>tai laajennuskoodissasi, sinun pit\u00e4isi nyt saada uusi valintaruutu kaikille valikon vaihtoehdoille:<\/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=\"Lis\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4lliset mukautetut meta-asetukset WordPressin valikkokohtiin\" ><\/a><\/p>\n<p>T\u00e4ll\u00e4 hetkell\u00e4 se ei pelasta alaamme. Se on seuraava askel.<\/p>\n<h2>Mukautettujen kenttien p\u00e4ivitt\u00e4minen<\/h2>\n<p>Mukautettujen kenttien p\u00e4ivitt\u00e4miseksi valikon kohtiin k\u00e4yt\u00e4mme koukkua <code>[wp_update_nav_menu_item](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_update_nav_menu_item\/)<\/code>. Siin\u00e4 on kolme argumenttia, mutta tarvitsemme vain toisen, joka on valikkokohdan tunnus.<\/p>\n<p>Se, miten k\u00e4sittelet sy\u00f6tteiden arvon tallentamista, on sinun. Olen p\u00e4\u00e4tt\u00e4nyt tallentaa &#8217; <code>_show-as-button<\/code>&#8217; joko tosi tai ep\u00e4tosi. K\u00e4yt\u00e4 vain <code>[update_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/update_post_meta\/)()<\/code>ja\/tai <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>Yll\u00e4 olevasta koodista haen mukautetun kent\u00e4n arvon sen nimen perusteella <code>$_POST<\/code>taulukossa. Koska se on valintaruutu, sit\u00e4 joko ei ole <code>$_POST<\/code>taulukossa (valitsematon) tai se palautetaan muodossa &quot; <code>on<\/code>&quot;. P\u00e4ivit\u00e4n sitten metaavaimen &#8217; <code>_show-as-button<\/code>&#8217; joko tosi tai ep\u00e4tosi.<\/p>\n<p>Yll\u00e4 olevalla koodilla sinun pit\u00e4isi n\u00e4hd\u00e4, ett\u00e4 kentt\u00e4si p\u00e4ivittyy oikein, kun tallennat valikon.<\/p>\n<p>Seuraava askel on tehd\u00e4 jotain mukautetuille metatiedoillemme. Ja miten teet sen, riippuu siit\u00e4, mik\u00e4 on lopputulos. Mit\u00e4 tulee esimerkkiimme, meid\u00e4n tarvitsee vain lis\u00e4t\u00e4 mukautettu luokka valikkokohtaan.<\/p>\n<h2>P\u00e4ivit\u00e4 valikkokohta CSS-luokka<\/h2>\n<p>WordPress tarjoaa suodattimen valikkokohdan luokkiin: <code>[nav_menu_css_class](https:\/\/developer.wordpress.org\/reference\/hooks\/nav_menu_css_class\/)<\/code>. Meid\u00e4n tarvitsee vain lis\u00e4t\u00e4 mukautettu luokka taulukkoon t\u00e4ll\u00e4 suodattimella, jos mukautettu metamme on <code>true<\/code>. K\u00e4yt\u00e4mme <code>[get_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/)()<\/code>saadaksemme arvon &quot; <code>_show-as-button<\/code>&quot; ja jos se on totta, lis\u00e4\u00e4mme CSS-luokan &quot; <code>menu-item-button<\/code>&quot;:<\/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>Suodattimessa <code>nav_menu_css_class<\/code>on yhteens\u00e4 nelj\u00e4 argumenttia, mukaan lukien valikon argumentit ja valikkokohdan syvyys. Tarvittaessa voit saada n\u00e4m\u00e4 arvot vaikuttamaan luokkien nimiin. Esimerkiksi ei yleens\u00e4 ole j\u00e4rkev\u00e4\u00e4 muuttaa valikkokohtaa painikkeeksi, ellei se ole ylimm\u00e4ll\u00e4 tasolla (eik\u00e4 valikon pudotusvalikon sis\u00e4ll\u00e4).<\/p>\n<p>Yll\u00e4 olevalla koodilla sinun pit\u00e4isi nyt n\u00e4hd\u00e4, ett\u00e4 mik\u00e4 tahansa valikkokohta, joka on valinnut &quot;N\u00e4yt\u00e4 painikkeena&quot;, saa luokan &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=\"Lis\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4lliset mukautetut meta-asetukset WordPressin valikkokohtiin\" ><\/a><\/p>\n<p>Muista: Saatat kokea, ett\u00e4 <code>nav_menu_css_class<\/code>suodatinta ei k\u00e4ytet\u00e4, jos valikko k\u00e4ytt\u00e4\u00e4 mukautettua valikon k\u00e4velij\u00e4\u00e4, joka sis\u00e4lt\u00e4\u00e4 esimerkiksi menetelm\u00e4n <code>start_el()<\/code>. K\u00e4velijan on k\u00e4ytett\u00e4v\u00e4 <code>nav_menu_css_class<\/code>suodatinta valikkokohdan luokkiin (k\u00e4ytt\u00e4en <code>apply_filters()<\/code>), jotta yll\u00e4 oleva suodatin toimisi!<\/p>\n<h2>Muut valikkokohteen mukautettujen metakenttien k\u00e4ytt\u00f6tavat<\/h2>\n<p>Kuten mainittiin, mukautettujen kenttien k\u00e4ytt\u00f6prosessi riippuu lopputuloksesta. On vaikea tehd\u00e4 postausta, joka kattaa kaikki mahdollisuudet. Mutta t\u00e4m\u00e4n pit\u00e4isi ainakin antaa sinulle ideoita. Yll\u00e4 oleva esimerkki osoitti, kuinka mukautettu luokka yksinkertaisesti lis\u00e4t\u00e4\u00e4n valikon kohtaan.<\/p>\n<p>Muissa tapauksissa saatat haluta vied\u00e4 metatiedot eteenp\u00e4in valikossa. Useimmissa valikkok\u00e4velij\u00f6iden toiminnoissa p\u00e4\u00e4set k\u00e4siksi valikon kohdan ID:hen ja siten voit helposti hakea metatiedot.<\/p>\n<p>Vaihtoehto mukautetun valikon k\u00e4velij\u00e4n k\u00e4yt\u00f6lle voit k\u00e4ytt\u00e4\u00e4 suodatinta <code>[wp_setup_nav_menu_item](https:\/\/developer.wordpress.org\/reference\/functions\/wp_setup_nav_menu_item\/)<\/code>, jotta voit hallita valikon kohdeobjektia paremmin.<\/p>\n<p>Tai voit k\u00e4ytt\u00e4\u00e4 suodatinta <code>[wp_get_nav_menu_items](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_nav_menu_items\/)<\/code>esimerkiksi valikon kohteiden sulkemiseen pois, jos asetuksesi on rajoittaa valikkokohdan n\u00e4kyvyytt\u00e4.<\/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>Tuoreessa WordPress-p\u00e4ivityksess\u00e4 on nyt mahdollista ja melko yksinkertaista lis\u00e4t\u00e4 mukautettuja metakentti\u00e4 valikon kohtiin. T\u00e4ss\u00e4 postauksessa opimme kuinka!<\/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":[927,895,719,719,895,1110,834,843,803,803,834,927,843,864,864],"tags":[1166],"class_list":["post-233342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aiheita","category-koodi","category-kehittaejae","category-n-a","category-opas-aloittelijoille","category-opetusohjelmia","category-php-5","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233342"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233342\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223830"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}