Nu har du läst om de grundläggande begreppen att använda Twig genom Timber, samtidigt som du bygger ett modulärt WordPress-tema. Vi har också studerat blocknest och flera arv med Twig, baserat på DRY-principen. Idag ska vi utforska hur man visar bilagor, WordPress menyer och användare i ett tema med Twig genom Timber plugin.

Bilder i Timber

Bilder är en av de viktigaste elementen för ett WordPress-tema. I vanliga WordPress-kodningspraxis integreras bilder med PHP i de vanliga HTML-bildtaggarna. Men Timber erbjuder ett ganska omfattande sätt att hantera img (bild) taggen som är modulär och ren.

Det finns bilder kopplade till postens miniatyrfält. Dessa kan enkelt hämtas via Twig-filerna av post.thumbnail. Det är bara så enkelt!

Användande

Låt oss komma igång med ett praktiskt exempel. Vår single.php filen ser så här ut:

Här har jag använt TimberPost () funktion för ganska uppenbara skäl. Detta används i hela Timber för att representera inlägg som hämtas från WordPress, vilket gör dem tillgängliga för Twig-mallar.
Eftersom den utvalda bilden är kopplad till postdatan behöver vi nu hämta den på framsidan. Så Twig filen för den, single.twig, kommer att se ut så här:
# Sinlge Mall: 'single.twig' # % utökar "base.twig"% % block content% 
  
 % endblock% 
På rad # 9 koden post.thumbnail.src hämtar postens utseende (miniatyrbild) och visar den så här:
Du kan använda denna kodsyntax för att hämta så många miniatyrbilder som du vill ha.
Det finns fortfarande mycket mer som du kan experimentera med med dessa bilder när du använder Timber. Du kan till exempel ändra storlek på dem via:
 
Genom att använda ändra storlek (), funktion kan du lägga till nya dimensioner till bilden där den första parametern är bredd och den andra är höjd. Om du vill skala bilden proportionellt, släpp sedan bort höjd attribut. Nu blir syntaxen:
Fronten visar samma bild så här:
Om du vill utforska mer, försök sedan bildkokboken.
Använder sig av TimberImage () 
Tänk på ett scenario där en utvecklare vill hämta bilder via bild-ID, eller vill visa en extern bild via URL etc. För ett sådant utökat tillvägagångssätt erbjuder Timber en klass, TimberImage (), för att representera bilderna som hämtas från WordPress.
Användande
Låt oss ta ett exempel för vårt single.php fil, som ser ut så här nu:
Den här gången använder jag TimberImage () klass som tar bilden ID 8 som dess parameter. Resten av kodningsrutinen är bara densamma. Låt oss hämta den här bilden via Twig-filen single.twig.
 
Värdet lagrat inuti $ sammanhang custom_img-element, dvs. custom_img, kommer att hämta bilden via sitt ID för att visa på framsidan så här:
För att hämta bilden via en extern webbadress ersätter du kan följa den här syntaxen.
 
