Widgets gör WordPress verkligen flexibel. Genom att lägga till widgetområden i dina teman låter du användarna infoga sitt eget anpassade innehåll utan att behöva skriva en kodrad.
de är vanligast i sidofält och sidfot, där de ofta används för att hålla widgets som sökwidgeten, senaste inläggswidgeten eller kanske en anpassad meny. Men om du lägger till dem på din sida och lägger in mallar gör du dem ännu kraftfullare.
du kan lägga till widgetområden i vilken mallfil du vill. Jag gillar att lägga till många av dem i Mina teman, på platser som rubriken, före och efter huvudnavigeringen och före och efter innehållet. Du kan antingen lägga till dem i en malldel (till exempel rubriken) som används av varje sida på din webbplats, eller så kan du vara mer specifik och bara lägga till dem i mallfiler för en viss innehållstyp.
i det här inlägget ska jag visa dig hur du gör just det. Jag skapar ett barntema för standard Twenty Seventeen-temat och sedan inom det barntemat skapar jag några nya mallfiler: en anpassad sidmallfil, en kategoriarkivfil och en enda postmallfil.
i var och en av dessa kommer jag att lägga till ett widgetområde som är specifikt för den innehållstypen, så att användarna bara ser det när de tittar på en sida med hjälp av sidmallen, ett kategoriarkiv eller ett enda inlägg.
så låt oss komma igång!
notera: Jag har lagt till koden för det här inlägget till GitHub så att du kan kontrollera det om du arbetar tillsammans med denna handledning.
ställa in Barntemat
jag kommer att använda ett barn av twenty seventeen-temat: om du arbetar med ditt eget tema kan du redigera det direkt istället för att skapa ett barntema. Men om du använder ett tema från tredje part måste du skapa ett barntema. Detta beror på att när du uppdaterar temat kommer alla ändringar du gör i det att gå vilse.
så, i mappen wp-content/themes, skapa en ny mapp med namnet på ditt tema. Jag ringer min wpmu-Mall-widgets. Inom det, lägg till en stil.css-fil och Lägg till det här:
kom ihåg att om du arbetar med ditt eget tema kan du hoppa över det här steget. Och om du använder ett annat överordnat tema måste du redigera stilarket för att återspegla det. Om du inte är säker, kolla in vårt inlägg om att skapa barnteman.
registrera Widgetområdena
innan vi kan lägga till widgetområdena i våra mallfiler måste vi registrera dem i temats funktionsfilen. Öppna din funktionsfilen om ditt tema redan har en, eller om det är ett nytt barntema, skapa en fil som heter funktioner.php.
låt oss börja med att lägga till den tomma funktionen för att registrera widgetarna och ansluta den till widgets_init – kroken. Lägg till detta i din funktionsfil:
inom den funktionen kommer vi att registrera fyra widgetområden: en var och en av de enskilda post-och kategoriarkivmallarna och två för den anpassade sidmallen.
börja med att registrera den första widgeten:
detta använder funktionen register_sidebar(), med en rad parametrar enligt följande:
- namnet på widgetområdet, som kommer att visas på Widgets admin-skärmen och Anpassaren. Jag har gjort det här översättningsbart.
- ett unikt ID för widgetområdet.
- Markup för innan widgeten, som använder platshållare för internationalisering.
- Markup för efter widgeten.
- Markup för före och efter widgetens titel, som är innesluten i ett
h3– element.
så det är den första. Nu, fortfarande inuti din funktion, Lägg till de andra tre:
så vi har nu fyra widgets:
- en efter innehållet på enstaka inlägg.
- en före innehållet i ett kategoriarkiv.
- en före och en efter innehållet på vår widgetized sidmall.
om du vill flytta dina widgetområden (t.ex. sätta kategoriarkivet ett efter innehållet eller det enda inlägget ett före innehållet) bör du byta namn på dem på lämpligt sätt. Det här är så att du vet vad som händer när du kommer att redigera din kod i framtiden, och dina användare vet var widgetområdena kommer att matas ut när de lägger till widgets till dem via Widgets admin-skärmen. Kom ihåg att om du ändrar detta måste du placera koden för att mata ut widgetarna på rätt plats i dina mallfiler i nästa steg, vilket kan skilja sig från var jag lägger min.
nu om du öppnar din Widgets admin sida ser du dina widgetområden, redo för widgets:
men om du lägger till widgetar i dina nya widgetområden visas de inte i webbplatsens front. De måste fortfarande kodas i mallfilerna.
lägga till dina widgetområden i mallfiler
nu lägger vi till koden för att mata ut widgetområdena. Om du arbetar med ditt eget tema kan du bara behöva redigera dina befintliga temamallfiler. Om du arbetar med ett barntema (eller om ditt tema inte redan har relevanta mallfiler) måste du skapa nya filer.
Låt oss börja med den widgetiserade sidmallfilen, eftersom ditt tema inte kommer att ha det på något sätt.
skapa en ny fil i din temamapp. Jag ringer min page_widgetized.php. Öppna den filen och Lägg till den här:
detta berättar för WordPress att det är en anpassad sidmall. Om du vill veta mer om dem, kolla in vår detaljerade guide.
Obs: Använd inte page-widgetized som ditt filnamn. Detta beror på att page-är ett reserverat suffix i WordPress. Använd ett understreck istället för ett streck, eller undvik bara att använda page I början helt och hållet om du föredrar det.
nu under den kommenterade texten, kopiera allt från ditt temas (eller det överordnade temas) sida.php-fil. Ett alternativ är att göra en kopia av filen och lägga till den kommenterade texten, det är upp till dig.
du kan nu välja den här mallen när du redigerar en sida på din webbplats:
välj den för en av dina sidor så att du kan prova widgetarna. Här är min sida:
det ser inte väldigt spännande ut just nu eftersom jag inte har lagt till widgetområdena i mallfilen. Låt oss göra det.
i mallfilen lägger du till koden direkt ovanför sidans innehåll för widgetområdet ovan:
detta kontrollerar om widgetområdet har fyllts i med det unika ID som du skapade för widgetområdet när du registrerade det i funktionsfilen. Om den har fyllts i matar den ut innehållet i widgetområdet.
lägg nu till widgetområdet under innehållet. Efter ditt innehåll (och inuti något omslutande element) lägger du till det här:
spara din sidmallfil.
här är den fullständiga koden för min sidmallfil, så du kan se var widgeten områden före och efter slingan:
nu för att testa det. Jag har lagt till en widget till var och en av de nya widgetområdena:
och så här ser de ut på min sida:
så det är den anpassade sidmallen inställd. Nu måste du redigera de andra två sidmallfilerna (eller skapa dem om det behövs). Följ dessa steg:
- om du arbetar med ett barntema skapar du en fil som heter kategori.php. Kopiera innehållet i kategorin.php-fil från ditt överordnade tema (om det har en) eller arkivet.php-fil (eller index.php om det inte har det).
- om du inte arbetar med ett barntema, men ditt tema har ingen kategori.php-fil, gör en genom att kopiera arkivet.php-fil (eller om du inte har en av dem, indexet.php-fil).
- Lägg till widgetområdet ovanför innehållet i din kategoriarkivfil – igen, omedelbart före slingan.
här är koden för widgetområdet:
Upprepa nu detta för den enda mallen:
- skapa ett enda inlägg.php-fil om ditt tema inte har en (eller om du använder ett barntema). Kopiera innehållet från ditt överordnade temas enda inlägg.php-fil i den, eller från nästa mallfil upp i mallhierarkin (singel.php, singular.php eller index.php).
- lägg igen widgetområdet – den här gången efter innehållet.
här är koden:
nu om du lägger till widgets visas de på din webbplats. Här är min visar en lista över de senaste inläggen efter ett enda inlägg:
lägga Widget områden till mallar ger dig flexibilitet
Widget områden gör det möjligt för ditt tema användare att lägga till extra innehåll utan att behöva skriva kod. Men de är inte bara för sidofältet. Att lägga till extra widgetområden i dina mallfiler ger dig riktade områden på din webbplats som du kan lägga till widgetar till, med fin kontroll över var de kommer att dyka upp.
du kan ta dessa exempel vidare om du vill, lägga till widgetområden i alla dina filer eller till och med använda olika versioner av sidofältet.php-fil för olika innehållstyper. Världen är din ostron!