[wp_list_pages](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_pages\/)()<\/code>och [wp_list_categories](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_categories\/)()<\/code>. De ut\u00f6kar alla en allm\u00e4n Walker<\/code>klass. Vi kommer att ut\u00f6ka den Walker_Nav_Menu<\/code>som anv\u00e4nds f\u00f6r menyer i WordPress.<\/p>\nEftersom vi ut\u00f6kar ytterligare en klass beh\u00f6ver vi bara l\u00e4gga till de funktioner vi vill \u00e5sidos\u00e4tta. Om en funktion inte finns i v\u00e5r klass kommer WordPress att k\u00f6ra funktionen f\u00f6r\u00e4ldraklass (klassen vi ut\u00f6kar) ist\u00e4llet.<\/p>\n
F\u00f6rberedelse<\/h2>\n
Du kan l\u00e4gga till din walker-klass i dina plugin-filer, teman function.php<\/code>eller n\u00e5gon PHP-fil som ing\u00e5r functions.php<\/code>i (f\u00f6r renare kod). Du b\u00f6rjar med att definiera din klass med ett namn som du v\u00e4ljer (se till att klassnamnet \u00e4r unikt, och detta inkluderar m\u00f6jliga klassnamn i WordPress-k\u00e4rnan!) som ut\u00f6kar Walker_Nav_Menu<\/code>:<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n}<\/code><\/pre>\nF\u00f6r att s\u00e4ga \u00e5t WordPress att anv\u00e4nda v\u00e5r rollator definierar vi detta i v\u00e5ra [wp_nav_menu](https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/)()<\/code>samtal. Denna funktion \u00e4r ansvarig f\u00f6r att mata ut en meny och du har f\u00f6rmodligen minst en i ditt tema f\u00f6r huvudmenyn.<\/p>\nI argumentarrayen wp_nav_menu()<\/code>l\u00e4gger du till ett nytt element med nyckeln "walker" och skapar en ny instans av din walker-klass s\u00e5 h\u00e4r:<\/p>\nwp_nav_menu([\n 'theme_location' => 'primary',\n 'menu_class' => 'main-menu',\n 'container' => 'nav',\n 'container_class' => 'header__main-nav',\n 'walker' => new AWP_Menu_Walker()\n]);<\/code><\/pre>\nOm du uppdaterar din webbplats b\u00f6r du inte se n\u00e5gon f\u00f6r\u00e4ndring. Detta beror p\u00e5 att v\u00e5r klass inte \u00e5sidos\u00e4tter n\u00e5gon av f\u00f6r\u00e4lderns funktioner, och d\u00e4rf\u00f6r k\u00f6r WordPress helt enkelt de vanliga menyrullatorfunktionerna n\u00e4r menyn matas ut, precis som innan vi sa \u00e5t den att anv\u00e4nda v\u00e5r rullator.<\/p>\n
\u00d6versikt \u00f6ver funktioner vi kan \u00e5sidos\u00e4tta iWalker_Nav_Menu<\/code><\/h2>\nF\u00f6ljande \u00e4r funktioner du kan l\u00e4gga till i din anpassade rollatorklass f\u00f6r att \u00e5sidos\u00e4tta funktionerna f\u00f6r f\u00f6r\u00e4ldraklass Walker_Nav_Menu<\/code>:<\/p>\nDe f\u00f6rsta fyra \u00e4r funktioner som helt enkelt \u00e4r ansvariga f\u00f6r utmatning, och de kr\u00e4ver alla att du l\u00e4gger till en str\u00e4ng \u2013 den f\u00f6rsta parametervariabeln. Det \u00e4r viktigt att veta att du inte g\u00f6r echo<\/code>n\u00e5gonting h\u00e4r ute, allt ska byggas upp som ett sn\u00f6re.<\/p>\nstart_lvl<\/h3>\n
Funktionen start_lvl<\/code>ansvarar f\u00f6r att mata ut HTML-koden f\u00f6r starten av en ny niv\u00e5. Kort sagt b\u00f6r det mata ut start <ul><\/code>.<\/p>\nfunction start_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nDen f\u00f6rsta parametern, $output<\/code>\u2013 skickad genom referens, \u00e4r str\u00e4ngen du ska l\u00e4gga till din utdata till. $depth<\/code>\u00e4r ett heltal som signalerar vilken niv\u00e5 du befinner dig p\u00e5; 0 f\u00f6r toppniv\u00e5, 1 f\u00f6r direkt underordnad av toppniv\u00e5, och s\u00e5 vidare. $args<\/code>\u00e4r ett objekt f\u00f6r alla argument som tillhandah\u00e5lls i wp_nav_menu()<\/code>.<\/p>\nend_lvl<\/h3>\n
Funktionen end_lvl<\/code>ansvarar f\u00f6r att mata ut HTML-koden f\u00f6r slutet av en niv\u00e5. Detta \u00e4r vanligtvis bara avslutningen <\/ul><\/code>.<\/p>\nfunction end_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nParametrarna \u00e4r exakt samma som start_lvl<\/code>ovan.<\/p>\nstart_el<\/h3>\n
Denna funktion \u00e4r ansvarig f\u00f6r att mata ut varje elements HTML. Kort sagt b\u00f6r det mata ut start <li><\/code>och <a><\/code>taggen med l\u00e4nktiteln inuti.<\/p>\nfunction start_el(&$output, $item, $depth=0, $args=null, $id=0) { }<\/code><\/pre>\nDet f\u00f6rsta argumentet, $output<\/code>, \u00e4r som vanligt str\u00e4ngen du ska l\u00e4gga till utdata till. Det andra argumentet, $item<\/code>, \u00e4r menyobjektet \u2013 och det \u00e4r h\u00e4r du kommer att h\u00e4mta de flesta data f\u00f6r att mata ut menyalternativet. Om menyl\u00e4nken \u00e4r ett postmenyobjekt f\u00e5r du postobjektet h\u00e4r. Oavsett menytyp f\u00e5r du \u00e4ven n\u00e5gra ytterligare anv\u00e4ndbara element; som classes<\/code>, url<\/code>, title<\/code>, och description<\/code>.<\/p>\nDet tredje argumentet, $depth<\/code>, \u00e4r ett heltal som talar om vilken niv\u00e5 vi befinner oss p\u00e5. Niv\u00e5 0 \u00e4r toppniv\u00e5, 1 \u00e4r direkt underordnad av toppniv\u00e5, och s\u00e5 vidare. Det fj\u00e4rde argumentet, $args<\/code>, \u00e4r ett objekt f\u00f6r alla argument som tillhandah\u00e5lls till wp_nav_menu()<\/code>. Den femte parametern, $id<\/code>, \u00e4r det aktuella menyalternativets ID.<\/p>\nend_el<\/h3>\n
Funktionen end_el<\/code>\u00e4r ansvarig f\u00f6r att mata ut st\u00e4ngningen av ett element. Vanligtvis skulle det bara mata ut <\/li><\/code>taggen.<\/p>\nfunction end_el(&$output, $item, $depth=0, $args=null) { }<\/code><\/pre>\nArgumenten f\u00f6r end_el<\/code>\u00e4r desamma som start_el<\/code>ovan f\u00f6rutom att funktionen inte har den femte parametern $id<\/code>.<\/p>\ndisplay_element<\/h3>\n
Funktionen display_element<\/code>\u00e4r en \u00e4rvd funktion fr\u00e5n den allm\u00e4nna Walker<\/code>klassen, och \u00e4r den funktion som ansvarar f\u00f6r traversering. Detta \u00e4r funktionen som anropar alla ovanst\u00e5ende funktioner i sin tur.<\/p>\nJag inkluderar detta h\u00e4r eftersom du i vissa fall, till exempel om du vill f\u00f6rhindra att du korsar en hel gren, skulle anv\u00e4nda den h\u00e4r funktionen f\u00f6r det.<\/p>\n
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }<\/code><\/pre>\nDet f\u00f6rsta argumentet, $element<\/code>, \u00e4r menyobjektet – detta \u00e4r vad som f\u00f6rs vidare som $item<\/code>i ovanst\u00e5ende funktioner. Det andra argumentet, $children_elements<\/code>\u2013 skickat genom referens, inneh\u00e5ller alla underordnade element som denna funktion kommer att passera. $max_depth<\/code>, det tredje argumentet, \u00e4r ett heltal som signalerar hur djupt vi ska korsa, och det fj\u00e4rde argumentet, $depth<\/code>, \u00e4r det djup vi befinner oss p\u00e5 just nu. Det femte argumentet, $args<\/code>, \u00e4r argumenten som skickas till funktionen som anropade walker (f\u00f6r menyer skulle det vara argumenten som tillhandah\u00e5lls till wp_nav_menu()<\/code>), och det sista argumentet, $output<\/code>\u2013 skickat genom referens, \u00e4r utdata som skickas som f\u00f6rsta argument i alla av ovanst\u00e5ende funktioner.<\/p>\n\u00c4ndring av utdata fr\u00e5n varje element<\/h2>\n
I \u00f6versikten ovan b\u00f6r du se att funktionen start_el()<\/code>\u00e4r den som ansvarar f\u00f6r att mata ut HTML f\u00f6r ett enstaka menyelement. L\u00e5t oss b\u00f6rja med att \u00e5sidos\u00e4tta denna funktion i v\u00e5r rollatorklass med ett enkelt exempel.<\/p>\nExempel: f\u00f6rhindrar till\u00e4gg av l\u00e4nkar f\u00f6r ’#’ element<\/h3>\n
L\u00e5t oss se till att alla ’ #<\/code>’ l\u00e4nkar f\u00e5r ett <span><\/code>element ist\u00e4llet f\u00f6r en l\u00e4nktagg, f\u00f6r att undvika att sidan uppdateras.<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n function start_el(&$output, $item, $depth=0, $args=[], $id=0) {\n $output .= \"<li class='\". implode(\" \", $item->classes). \"'>\";\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<a href=\"'. $item->url. '\">';\n } else {\n $output .= '<span>';\n }\n\u00a0\n $output .= $item->title;\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<\/a>';\n } else {\n $output .= '<\/span>';\n }\n }\n}<\/code><\/pre>\nVi b\u00f6rjar elementet genom att l\u00e4gga till en <li><\/code>tagg till $output<\/code>. Vi vill se till att WordPresss standardklasser (till exempel ’meny-objekt’, ’meny-objekt-har-barn’ etc), s\u00e5v\u00e4l som klasser som skrivs in manuellt i menyredigeraren l\u00e4ggs till i v\u00e5rt listelement. Vi limmar klasserna som tillhandah\u00e5lls som en array $item->classes<\/code>genom att anv\u00e4nda PHP-funktionen som [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>separerar varje element med ett mellanslag.<\/p>\nP\u00e5 rad #5-9 och #13-17 hanterar vi den villkorade utmatningen av omslagselementet. Vi matar ut en <a><\/code>tagg, s\u00e5vida inte elementets URL \u00e4r ’ #<\/code>’, i vilket fall vi tillhandah\u00e5ller en <span><\/code>tagg ist\u00e4llet. P\u00e5 rad #11 matar vi helt enkelt ut l\u00e4nkens text, som finns i $item->title<\/code>.<\/p>\nDetta \u00e4r allt vi beh\u00f6ver f\u00f6r att se till att alla menyelement som har ’ #<\/code>’ som URL inte \u00e4r klickbara!<\/p>\nOm du g\u00f6r detta i ett formaterat tema, kom ih\u00e5g att du kan f\u00f6rlora lite styling om temat har formaterat <a><\/code>taggen direkt. Du kan l\u00f6sa detta genom att \u00e4ndra stylingen och eventuellt l\u00e4gga till en klass i span-elementet.<\/p>\nExempel: visar menyalternativsbeskrivningar<\/h3>\n
Som ett exempel \u00e4r en annan sak du kan g\u00f6ra h\u00e4r att skriva ut menybeskrivningen. Detta finns, men \u00e4r inte aktiverat som standard. I WordPress Menu Editor m\u00e5ste du klicka p\u00e5 "Sk\u00e4rmalternativ" uppe till h\u00f6ger och bocka av f\u00f6r att visa "Beskrivning":<\/p>\n
![\"L\u00e4r](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151802-61e4cfd7d3371.png\")
<\/a><\/p>\nDetta g\u00f6r att anv\u00e4ndaren kan ange en beskrivning av varje element. Du kan skriva ut den h\u00e4r beskrivningen i din rollatorklass. L\u00e5t oss s\u00e4ga att du bara vill visa beskrivningar f\u00f6r objekten p\u00e5 h\u00f6gsta niv\u00e5n, eftersom detta \u00e4r en del av ditt temas design. Du kan helt enkelt kontrollera om den $item<\/code>har en beskrivning och om den $depth<\/code>\u00e4r 0, s\u00e5 h\u00e4r:<\/p>\n ...\n $output .= $item->title;\n\u00a0\n if ($depth == 0 && !empty($item->description)) {\n $output .= '<span class=\"description\">'. $item->description. '<\/span>';\n }\n ...<\/code><\/pre>\nExempel: L\u00e4gga till rullgardinsmenyer<\/h3>\n
Ett mer vanligt och anv\u00e4ndbart exempel \u00e4r att l\u00e4gga till en "caret", en ikon som signalerar att detta menyalternativ har en rullgardinsmeny (har underordnade element).<\/p>\n
![\"L\u00e4r](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151802-61e4cfd965e21.png\")
<\/a><\/p>\nExempel p\u00e5 karets i aktion – bakom "Blogg" och "Nyheter"<\/p>\n