Lisää käyttäjäystävälliset mukautetut meta-asetukset WordPressin valikkokohtiin

Viimeisin päivitys marras 10, 2022

Sisältö

Mukautettujen kenttien lisääminen valikon kohtiin

Muut valikkokohteen mukautettujen metakenttien käyttötavat

Tuoreessa WordPress-päivityksessä on nyt mahdollista ja melko yksinkertaista lisätä mukautettuja metakenttiä valikon kohtiin. Tässä viestissä opimme lisäämään mukautettuja asetuksiamme valikkokohtiin, päivittämään niiden asetuksia ja lopuksi kuinka otamme metatiedot käyttöön.

WordPress ilmoitti äskettäin tuesta mukautettujen kenttien lisäämiselle valikkokohtiin versiossa 5.4. Lisättiin kaksi uutta toimintoa, joiden avulla kehittäjät voivat lisätä mukautettuja kenttiä WordPress-valikon hallintasivulle ja Customizerin valikkoeditoriin. Tässä viestissä keskitymme yhteen niistä, WordPress-valikon järjestelmänvalvojasivulle.

Tämän muutoksen myötä ei enää tarvitse pakottaa teeman tai liitännäisen käyttäjiä muistamaan ja kirjoittamaan luokkien nimiä valikkokohdan "asetukset" aktivoimiseksi. Tämä on tähän asti ollut yleinen prosessi esimerkiksi valikkokohteen saattamiseksi näyttämään painikkeelta tai kytkimeltä. pudotusvalikon eri mallien välillä. Usein yhdistettynä mukautetun valikon kävelijän kanssa.

Muista, että tämän koodin toimiminen edellyttää WordPressin vähintään versiota 5.4.0.

Mitä teemme tässä opetusohjelmassa

Uudella koukulla valikon kohtiin ja WordPressin tuella metatietojen lisäämiselle valikkokohtiin ei todellakaan ole rajaa sille, millaisia asetuksia haluat. Prosessi riippuu siitä, mikä on lopputulos. Useimmissa tapauksissa mukautetun CSS-luokan lisääminen valikon kohtaan riittää.

Yksinkertaisuuden vuoksi lisäämme tähän viestiin "Näytä painikkeena" -valintaruudun. Teemassamme on CSS, joka muotoilee valikon kohdan näyttämään (toimintakehotus) -painikkeelta, jos kohteella on tietty luokka. Sen sijaan, että pakottaisimme teemakäyttäjän kirjoittamaan CSS-luokan "menu-item-button" valikon kohdan CSS-luokkakenttään adminissa, tarjoamme hänelle käyttäjäystävällisen valintaruudun.

Tämän viestin lopusta löydät ideoita muihin toimiin ja suodattimiin, joita voit käyttää, jos haluat tehdä enemmän kuin vain lisätä CSS-luokan.

Aloitetaan!

Mukautettujen kenttien lisääminen valikon kohtiin

Äskettäin lisätty uusi koukku on [wp_nav_menu_item_custom_fields](https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields/). Se on koukku, joka laukeaa valikkokohdan siirtopainikkeiden yläpuolella;

Koukulla on vähintään viisi parametria. Tässä viestissä teemme asioita, jotka vaativat vain kaksi ensin.

item_id: Nykyisen valikon kohdan tunnus
item: Valikkokohdan tietoobjekti
depth: Valikkokohdan syvyys valikossa, ilmaistuna kokonaislukuna
args: Valikkokohdan argumenttien objekti
nav_id: Navigointivalikon tunnus

Kaikilla tähän koukkuun lisätyillä syötteillä on oltava nameattribuutti (koska valikkoeditori on lomake). Nimi-attribuutti voidaan nimetä haluamallasi tavalla, mutta sen on oltava yksilöllinen, ja sinun on lisättävä valikkokohdan tunnus (ensimmäinen parametri) hakasulkeisiin. Esim name="my-custom-field[<item ID>]". Näin muut vakiovalikon asetukset tekevät sen.

Aloitetaan esimerkillä valintaruudun lisäämisestä, jotta valikon kohta näyttää painikkeelta, kun valikko asetetaan päävalikkoon. Yhdistämme wp_nav_menu_item_custom_fieldsvain kahteen ensimmäiseen parametriin ja toimimme seuraavasti:

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);

Rivillä #2noudetaan valikkokohtamme metan nykyinen arvo. Valikkokohdissa käytetään post metaa, joten käytämme sitä, [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()jonka olet todennäköisesti jo tuttu. Tallennamme valikkokohdan metatiedot näppäimellä ’ _show-as-button’.

Sitten on kaikuttava hyvä HTML-koodi. Yllä oleva koodi käyttää joitain valikkokohdissa jo käytettyjä luokkia, jotta se näyttää hyvältä ilman mukautettua tyyliä (ptunniste, jossa on luokkia " description description-wide").

