Med den h\u00e4r \u00e4ndringen finns det inte l\u00e4ngre behov av att tvinga tema- eller plugin-anv\u00e4ndare att komma ih\u00e5g och skriva ut klassnamn f\u00f6r att aktivera menyalternativet "inst\u00e4llningar". Detta har hittills varit en vanlig process f\u00f6r saker som att f\u00e5 en menypost att se ut som en knapp eller byta mellan olika utformningar av dropdown. Ofta i kombination av en anpassad menyrullator.<\/p>\n
T\u00e4nk p\u00e5 att f\u00f6r att den h\u00e4r koden ska fungera kr\u00e4vs minst version 5.4.0 av WordPress.<\/p>\n
Vad vi ska g\u00f6ra i den h\u00e4r handledningen<\/h2>\n
Med den nya krok till menyalternativ och WordPress st\u00f6d f\u00f6r att l\u00e4gga till metadata till menyalternativ finns det egentligen ingen gr\u00e4ns f\u00f6r vilken typ av inst\u00e4llningar du vill ha. Processen beror p\u00e5 vad ditt slutresultat \u00e4r. I de flesta fall r\u00e4cker det att l\u00e4gga till en anpassad CSS-klass till menyalternativet.<\/p>\n
F\u00f6r att g\u00f6ra det enkelt kommer vi i det h\u00e4r inl\u00e4gget att l\u00e4gga till en kryssruta m\u00e4rkt "Visa som knapp". I v\u00e5rt tema har vi CSS som kommer att utforma ett menyobjekt s\u00e5 att det ser ut som en (uppmaning) knapp om objektet har en viss klass. Ist\u00e4llet f\u00f6r att tvinga temaanv\u00e4ndaren att skriva ut CSS-klassen "meny-objekt-knapp" i menyobjektets CSS-klassf\u00e4lt i admin, erbjuder vi dem en anv\u00e4ndarv\u00e4nlig kryssruta.<\/p>\n
I slutet av det h\u00e4r inl\u00e4gget hittar du n\u00e5gra id\u00e9er till andra \u00e5tg\u00e4rder och filter att anv\u00e4nda om du vill g\u00f6ra mer \u00e4n att bara l\u00e4gga till en CSS-klass.<\/p>\n
L\u00e5t oss b\u00f6rja!<\/p>\n
L\u00e4gga till anpassade f\u00e4lt till menyalternativ<\/h2>\n
Den nya kroken som nyligen lagts till \u00e4r Kroken kommer med inte mindre \u00e4n fem parametrar. I det h\u00e4r inl\u00e4gget kommer vi att g\u00f6ra saker som bara kr\u00e4ver de tv\u00e5 f\u00f6rst.<\/p>\n Alla ing\u00e5ngar som l\u00e4ggs till i denna krok m\u00e5ste ha ett L\u00e5t oss b\u00f6rja med ett exempel p\u00e5 att l\u00e4gga till en kryssruta f\u00f6r att f\u00e5 menyalternativet att se ut som en knapp n\u00e4r menyn placeras som huvudmeny. Vi kopplar in P\u00e5 raden Sedan g\u00e4ller det att eka fram lite bra HTML. Koden ovan anv\u00e4nder n\u00e5gra av klasserna som redan anv\u00e4nds f\u00f6r menyalternativ f\u00f6r att f\u00e5 det att se snyggt ut utan att l\u00e4gga till anpassad stil (en De viktiga delarna h\u00e4nder vid linje [wp_nav_menu_item_custom_fields](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_item_custom_fields\/)<\/code>. Det \u00e4r en krok som avfyras precis ovanf\u00f6r ett menyobjekts flyttknappar;<\/p>\n![\"L\u00e4gg](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e51560662d6.png\")
<\/a><\/p>\n\n
item_id<\/code>: Aktuellt menyalternativ ID<\/li>\nitem<\/code>: Menyalternativ dataobjekt<\/li>\ndepth<\/code>: Djupet av menyalternativet i menyn, betecknat som ett heltal<\/li>\nargs<\/code>: Ett objekt med menyalternativsargument<\/li>\nnav_id<\/code>: Navigeringsmenyns ID<\/li>\n<\/ul>\nname<\/code>attribut (eftersom menyredigeraren \u00e4r en form). Namnattributet kan heta vad du vill men det m\u00e5ste vara unikt, och du m\u00e5ste l\u00e4gga till menyalternativets ID (f\u00f6rsta parametern) inom parentes. T.ex. name=\"my-custom-field[<item ID>]<\/code>". S\u00e5 h\u00e4r g\u00f6r de andra standardinst\u00e4llningarna f\u00f6r menyalternativ.<\/p>\nwp_nav_menu_item_custom_fields<\/code>med bara de tv\u00e5 f\u00f6rsta parametrarna och g\u00f6r f\u00f6ljande:<\/p>\nadd_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 ?>\n <p class=\"awp-show-as-button description description-wide\">\n <label for=\"awp-menu-item-button-<?php echo $item_id; ?>\" >\n <input type=\"checkbox\" \n id=\"awp-menu-item-button-<?php echo $item_id; ?>\" \n name=\"awp-menu-item-button[<?php echo $item_id; ?>]\" \n <?php checked($show_as_button, true); ?> \n \/><?php _e('Show as a button', 'awp'); ?>\n <\/label>\n <\/p>\n <?php\n}, 10, 2);<\/code><\/pre>\n#2<\/code>h\u00e4mtar vi det aktuella v\u00e4rdet p\u00e5 v\u00e5r menypost meta. Menyalternativ anv\u00e4nder post meta s\u00e5 vi anv\u00e4nder [get_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/)()<\/code>som du f\u00f6rmodligen redan \u00e4r bekant med. Vi lagrar menyalternativets metadata med knappen ’ _show-as-button<\/code>’.<\/p>\np<\/code>tagg med klasserna " description description-wide<\/code>").<\/p>\n#8<\/code>och #9<\/code>. Vi f\u00f6ljer regeln f\u00f6r namnattributet, l\u00e4gger till $item_id<\/code>inom parentes, och vi ser till att det aktuella sparade v\u00e4rdet \u00e5terspeglas i kryssrutan. Du kan l\u00e4gga till alla typer av ing\u00e5ngar, och till och med flera ing\u00e5ngar h\u00e4r. Kom bara ih\u00e5g att ange l\u00e4mpligt name<\/code>attribut och st\u00e4lla in deras aktuella v\u00e4rde korrekt.<\/p>\n
![\"L\u00e4gg](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e5156147558.png\")
<\/a><\/p>\n![\"L\u00e4gg](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e515621cd00.png\")
<\/a><\/p>\n