Lägg till användarvänliga anpassade metainställningar till WordPress-menyalternativ

Senaste uppdateringen nov 10, 2022

Innehåll

Lägga till anpassade fält till menyalternativ

Annan användning av menyobjektets anpassade metafält

I en ny WordPress-uppdatering är det nu möjligt och ganska enkelt att lägga till anpassade metafält till menyalternativ. I det här inlägget kommer vi att lära oss hur du lägger till våra anpassade inställningar till menyalternativ, uppdaterar deras inställningar och slutligen hur du tar metadata i bruk.

Nyligen meddelade WordPress stöd för att lägga till anpassade fält till menyalternativ i version 5.4. Två nya åtgärder lades till som gör det möjligt för utvecklare att lägga till anpassade fält i WordPress-menyadministratörssidan och i Customizers menyredigerare. I det här inlägget kommer vi att fokusera på en av dem, den för WordPress-menyadministratörssidan.

Med den här ändringen finns det inte längre behov av att tvinga tema- eller plugin-användare att komma ihåg och skriva ut klassnamn för att aktivera menyalternativet "inställningar". Detta har hittills varit en vanlig process för saker som att få en menypost att se ut som en knapp eller byta mellan olika utformningar av dropdown. Ofta i kombination av en anpassad menyrullator.

Tänk på att för att den här koden ska fungera krävs minst version 5.4.0 av WordPress.

Vad vi ska göra i den här handledningen

Med den nya krok till menyalternativ och WordPress stöd för att lägga till metadata till menyalternativ finns det egentligen ingen gräns för vilken typ av inställningar du vill ha. Processen beror på vad ditt slutresultat är. I de flesta fall räcker det att lägga till en anpassad CSS-klass till menyalternativet.

För att göra det enkelt kommer vi i det här inlägget att lägga till en kryssruta märkt "Visa som knapp". I vårt tema har vi CSS som kommer att utforma ett menyobjekt så att det ser ut som en (uppmaning) knapp om objektet har en viss klass. Istället för att tvinga temaanvändaren att skriva ut CSS-klassen "meny-objekt-knapp" i menyobjektets CSS-klassfält i admin, erbjuder vi dem en användarvänlig kryssruta.

I slutet av det här inlägget hittar du några idéer till andra åtgärder och filter att använda om du vill göra mer än att bara lägga till en CSS-klass.

Låt oss börja!

Lägga till anpassade fält till menyalternativ

Den nya kroken som nyligen lagts till är [wp_nav_menu_item_custom_fields](https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields/). Det är en krok som avfyras precis ovanför ett menyobjekts flyttknappar;

Kroken kommer med inte mindre än fem parametrar. I det här inlägget kommer vi att göra saker som bara kräver de två först.

item_id: Aktuellt menyalternativ ID
item: Menyalternativ dataobjekt
depth: Djupet av menyalternativet i menyn, betecknat som ett heltal
args: Ett objekt med menyalternativsargument
nav_id: Navigeringsmenyns ID

Alla ingångar som läggs till i denna krok måste ha ett nameattribut (eftersom menyredigeraren är en form). Namnattributet kan heta vad du vill men det måste vara unikt, och du måste lägga till menyalternativets ID (första parametern) inom parentes. T.ex. name="my-custom-field[<item ID>]". Så här gör de andra standardinställningarna för menyalternativ.

Låt oss börja med ett exempel på att lägga till en kryssruta för att få menyalternativet att se ut som en knapp när menyn placeras som huvudmeny. Vi kopplar in wp_nav_menu_item_custom_fieldsmed bara de två första parametrarna och gör följande:

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

På raden #2hämtar vi det aktuella värdet på vår menypost meta. Menyalternativ använder post meta så vi använder [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()som du förmodligen redan är bekant med. Vi lagrar menyalternativets metadata med knappen ’ _show-as-button’.

Sedan gäller det att eka fram lite bra HTML. Koden ovan använder några av klasserna som redan används för menyalternativ för att få det att se snyggt ut utan att lägga till anpassad stil (en ptagg med klasserna " description description-wide").