Tärkeät osat tapahtuvat linjalla #8ja #9. Noudatamme name-attribuutin sääntöä lisäämällä $item_idsulkuihin ja varmistamme, että nykyinen tallennettu arvo näkyy valintaruudussa. Voit lisätä tähän minkä tahansa tyyppisiä tuloja ja jopa useita tuloja. Muista vain antaa oikea nameattribuutti ja asettaa niiden nykyinen arvo oikein.

Kun tämä koodi on teemasi functions.phptai laajennuskoodissasi, sinun pitäisi nyt saada uusi valintaruutu kaikille valikon vaihtoehdoille:

Tällä hetkellä se ei pelasta alaamme. Se on seuraava askel.

Mukautettujen kenttien päivittäminen

Mukautettujen kenttien päivittämiseksi valikon kohtiin käytämme koukkua [wp_update_nav_menu_item](https://developer.wordpress.org/reference/hooks/wp_update_nav_menu_item/). Siinä on kolme argumenttia, mutta tarvitsemme vain toisen, joka on valikkokohdan tunnus.

Se, miten käsittelet syötteiden arvon tallentamista, on sinun. Olen päättänyt tallentaa ’ _show-as-button’ joko tosi tai epätosi. Käytä vain [update_post_meta](https://developer.wordpress.org/reference/functions/update_post_meta/)()ja/tai [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);

Yllä olevasta koodista haen mukautetun kentän arvon sen nimen perusteella $_POSTtaulukossa. Koska se on valintaruutu, sitä joko ei ole $_POSTtaulukossa (valitsematon) tai se palautetaan muodossa " on". Päivitän sitten metaavaimen ’ _show-as-button’ joko tosi tai epätosi.

Yllä olevalla koodilla sinun pitäisi nähdä, että kenttäsi päivittyy oikein, kun tallennat valikon.

Seuraava askel on tehdä jotain mukautetuille metatiedoillemme. Ja miten teet sen, riippuu siitä, mikä on lopputulos. Mitä tulee esimerkkiimme, meidän tarvitsee vain lisätä mukautettu luokka valikkokohtaan.

Päivitä valikkokohta CSS-luokka

WordPress tarjoaa suodattimen valikkokohdan luokkiin: [nav_menu_css_class](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/). Meidän tarvitsee vain lisätä mukautettu luokka taulukkoon tällä suodattimella, jos mukautettu metamme on true. Käytämme [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()saadaksemme arvon " _show-as-button" ja jos se on totta, lisäämme CSS-luokan " 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);

Suodattimessa nav_menu_css_classon yhteensä neljä argumenttia, mukaan lukien valikon argumentit ja valikkokohdan syvyys. Tarvittaessa voit saada nämä arvot vaikuttamaan luokkien nimiin. Esimerkiksi ei yleensä ole järkevää muuttaa valikkokohtaa painikkeeksi, ellei se ole ylimmällä tasolla (eikä valikon pudotusvalikon sisällä).

Yllä olevalla koodilla sinun pitäisi nyt nähdä, että mikä tahansa valikkokohta, joka on valinnut "Näytä painikkeena", saa luokan " menu-item-button".

Muista: Saatat kokea, että nav_menu_css_classsuodatinta ei käytetä, jos valikko käyttää mukautettua valikon kävelijää, joka sisältää esimerkiksi menetelmän start_el(). Kävelijan on käytettävä nav_menu_css_classsuodatinta valikkokohdan luokkiin (käyttäen apply_filters()), jotta yllä oleva suodatin toimisi!

Muut valikkokohteen mukautettujen metakenttien käyttötavat

Kuten mainittiin, mukautettujen kenttien käyttöprosessi riippuu lopputuloksesta. On vaikea tehdä postausta, joka kattaa kaikki mahdollisuudet. Mutta tämän pitäisi ainakin antaa sinulle ideoita. Yllä oleva esimerkki osoitti, kuinka mukautettu luokka yksinkertaisesti lisätään valikon kohtaan.

Muissa tapauksissa saatat haluta viedä metatiedot eteenpäin valikossa. Useimmissa valikkokävelijöiden toiminnoissa pääset käsiksi valikon kohdan ID:hen ja siten voit helposti hakea metatiedot.

Vaihtoehto mukautetun valikon kävelijän käytölle voit käyttää suodatinta [wp_setup_nav_menu_item](https://developer.wordpress.org/reference/functions/wp_setup_nav_menu_item/), jotta voit hallita valikon kohdeobjektia paremmin.

Tai voit käyttää suodatinta [wp_get_nav_menu_items](https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/)esimerkiksi valikon kohteiden sulkemiseen pois, jos asetuksesi on rajoittaa valikkokohdan näkyvyyttä.

: awhitepixel.com