Lisage WordPressi menüüüksustele kasutajasõbralikud kohandatud metaseaded
Hiljutises WordPressi värskenduses on nüüd võimalik ja üsna lihtne lisada menüüüksustele kohandatud metavälju. Sellest postitusest õpime, kuidas lisada menüüüksustele kohandatud sätteid, värskendada nende sätteid ja lõpuks metaandmeid kasutusele võtta.
Hiljuti teatas WordPress, et toetab versiooni 5.4 menüüüksustele kohandatud väljade lisamist . Lisati kaks uut toimingut, mis võimaldavad arendajatel lisada kohandatud välju WordPressi menüü administraatori lehel ja kohandaja menüüredaktoris. Selles postituses keskendume ühele neist, WordPressi menüü administraatori lehe omale.
Selle muudatusega ei ole enam vaja sundida teemade või pistikprogrammide kasutajaid meelde jätma ja klassinimesid välja tippima, et aktiveerida menüüüksus "seaded". See on siiani olnud tavaline protsess näiteks menüüüksuse nupu või lüliti moodi muutmiseks. erineva kujundusega rippmenüü vahel. Sageli kombineerituna kohandatud menüükäijaga.
Pidage meeles, et selle koodi toimimiseks on vaja WordPressi minimaalset versiooni 5.4.0.
Mida me selles õpetuses teeme
Tänu uuele konksule menüüüksustele ja WordPressi toele metaandmete lisamiseks menüüüksustele ei ole soovitud seadete osas tegelikult piiranguid. Protsess sõltub sellest, milline on teie lõpptulemus. Enamikul juhtudel piisab kohandatud CSS-klassi lisamisest menüüelemendile.
Lihtsuse huvides lisame sellesse postitusse märkeruudu "Kuva nupuna". Meie teemas on CSS, mis muudab menüüelemendi stiiliks (kutse tegevusele) nupuks, kui üksusel on teatud klass. Selle asemel, et sundida teemakasutajat sisestama CSS-klassi “menu-item-button" menüüelemendi CSS-klassi väljale administraatoris, pakume talle kasutajasõbralikku märkeruutu.
Selle postituse lõpust leiate ideid muude toimingute ja filtrite kohta, mida kasutada, kui soovite teha enamat kui lihtsalt CSS-klassi lisamine.
Alustame!
Hiljuti lisatud uus konks on [wp_nav_menu_item_custom_fields](https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields/). See on konks, mis vallandub otse menüüelemendi liigutusnuppude kohal;
Konksul on vähemalt viis parameetrit. Selles postituses teeme asju, mis nõuavad ainult kahte.
item_id: praeguse menüüüksuse IDitem: Menüüüksuse andmeobjektdepth: menüüelemendi sügavus menüüs, tähistatuna täisarvunaargs: menüüüksuse argumentide objektnav_id: navigeerimismenüü ID
Kõigil sellesse konksu lisatud sisenditel peab olema nameatribuut (kuna menüüredaktor on vorm). Nimeatribuudile võib anda soovitud nime, kuid see peab olema kordumatu ja sulgudes tuleb lisada menüüüksuse ID (esimene parameeter). Nt name="my-custom-field[<item ID>]". Nii teevad seda ka teised standardsed menüükäsud.
Alustame näitega märkeruudu lisamisest, et muuta menüüelement nupuna, kui menüü on asetatud peamenüüks. Kasutame wp_nav_menu_item_custom_fieldsainult kahte esimest parameetrit ja teeme järgmist.
add_action('wp_nav_menu_item_custom_fields', function($item_id, $item) {
$show_as_button = get_post_meta($item_id, '_show-as-button', true);
?>
<p class="awp-show-as-button description description-wide">
<label for="awp-menu-item-button-<?php echo $item_id; ?>" >
<input type="checkbox"
id="awp-menu-item-button-<?php echo $item_id; ?>"
name="awp-menu-item-button[<?php echo $item_id; ?>]"
<?php checked($show_as_button, true); ?>
/><?php _e('Show as a button', 'awp'); ?>
</label>
</p>
<?php
}, 10, 2);Real #2toome meie menüüelemendi meta praeguse väärtuse. Menüü elemendid kasutavad post metat, seega kasutame seda, [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()millega olete ilmselt juba tuttav. Menüüüksuse metaandmed salvestame klahvi ‘ _show-as-button‘ abil.
Siis on vaja mõnda head HTML-i välja tuua. Ülaltoodud kood kasutab mõnda klassi, mida juba menüüelementide jaoks on kasutatud, et see näeks kena välja ilma kohandatud stiili lisamata (psilt klassidega " description description-wide").
Olulised osad toimuvad joonel #8ja #9. Järgime atribuudi name reeglit, lisades $item_idsulgudesse, ja veendume, et praegune salvestatud väärtus kajastub märkeruudus. Siin saate lisada mis tahes tüüpi sisendeid ja isegi mitut sisendit. Ärge unustage sisestada sobiv nameatribuut ja määrata nende praegune väärtus õigesti.
Kui see kood on teie teema functions.phpvõi pistikprogrammi koodis, peaksite nüüd saama kõigi menüüüksuste jaoks uue märkeruudu:
Praegu see meie põldu ei päästa. See on järgmine samm.
Kohandatud väljade värskendamine
Menüüüksuste kohandatud väljade värskendamiseks kasutame konksu [wp_update_nav_menu_item](https://developer.wordpress.org/reference/hooks/wp_update_nav_menu_item/). Sellel on kolm argumenti, kuid vajame ainult teist, mis on menüüüksuse ID.
See, kuidas te oma sisendi(te) väärtuse salvestamisega tegelete, on teie otsustada. Olen valinud, et salvestada " _show-as-button" tõeseks või valeks. Lihtsalt kasutage [update_post_meta](https://developer.wordpress.org/reference/functions/update_post_meta/)()ja/või [delete_post_meta](https://developer.wordpress.org/reference/functions/delete_post_meta/)().
add_action('wp_update_nav_menu_item', function($menu_id, $menu_item_db_id) {
$button_value = (isset($_POST['awp-menu-item-button'][$menu_item_db_id]) && $_POST['awp-menu-item-button'][$menu_item_db_id] == 'on')? true: false;
update_post_meta($menu_item_db_id, '_show-as-button', $button_value);
}, 10, 2);Ülaltoodud koodist toon kohandatud välja väärtuse selle $_POSTmassiivi nime järgi. Kuna see on märkeruut, siis seda kas $_POSTmassiivis ei eksisteeri (märkimata) või tagastatakse see kui " on". Seejärel värskendan metavõtit " _show-as-button" tõeseks või vääraks.
Ülaltoodud koodiga peaksite menüü salvestamisel nägema, et teie väli värskendatakse õigesti.
Järgmine samm on teha midagi meie kohandatud metaandmetega. Ja kuidas te seda teete, sõltub sellest, milline on teie lõpptulemus. Meie näite puhul peame vaid lisama menüüelemendile kohandatud klassi.
WordPress pakub menüüelemendi klassidele filtrit: [nav_menu_css_class](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/). Peame vaid selle filtri abil massiivile kohandatud klassi lisama, kui meie kohandatud meta on true. Kasutame [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()„ ” väärtuse saamiseks _show-as-buttonja kui see on tõsi, lisame CSS-klassi „ menu-item-button“:
add_filter('nav_menu_css_class', function($classes, $menu_item) {
$show_as_button = get_post_meta($menu_item->ID, '_show-as-button', true);
if ($show_as_button) {
$classes[] = 'menu-item-button';
}
return $classes;
}, 10, 2);Filtril nav_menu_css_classon kokku neli argumenti, sealhulgas menüüargumendid ja menüüelemendi sügavus. Vajadusel saate nende väärtustega mõjutada klasside nimesid. Näiteks pole tavaliselt mõtet muuta menüüüksust nupuks, välja arvatud juhul, kui see asub ülemisel tasemel (ja mitte menüü rippmenüüs).
Ülaltoodud koodiga peaksite nüüd nägema, et iga menüüelement, mis on märkinud "Näita nupuna", saab klassi " menu-item-button".
nav_menu_css_classPidage meeles. Kui menüü kasutab kohandatud menüükäijat, mis sisaldab näiteks meetodit, võite kogeda, et filtrit ei rakendata start_el(). Kõndija peab rakendama nav_menu_css_classfiltri menüüelemendi klassidele (kasutades apply_filters()), et ülaltoodud filter töötaks!
Menüüüksuse kohandatud metaväljade muud kasutusviisid
Nagu mainitud, sõltub kohandatud väljade kasutamise protsess lõpptulemusest. Kõiki võimalusi hõlmavat postitust on raske teha. Kuid see peaks teile vähemalt ideid andma. Ülaltoodud näide näitas, kuidas lihtsalt kohandatud klass menüüelemendile lisada.
Muudel juhtudel võite soovida metaandmeid menüükäijal edasi kasutada. Enamiku menüükäija funktsioonide puhul on teil juurdepääs menüüüksuse ID-le ja seega saate hõlpsasti metaandmeid tuua.
Alternatiivina kohandatud menüükäija kasutamisele saate menüüüksuse [wp_setup_nav_menu_item](https://developer.wordpress.org/reference/functions/wp_setup_nav_menu_item/)objekti paremaks juhtimiseks kasutada filtrit.
Või võite kasutada filtrit [wp_get_nav_menu_items](https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/)näiteks menüüelementide välistamiseks, kui teie seade on menüüelemendi nähtavust piirata.