De viktiga delarna händer vid linje #8och #9. Vi följer regeln för namnattributet, lägger till $item_idinom parentes, och vi ser till att det aktuella sparade värdet återspeglas i kryssrutan. Du kan lägga till alla typer av ingångar, och till och med flera ingångar här. Kom bara ihåg att ange lämpligt nameattribut och ställa in deras aktuella värde korrekt.

Med den här koden i ditt tema functions.phpeller plugin-kod bör du nu få en ny kryssruta för alla menyalternativ:

För närvarande räddar det inte vårt område. Det är nästa steg.

Uppdaterar de anpassade fälten

För att uppdatera anpassade fält till menyalternativ använder vi kroken [wp_update_nav_menu_item](https://developer.wordpress.org/reference/hooks/wp_update_nav_menu_item/). Det kommer med tre argument men vi behöver bara det andra som är menyalternativets ID.

Hur du hanterar att spara värdet på dina input(s) är upp till dig. Jag har valt att helt enkelt spara ’ _show-as-button’ som antingen sant eller falskt. Använd helt enkelt [update_post_meta](https://developer.wordpress.org/reference/functions/update_post_meta/)()och/eller [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);

I koden ovan hämtar jag värdet på det anpassade fältet efter dess namn i $_POSTarrayen. Eftersom det är en kryssruta kommer den antingen inte att finnas i $_POSTarrayen (omarkerad) eller så kommer den att returneras som ’ on’. Jag uppdaterar sedan meta-nyckeln ’ _show-as-button’ som antingen sant eller falskt.

Med ovanstående kod bör du se att ditt fält uppdateras korrekt när du sparar menyn.

Nästa steg är att göra något åt vår anpassade metadata. Och hur du går tillväga beror på vad ditt slutresultat är. När det gäller vårt exempel är allt vi behöver göra att lägga till en anpassad klass till menyalternativet.

Uppdatera menyalternativ CSS-klass

WordPress erbjuder ett filter på menyobjektets klasser: [nav_menu_css_class](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/). Allt vi behöver göra är att lägga till en anpassad klass till arrayen med detta filter om vår anpassade meta är true. Vi använder [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()för att få värdet av ’ _show-as-button’ och om det är sant lägger vi till CSS-klassen ’ 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);

Filtret nav_menu_css_classkommer med totalt fyra argument inklusive menyargumenten och menyalternativets djup. Om det behövs kan du få klassnamnen att påverkas av dessa värden. Till exempel skulle det vanligtvis inte vara meningsfullt att omvandla ett menyobjekt till en knapp såvida det inte är på översta nivån (och inte i en meny-rullgardinsmeny).

Med ovanstående kod bör du nu se att alla menyalternativ som har markerat "Visa som knapp" kommer att få klassen ’ menu-item-button’.

Tänk på: Du kan uppleva att nav_menu_css_classfiltret inte tillämpas om menyn använder en anpassad menyrullator som till exempel innehåller metoden start_el(). Walkern måste applicera nav_menu_css_classfiltret på menyobjektets klasser (med apply_filters()) för att ovanstående filter ska fungera!

Annan användning av menyobjektets anpassade metafält

Som nämnts beror processen för att använda de anpassade fälten på slutresultatet. Det är svårt att göra ett inlägg som täcker alla möjligheter. Men det här borde åtminstone ge dig några idéer. Exemplet ovan visade hur man helt enkelt lägger till en anpassad klass till menyalternativet.

I andra fall kanske du vill ta förhand av metadata i en meny walker. I de flesta funktioner i en meny walker har du tillgång till menypunkts-ID och därmed kan du enkelt hämta metadata.

Som ett alternativ till att använda en anpassad menyrullator kan du använda filtret [wp_setup_nav_menu_item](https://developer.wordpress.org/reference/functions/wp_setup_nav_menu_item/)för mer kontroll över menyobjektet.

Eller så kan du använda filtret [wp_get_nav_menu_items](https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/)för att till exempel utesluta menyalternativ, om din inställning är att begränsa menyalternativets synlighet.

Inspelningskälla: awhitepixel.com