Den här gången, istället för bild-ID, finns en extern bildadress som visas på frontänden så här:
För att utforska några fler funktioner i den här funktionen kan du kontrollera dokumentationen.
Menyer i Timber
Nu, hur skulle du gå om att göra en WordPress-meny med Twig-mallar? Det är en knepig sak att göra. Men håll fast! Timmer ger dig det TimberMenu () klass, som kan hjälpa dig att göra WordPress-menyerna i Twig-filer som en komplett slinga. Låt oss ta en titt på det. 
Användande
Hela konceptet att hämta menyalternativen kretsar runt menyobjekt. Det finns två sätt att definiera sitt sammanhang. Den första är att göra menyobjektet tillgängligt på varje sida genom att lägga till den i den globala get_context () -funktionen, som jag gjorde i functions.php fil. För det andra kan du lägga till en viss meny med sitt ID för en viss PHP-mall.
Oavsett de två metoderna, när menyn blir tillgänglig för timmerverket $ sammanhang array, kan du hämta alla menyalternativ från den. Men jag föredrar att definiera den globalt. Så gå till functions.php fil och klistra in följande kod:
Så här har jag definierat ett anpassat funktionssamtal add_to_context. Inne i denna funktion är några data som jag vill vara tillgänglig på varje PHP-mall via get_context () fungera. På rad # 13 kan du hitta en förekomst av TimberMenu () skickas mot elementmenyn i $ uppgifter array. 
Detta gör en vanlig WordPress-meny tillgänglig för Twig-mallen som ett objekt som vi kan gå igenom. De TimberMenu () funktionen kan ta parametrar som menyns slug eller ID.
Låt oss skapa en Twig-mall som heter menu.twig fil.
# Menymall: 'menu.twig' #  
Ovanstående kod kör en loop i denna Twig-mall. Linje # 5 kör a för loop för varje menyalternativ och visar titeln på varje meny Artikel i en orörd lista. Slingan går till alla nyckelvärden par av meny objektet är itererade och listade på fronten.
Jag gick vidare och inkluderade menu.twig mall i base.twig mall på rad # 11.
# Basmall: 'base.twig' # % block html_head_container% % include 'header.twig'% % endblock%  % inkluderar "menu.twig"% 
 % block content%  
FÖRLÅT! Inget innehåll hittades!
 % endblock% 
  % inkluderar "footer.twig"%   
Låt oss förhandsgranska back-end (Utseende> Menyer) på min demowebbplats där menyn innehåller två föräldraobjekt och ett barnobjekt. 
Så, låt oss ta en titt på en inläggssida - sedan vår single.twig sträcker base.twig, vår meny kommer automatiskt att visas på den sidan.
Du kan se att högst upp i vårt enda inlägg finns en meny med både föräldrarnas föremål inuti den. 
Vad sägs om barnmenyalternativen? Låt oss uppdatera vår menu.twig fil för att även inkludera barnobjekten.
# Menymall: 'menu.twig' #  
Linjerna 9 till 23 skriver ut eventuella barnmenyalternativ. Den här gången visar fronten barnets föremål från vår första förälder.
För mer information om TimberMenu (), kolla dokumentationen.
Användare i Timber
Användare kan hämtas från WordPress-databasen med TimberUser () klass. Klassen tar användar-ID eller slug som argument för att hämta användaren.
Eftersom användare eller bloggförfattare är associerade med WP-inläggen kommer jag att använda koden för single.php, som nu ser ut så här:
Linje # 20 initierar TimberUser () klass och får tilldelas ett kontextobjektelement, dvs. användare. Låt oss visa författarnamnet via Twig-mallen.
Min single.twig-mall har en ny kodkod i slutet, på rad # 21.
# Sinlge Mall: 'single.twig' # % utökar "base.twig"% % block content% 
  #  # #  # #  # 
 Post titel 
 
post.get_content
 
Författare: user 
 
 % endblock% 
Koden hämtar författarens namn på det aktuella inlägget och visar det på fronten. Du kan använda user | print_r för att se vad som är mer tillgängligt i TimberUser-objektet. 
För att läsa mer om den här klassen, se dokumentationen. Du kan hitta koden för denna handledning i GitHub repo över på ImagesMenusUsers filial.
Slutsats
Den här artikeln ombryter hela serien. Under dessa fyra artiklar utforskade jag hur man använder Timber för att integrera Twig-templerande språk i ett WordPress-tema. 
Slutförvaret för denna serie finns på GitHub med handledningsspecifika filialer:
 
Handledning # 2: Komma igång
 
Tutorial # 3: WordPress Cheatsheet
 
Handledning # 4: TimberImages, TimberMenu & TimberUser
 
Du kan konsultera online dokumentationen för Timber för mer.
Gå igenom hela serien och implementera alla de förklarade exemplen, och jag antar att du kommer att njuta av Twig. Skicka in dina frågor i kommentarfältet nedan. Du kan också nå mig via Twitter.



		
			
	   
	




Koda