WordPress-temahandledning för nybörjare – Del 9: Menyer och widgetområden
Den här lektionen tar upp hur du lägger till två grundläggande WordPress-funktioner till vårt tema; menyer och widgetområden. Vi lär oss hur man registrerar en plats för en webbplatsens huvudnavigeringsmeny och matar ut menyn i våra mallar, samt tillåter att lägga till widgets i vårt sidofält och sidfotsområde.
De som är intresserade av er kanske har märkt att varken "menyer" eller "widgetar" är tillgängliga från "Utseende"-menyn i adminpanelen. Detta beror på att vårt tema inte stöder dessa ännu. Vi kommer att fixa det i den här lektionen – med början i menyer .
WordPress menyer
Det finns två delar i att lägga till menyer i ditt tema. Först måste du definiera en eller flera menyplatser i din functions.php. Ett exempel är en huvudmeny som kommer att finnas i rubriken på alla sidor. Den andra delen är att lägga till lite kod på den plats där du vill att menyn ska matas ut. Till exempel header.phppå den plats du vill placera huvudmenyn.
Registrera en menyplats
I den här handledningen kommer vi att lägga till en menyplats för webbplatsens huvudnavigering och placera dess utdata i vår header.php. Låt oss börja med att registrera platsen i functions.php, vilket görs genom att använda funktionen register_nav_menu :
add_action('init', 'wptutorial_register_menu');
function wptutorial_register_menu() {
register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));
}Vi måste haka på kroken init, vilket WordPress har bestämt är en bra "kontrollpunkt" för att registrera menyplatser. Inuti vår funktion anropar vi register_nav_menu()som accepterar ett minimum av två parametrar; menyhandtaget som är en unik slug som du kommer att använda som en identifierare när du renderar menyn, och det synliga namnet på menyn som visas i adminpanelen. Observera att jag lindade in namnet __()för att göra det översättbart, som vi lärde oss i föregående steg.
Om du uppdaterar din adminpanel bör du nu se en ny undermeny under "Utseende"; "Menyer". Grattis, ditt tema stöder nu skapande av menyer!
Om du inte är bekant med att göra och administrera menyer i WordPress är det här en bra guide för dig.
Skapa en ny meny i "Utseende > Menyer" – den kan innehålla vad du vill, jag har precis lagt till dummy-inläggen jag hade skapat i min WordPress.
När du har sparat din första meny kommer ett nytt avsnitt som heter "Menyinställningar" att dyka upp under ditt menyredigeringsområde, som låter dig välja en plats för den här menyn. Det bör lista en tillgänglig plats, vilket är den vi gjorde; "Huvudnavigering".
Placera en bock i "Huvudnavigering" och tryck på Spara. Nu är din nyskapade meny kopplad till platsen och kommer att visas automatiskt var du än lägger till koden för att mata ut denna menyplats. Låt oss göra det nu.
Mata ut en menyplats i en mall
Öppna upp header.phpoch var du än vill att menyutgången ska vara, lägg till ett samtal till wp_nav_menu(). Den här funktionen accepterar en hel massa argument i en array för att verkligen anpassa menyutgången. Viktigast av allt behöver vi parametern som säger att den ska hämta platsen för "Huvudnavigering". För att göra det lägger vi till argumentet ‘ theme_location‘ och ställer in det i handtaget på vår meny; ‘ main-nav‘.
Jag lade till menyutgången direkt efter start av <body>taggen, men om du har kompletterat dina mallar med HTML, bestäm själv var du vill att menyn ska visas.
Uppdatera din frontend och du bör se menyn du skapade i admin som en oordnad lista i början av mallen.
Som vanligt uppmuntrar jag dig att gräva lite djupare i parametrarna för att wp_nav_menui WordPress Codex-dokumentation för det och leka med hur du vill att utdata ska vara. Till exempel: du kan göra att det inte matas ut i en HTML-lista, du kan begränsa menyalternativen till endast vissa nivåer (för att förhindra undermenyer) och mer.
Om du är nyfiken på stylingdelen; ta en titt på klasserna WordPress lägger till automatiskt i varje menyalternativ. Du kommer enkelt att kunna lägga till stilar för aktivt menyobjekt, objekt som har underordnade objekt, överordnat objekt för ett aktivt underordnat objekt, etc.
Obs: Alla temaanvändare kan alltid skapa flera menyer och välja att visa dessa utanför ett temas registrerade platser med hjälp av widgets. Men för att göra detta måste ditt tema definiera några widgetområden! Låt oss göra det härnäst.
Widgetområden
Widgetområden fungerar ganska lika i hur menyer fungerar. Du registrerar en plats (för widgetar definierar du ett område där temaanvändaren kan placera widgets i), och var du än vill att platsen/området ska visas i dina mallar lägger du till lite kod som hänvisar till handtags-id:t du angav i din registreringskod.
Låt oss definiera ett widgetområde i vårt sidofält och ett i sidfoten. Det är vanligt att teman tillhandahåller flera widgetområden i sidfoten för att dela upp dem snyggt i kolumner, men i den här handledningen lägger vi bara till en i sidfoten.
Widgetområden hänvisas till som "sidofält" i WordPress-kod, men det är inte enbart för det gamla högra sidofältet på webbplatser. Det verkar som att ett gammalt namn bara har fastnat från en tid då webbplatser vanligtvis bara hade ett widgetområde i sidofältet. Tro inte att "sidofält" bara kan referera till faktiska sidofält.
Registrera widgetområden
Vi börjar med att registrera två widgetområden i vår functions.php. Vi använder funktionen register_sidebarför att registrera våra sidofält, anslutna till widgets_initkroken, som WordPress har definierat som den bästa kroken för att registrera widgetområden (och anpassade widgets).
Funktionen register_sidebar()accepterar en hel del argument, som minimum behöver du argumenten ‘id’ och ‘name’. Det finns parametrar tillgängliga för att definiera hur du vill att widgetens HTML-omslag ska matas ut.
Uppdatera din adminpanel och du bör nu se menyalternativet "Widgets" visas under "Utseende". I "Widgets" adminpanel kan du se två tillgängliga widgetområden i det högra området; som är vårt "Sidefältswidgetområde" och "Sidfotswidgetområde".
Placera en slumpmässig widget i vårt sidofält eller sidfotswidgetområde, bara så att du kan se den i aktion.
Mata ut ett widgetområde i en mall
Den sista delen är att mata ut widgetområdena till våra mallar. För att göra detta använder vi funktionen dynamic_sidebar()och tillhandahåller handtaget som parameter. Öppna sidebar.phpoch lägg till följande i <aside>taggarna:
Lägg märke till att jag lindade in den i en oordnad listtagg (<ul>). Detta beror dynamic_sidebarpå att alla widgets som är inslagna i <li>objekt som standard visas. Jag uppmuntrar dig att leka med utdataparametrarna om du inte gillar att widgets är en lista.
När det gäller sidfoten lägger vi till den i början av footer.php, insvept i en <footer>tagg (om du vill).
Det är det för menyer och widgetområden. Ditt tema har nu användarens flexibilitet att skapa en ny meny och använda en widget för att visa den i sidofältet eller sidfoten. I nästa lektion i denna handledningsserie kommer vi att skapa fler mallar till vårt tema.