Handledning för WordPress-tema för nybörjare – Del 3: Dynamiskt innehåll
I den här lektionen av WordPress-temahandledningen för nybörjare kommer vi att lära oss om krokar i WordPress och lägga till några krokar i vårt tema som krävs för att ett tema ska fungera korrekt med WordPress och plugins. Vi kommer också att börja komma åt dynamiskt innehåll från WordPress i vår header, som att automatiskt få den aktuella sidtiteln.
Först måste vi lära oss lite om hooks i WordPress. Krokar är en kärnfunktion du behöver för att bekanta dig med. Jag är inte ett fan av att bara visa en hel massa kod där du behöver kopiera+klistra in utan att veta vad det egentligen gör. Om du följer den här handledningen vill du lära dig detta ordentligt, eller hur?
Oroa dig inte, jag håller det kort tills vidare. Vi kommer att lära oss mer om dessa senare i denna handledning.
Krokar i WordPress
Kortfattat; eftersom WordPress kör all kod för att ladda och rendera en sida, finns det vissa "checkpoints" – som vi kallar hooks. Dessa punkter är där WordPress tillåter utvecklare att ändra eller lägga till sin egen kod. WordPress har definierat en hel massa "checkpoints" där, var och en med ett unikt namn. Om du känner till namnet på den kan du lägga till din egen kod vid dessa kontrollpunkter. Och därmed enkelt säga åt WordPress att köra din kod när den når den kontrollpunkten som en del av processen.
Det finns två typer av krokar; åtgärder och filter. Åtgärder är punkter i koden där du kan lägga till anpassad kod, till exempel att mata ut något eller göra något för dina egna syften. Filter är punkter i koden där du kan modifiera en viss variabel innan den används eller matas ut. De är väldigt lika, men filter är kopplade till en specifik variabel och åtgärder är det inte.
Plugins, teman och själva WordPress kan "haka" sin kod med add_action()för åtgärder och add_filter()för filter. Dessa två funktioner säger åt WordPress att köra den krokade koden när exekveringen når dessa krokar.
För att definiera krokar använder du do_action()för åtgärder och apply_filters()för filter.
För alla som är intresserade av att veta mer har jag ett annat inlägg som går in i detalj om hooks i WordPress.
Ett WordPress-tema måste innehålla några specifika viktiga krokar (åtgärder). Dessa krokar tillåter WordPress, plugins och själva vårt tema att haka på och göra viktiga saker. Låt oss titta på de kritiska krokarna vi behöver lägga till.
Temats sidhuvud och sidfot krokar
Alla WordPress-teman måste ha två krokar i mallarna. En åtgärd måste placeras i sidhuvudet (inuti <head>taggen), och en annan i sidfoten (precis före stängningstaggen </body>). Dessa två krokar är absolut nödvändiga för att WordPress, ditt tema och alla plugin ska kunna lägga till sina skript och stilkod till ditt tema.
Krokarna vi behöver är wp_headoch wp_footerför sidhuvudet respektive sidfoten.
Normalt när vi vill köra en krok, skulle vi ringa do_action(<hook name>). Men eftersom dessa två krokar är så kritiska har WordPress förenklat dem för oss genom att lägga dem i ett enkelt funktionsanrop. Så för dessa två krokar kan du helt enkelt använda wp_head()och wp_footer(). I bakgrunden kör dessa två do_action().
Låt oss lägga till dessa två krokar (funktionsanrop) till våra sidhuvuds- och sidfotsmallar och se vad som händer.
Tryck på Uppdatera på din frontend. Om du är inloggad bör du nu se WordPress adminfält visas! Detta innebär att WordPress nu framgångsrikt kan lägga till sina skript och stilar till ditt tema.
Du kan kontrollera din HTML-källa och se att din rubrik nu innehåller en hel del kod. Det här är kod som du inte har lagt till i ditt tema. Som du kan se använder WordPress själva krokarna vi lade till för att göra sina egna saker.
Låt oss gå vidare från krokar och börja titta på hur vi dynamiskt kan hämta innehåll från WordPress och mata ut dessa i vår header.
Dynamiskt innehåll i header
Låt oss säga åt WordPress att dynamiskt ställa in dokumenttiteln (för <title>taggen). För detta kommer vi att använda en funktion, (som har ett filter förresten), som heter wp_title(). Som vi lärde oss ovan, eftersom wp_title()det är ett filter, kan du, WordPress eller plugins ändra utdata. Vi kommer att lägga till ett filter till detta senare i denna handledning.
Funktionen wp_title()tar flera argument som du kan justera efter eget tycke, men för närvarande lägger jag till en tom sträng så att den bara visar titeln på vilken sida vi än befinner oss på.
Byt ut din <title>tagg header.phptill detta:
De glada av er kanske har märkt att förstasidan inte kommer att generera en titel. Detta är standard WordPress-beteende som vi kommer att fixa senare i denna handledning (vi kommer att göra detta med hjälp av filtret). Om du besöker ett enskilt inlägg eller en sida bör du få inläggets titel.
WordPress har en snygg funktion som dynamiskt genererar ett gäng klasser för <body>taggen beroende på vilken sida vi är på; kallas body_class. Uppdatera <body>taggen header.phptill detta:
Uppdatera och ta en titt på alla klasser som lagts till i <body>taggen. Ta en titt på olika sidor (framsida, singel, kategori). Alla dessa klasser är mycket användbara för styling och för att skilja olika liknande delar åt. Du kommer med största sannolikhet att använda några av dessa i din CSS.
För att följa god HTML-praxis bör vi också informera om webbplatsens språk i HTML-koden. För detta använder vi en WordPress-funktion för att hämta språket från Inställningar; språk_attribut.
Och till sist skulle jag vilja lägga till några metataggar och sådant som inte är WordPress-specifika, utan följer vanliga webbdesignpraxis. Så här ser hela header.phpfilen ut:
För nästa steg i denna handledning kommer vi att lämna header.phpoch dyka in index.phpför att lära oss hur man hämtar mer dynamiskt innehåll, till exempel inlägg.