Lär dig hur man skriver Menu Walkers för WordPress-menyer
WordPress tillåter användning av så kallade Walker-klasser för att korsa och visa element i en hierarkisk struktur. I det här inlägget kommer vi att lära oss om hur man skapar, implementerar och anpassar vår egen walker-klass för att anpassa vår menyoutput.
Den mest kända användningen av anpassning med Walker-klasser i WordPress är för menyer, men i verkligheten använder WordPress Walker-klasser för en hel massa fall, till exempel utmatning av taxonomihierarkier, kommentarshierarkier [wp_list_pages](https://developer.wordpress.org/reference/functions/wp_list_pages/)()och [wp_list_categories](https://developer.wordpress.org/reference/functions/wp_list_categories/)(). De utökar alla en allmän Walkerklass. Vi kommer att utöka den Walker_Nav_Menusom används för menyer i WordPress.
Eftersom vi utökar ytterligare en klass behöver vi bara lägga till de funktioner vi vill åsidosätta. Om en funktion inte finns i vår klass kommer WordPress att köra funktionen föräldraklass (klassen vi utökar) istället.
Förberedelse
Du kan lägga till din walker-klass i dina plugin-filer, teman function.phpeller någon PHP-fil som ingår functions.phpi (för renare kod). Du börjar med att definiera din klass med ett namn som du väljer (se till att klassnamnet är unikt, och detta inkluderar möjliga klassnamn i WordPress-kärnan!) som utökar Walker_Nav_Menu:
class AWP_Menu_Walker extends Walker_Nav_Menu {
}För att säga åt WordPress att använda vår rollator definierar vi detta i våra [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()samtal. Denna funktion är ansvarig för att mata ut en meny och du har förmodligen minst en i ditt tema för huvudmenyn.
I argumentarrayen wp_nav_menu()lägger du till ett nytt element med nyckeln "walker" och skapar en ny instans av din walker-klass så här:
Om du uppdaterar din webbplats bör du inte se någon förändring. Detta beror på att vår klass inte åsidosätter någon av förälderns funktioner, och därför kör WordPress helt enkelt de vanliga menyrullatorfunktionerna när menyn matas ut, precis som innan vi sa åt den att använda vår rullator.
Följande är funktioner du kan lägga till i din anpassade rollatorklass för att åsidosätta funktionerna för föräldraklass Walker_Nav_Menu:
De första fyra är funktioner som helt enkelt är ansvariga för utmatning, och de kräver alla att du lägger till en sträng – den första parametervariabeln. Det är viktigt att veta att du inte gör echonågonting här ute, allt ska byggas upp som ett snöre.
start_lvl
Funktionen start_lvlansvarar för att mata ut HTML-koden för starten av en ny nivå. Kort sagt bör det mata ut start <ul>.
function start_lvl(&$output, $depth=0, $args=null) { }Den första parametern, $output– skickad genom referens, är strängen du ska lägga till din utdata till. $depthär ett heltal som signalerar vilken nivå du befinner dig på; 0 för toppnivå, 1 för direkt underordnad av toppnivå, och så vidare. $argsär ett objekt för alla argument som tillhandahålls i wp_nav_menu().
end_lvl
Funktionen end_lvlansvarar för att mata ut HTML-koden för slutet av en nivå. Detta är vanligtvis bara avslutningen </ul>.
function end_lvl(&$output, $depth=0, $args=null) { }Parametrarna är exakt samma som start_lvlovan.
start_el
Denna funktion är ansvarig för att mata ut varje elements HTML. Kort sagt bör det mata ut start <li>och <a>taggen med länktiteln inuti.
function start_el(&$output, $item, $depth=0, $args=null, $id=0) { }Det första argumentet, $output, är som vanligt strängen du ska lägga till utdata till. Det andra argumentet, $item, är menyobjektet – och det är här du kommer att hämta de flesta data för att mata ut menyalternativet. Om menylänken är ett postmenyobjekt får du postobjektet här. Oavsett menytyp får du även några ytterligare användbara element; som classes, url, title, och description.
Det tredje argumentet, $depth, är ett heltal som talar om vilken nivå vi befinner oss på. Nivå 0 är toppnivå, 1 är direkt underordnad av toppnivå, och så vidare. Det fjärde argumentet, $args, är ett objekt för alla argument som tillhandahålls till wp_nav_menu(). Den femte parametern, $id, är det aktuella menyalternativets ID.
end_el
Funktionen end_elär ansvarig för att mata ut stängningen av ett element. Vanligtvis skulle det bara mata ut </li>taggen.
function end_el(&$output, $item, $depth=0, $args=null) { }Argumenten för end_elär desamma som start_elovan förutom att funktionen inte har den femte parametern $id.
display_element
Funktionen display_elementär en ärvd funktion från den allmänna Walkerklassen, och är den funktion som ansvarar för traversering. Detta är funktionen som anropar alla ovanstående funktioner i sin tur.
Jag inkluderar detta här eftersom du i vissa fall, till exempel om du vill förhindra att du korsar en hel gren, skulle använda den här funktionen för det.
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }Det första argumentet, $element, är menyobjektet – detta är vad som förs vidare som $itemi ovanstående funktioner. Det andra argumentet, $children_elements– skickat genom referens, innehåller alla underordnade element som denna funktion kommer att passera. $max_depth, det tredje argumentet, är ett heltal som signalerar hur djupt vi ska korsa, och det fjärde argumentet, $depth, är det djup vi befinner oss på just nu. Det femte argumentet, $args, är argumenten som skickas till funktionen som anropade walker (för menyer skulle det vara argumenten som tillhandahålls till wp_nav_menu()), och det sista argumentet, $output– skickat genom referens, är utdata som skickas som första argument i alla av ovanstående funktioner.
Ändring av utdata från varje element
I översikten ovan bör du se att funktionen start_el()är den som ansvarar för att mata ut HTML för ett enstaka menyelement. Låt oss börja med att åsidosätta denna funktion i vår rollatorklass med ett enkelt exempel.
Exempel: förhindrar tillägg av länkar för ‘#’ element
Låt oss se till att alla ‘ #‘ länkar får ett <span>element istället för en länktagg, för att undvika att sidan uppdateras.
Vi börjar elementet genom att lägga till en <li>tagg till $output. Vi vill se till att WordPresss standardklasser (till exempel ‘meny-objekt’, ‘meny-objekt-har-barn’ etc), såväl som klasser som skrivs in manuellt i menyredigeraren läggs till i vårt listelement. Vi limmar klasserna som tillhandahålls som en array $item->classesgenom att använda PHP-funktionen som [implode](https://www.php.net/manual/en/function.implode.php)()separerar varje element med ett mellanslag.
På rad #5-9 och #13-17 hanterar vi den villkorade utmatningen av omslagselementet. Vi matar ut en <a>tagg, såvida inte elementets URL är ‘ #‘, i vilket fall vi tillhandahåller en <span>tagg istället. På rad #11 matar vi helt enkelt ut länkens text, som finns i $item->title.
Detta är allt vi behöver för att se till att alla menyelement som har ‘ #‘ som URL inte är klickbara!
Om du gör detta i ett formaterat tema, kom ihåg att du kan förlora lite styling om temat har formaterat <a>taggen direkt. Du kan lösa detta genom att ändra stylingen och eventuellt lägga till en klass i span-elementet.
Exempel: visar menyalternativsbeskrivningar
Som ett exempel är en annan sak du kan göra här att skriva ut menybeskrivningen. Detta finns, men är inte aktiverat som standard. I WordPress Menu Editor måste du klicka på "Skärmalternativ" uppe till höger och bocka av för att visa "Beskrivning":
Detta gör att användaren kan ange en beskrivning av varje element. Du kan skriva ut den här beskrivningen i din rollatorklass. Låt oss säga att du bara vill visa beskrivningar för objekten på högsta nivån, eftersom detta är en del av ditt temas design. Du kan helt enkelt kontrollera om den $itemhar en beskrivning och om den $depthär 0, så här:
Exempel: Lägga till rullgardinsmenyer
Ett mer vanligt och användbart exempel är att lägga till en "caret", en ikon som signalerar att detta menyalternativ har en rullgardinsmeny (har underordnade element).
Exempel på karets i aktion – bakom "Blogg" och "Nyheter"
Du måste ta reda på din caret HTML-utdata. I mitt fall matar jag ut ett <i>objekt med specifika klasser för en fin nedåtpil som är tillgänglig i Fontawesome- biblioteket som tillhandahåller tusentals ikoner. Du vill också se till att denna caret endast utgår på element som har barn. Det bästa sättet jag har hittat för att ta reda på om det aktuella elementet har barn, är genom att referera till walker-objektet (ja, vilket är vår rollator själv, men även klasserna den sträcker sig!) i $args, och kontrollera boolean has_children. Att skriva ut en caret är så enkelt som:
Hela vandrarklassen skulle se ut så här:
Och det är allt du behöver för att säkerställa att din meny får snygga radsymboler på överordnade element och att ‘ #‘ länkar inte kommer att vara klickbara.
Om du vill att fältsymbolen ska ändras, till exempel till en uppåtpil när rullgardinsmenyn är aktiv, måste du lägga till denna med Javascript i ditt tema.
Som exemplen ovan antyder kan du manipulera utdata som du vill, baserat på eventuella villkor. Du kan till exempel modifiera utdata baserat på om en viss klass finns (till exempel en klass som skrivs in manuellt i menyredigeraren) genom att leta efter klassen i $item->classes, eller så kan du manipulera (till exempel använda versaler) den utmatade objekttexten i $item->title.
Jag skulle vilja nämna en annan användbar sak. Kom ihåg att $args innehåller alla argument som tillhandahålls till wp_nav_menu(). Detta inkluderar till exempel theme_locationoch andra, så om du kan ändra utdata endast för specifika temaplatser – till exempel huvudmenyn. Men du kan faktiskt tillhandahålla alla anpassade argument!
Säg att du matar ut samma meny flera gånger, till exempel en för dator och igen för mobil. Eller vill du att din rollator bara ska manipulera objekten när de matas ut av wp_nav_menu()ditt tema, och inte när menyn läggs till via en widget? Kanske vill du att din rollator ska hantera resultatet annorlunda i dessa fall?
Du kan tillhandahålla alla anpassade argument till wp_nav_menu(). Som ett enkelt exempel kommer jag att lägga till ett booleskt ‘ show_carets‘ till argumenten för att säkerställa att carets bara läggs till i de fall jag vill ha dem – istället för att min walker-klass lägger till carets i alla menyer.
Sedan kan jag helt enkelt ändra min kod som läggs till ovan (rad #19-21) till att kontrollera om den show_caretsär närvarande och sann i $args, som så:
Du kan lägga till alla argument du vill och se till att din rollator bara anpassar de menyer du vill ha. Till exempel enkla booleaner för olika fall, t.ex. is_mobile_menu, eller något annat du behöver.
Och det är ungefär det. Experimentera gärna och låt mig veta om du har några frågor eller förslag nedan!