Nå har du lest om de grunnleggende konseptene for å bruke Twig gjennom Timber, mens du bygger et modulært WordPress-tema. Vi har også studert blokknesting og flere arv med Twig, basert på DRY-prinsippet. I dag skal vi utforske hvordan du viser vedleggsbilder, WordPress-menyer og brukere i et tema med Twig gjennom Tømmer-plugin.

Bilder i Timber

Bilder er en av de viktige elementene for et WordPress-tema. I vanlige WordPress-kodingspraksis, er bilder integrert med PHP inne i de vanlige HTML-bildene. Imidlertid tilbyr Timber en ganske omfattende måte å håndtere img (bilde) tag som er modulær og ren.

Det er bilder knyttet til innleggets miniatyrfelt. Disse kan enkelt hentes via Twig-filene av post.thumbnail. Det er bare så enkelt!

bruk

La oss komme i gang med et praktisk eksempel. Våre single.php filen ser slik ut:

Her har jeg brukt TimberPost () Fungerer for ganske åpenbare grunner. Dette brukes i hele Timber for å representere innlegg hentet fra WordPress, slik at de blir tilgjengelige for Twig-maler.
Siden det kjennede bildet er festet til postdataene, trenger vi nå å hente det på forsiden. Så Twig filen for det, single.twig, vil se slik ut:
# Sinlge Mal: ​​'single.twig' # % utvider "base.twig"% % blokkinnhold% 
  
 % endblock% 
På linje # 9 koden post.thumbnail.src henter innleggets uthevede (miniatyrbilde) bilde og viser det slik:
Du kan bruke denne kodesyntaxen for å hente så mange miniatyrbilder du vil ha.
Det er fortsatt mye mer som du kan eksperimentere med med disse bildene når du bruker Timber. Du kan for eksempel også endre størrelsen på dem via:
 
Ved å bruke endre størrelse (), funksjon, kan du legge til nye dimensjoner på bildet der den første parameteren er bredde og den andre er høyde. Hvis du vil skalere bildet proporsjonalt, slipper du av høyde Egenskap. Nå blir syntaxen:
Forsiden viser det samme bildet som dette:
Hvis du vil utforske mer, prøv deretter bildekoken.
Ved hjelp av TimberImage () 
Tenk på et scenario der en utvikler ønsker å hente bilder via bilde-ID, eller vil vise et eksternt bilde via URL, etc. For en slik utvidet tilnærming tilbyr Timber en klasse, TimberImage (), å representere bildene som hentes fra WordPress.
bruk
La oss ta et eksempel på vår single.php fil som ser slik ut nå:
Denne gangen bruker jeg TimberImage () klasse som tar bilde-ID 8 som parameter. Resten av kodingsrutinen er bare den samme. La oss hente dette bildet via Twig-filen single.twig.
 
Verdien lagret inne $ sammenheng custom_img element, dvs.. custom_img, vil hente bildet via sin ID for å vise på forsiden slik som dette:
Hvis du vil hente bildet via en ekstern nettadresse, kan du følge denne syntaksen.
 
Denne gangen, i stedet for bilde-ID, er det en ekstern bildeadresse som vises på frontenden som denne:
For å utforske flere funksjoner i denne funksjonen, kan du sjekke dokumentasjonen.
Menyer i Timber
Nå, hvordan ville du gå om å gjøre en WordPress-meny med Twig-maler? Det er en vanskelig ting å gjøre. Men hold igjen! Tømmer gir deg det TimberMenu () klassen, som kan hjelpe deg med å gjøre WordPress-menyene i Twig-filer som en komplett sløyfe. La oss ta en titt på det. 
bruk
Hele konseptet med å hente menyelementene dreier seg rundt menyobjekt. Det er to måter å definere konteksten på. Den første er å gjøre menyobjektet tilgjengelig på hver side ved å legge den til den globale get_context () -funksjonen, som jeg gjorde i functions.php fil. For det andre kan du legge til en bestemt meny med sin ID for en bestemt PHP-mal.
Uavhengig av de to metodene, når menyen blir tilgjengelig for Timber $ sammenheng array, kan du hente alle menyelementene fra den. Men jeg foretrekker å definere det globalt. Så gå til functions.php fil og lim inn følgende kode:
Så, her har jeg definert et egendefinert funksjonsanrop add_to_context. Inne i denne funksjonen er noen data som jeg vil være tilgjengelig på hver PHP-mal via get_context () funksjon. På linje # 13 finner du en forekomst av TimberMenu () blir sendt mot elementmenyen i $ data matrise. 
Dette vil gjøre en standard WordPress-meny tilgjengelig for Twig-malen som et objekt som vi kan løse gjennom. De TimberMenu () Funksjonen kan ta parametere som menybøyle eller ID.
La oss lage en Twig-mal som heter menu.twig fil.
# Menymal: 'menu.twig' #  
Ovennevnte kode kjører en loop i denne Twig-malen. Linjen # 5 kjører a til loop for hvert menyelement og viser tittelen på hver meny punkt i en uordnet liste. Sløyfen løper til alle nøkkelverdiene par av Meny objektet er iterert og oppført på fronten.
Jeg gikk videre og inkluderte menu.twig mal i base.twig mal på linje # 11.
# Base mal: 'base.twig' # % blokk html_head_container% % include 'header.twig'% % endblock%  % inkluderer "menu.twig"% 
 % blokkinnhold%  
UNNSKYLD! Ingen innhold funnet!
 % endblock% 
  % inkluderer "footer.twig"%   
La oss forhåndsvise back-end (Utseende> Menyer) på min demo nettsted der menyen inneholder to foreldre elementer og ett barn element. 
Så, la oss ta en titt på en innleggsside siden vår single.twig strekker base.twig, vår meny vil automatisk vises på den siden.
Du kan se at på toppen av vårt enkelt innlegg er det en meny med begge foreldreelementene inni den. 
Hva med barnemenyelementene? La oss oppdatere vår menu.twig fil for å inkludere barnets elementer også.
# Menymal: 'menu.twig' #  
Linjer 9 til 23 skriv ut barnemenyelementene, hvis noen. Denne gangen viser frontenden barnets element fra vår første forelder.
For mer informasjon om TimberMenu (), sjekk dokumentasjonen.
Brukere i Timber
Brukere kan hentes fra WordPress-databasen med TimberUser () klasse. Klassen tar bruker-ID eller slug som argumenter for å hente brukeren.
Som brukere eller bloggforfattere er tilknyttet WP-innleggene, skal jeg bruke koden til single.php, som nå ser slik ut:
Linje # 20 initialiserer TimberUser () klassen og blir tildelt et kontekstobjektelement, dvs.. bruker. La oss vise forfatternavnet via Twig-malen.
Min single.twig-mal har en ny kode på slutten, på linje # 21.
# Sinlge Mal: ​​'single.twig' # % utvider "base.twig"% % blokkinnhold% 
  #  # #  # #  # 
post.title
 
post.get_content
 
Forfatter: user 
 
 % endblock% 
Koden henter forfatternavnet til det nåværende innlegget og viser det på forsiden. Du kan bruke user | print_r for å se hva som er tilgjengelig i TimberUser-objektet. 
For å lese mer om denne klassen, se dokumentasjonen. Du kan finne koden til denne opplæringen i GitHub-repoen over på ImagesMenusUsers-avdelingen.
Konklusjon
Denne artikkelen bryter opp hele serien. Gjennom disse fire artiklene, undersøkte jeg hvordan du kan bruke Timber til å integrere Twig-templerende språk i et WordPress-tema. 
Det endelige depotet for denne serien finner du på GitHub med opplæringsspesifikke grener:
 
Opplæring # 2: Komme i gang
 
Tutorial # 3: WordPress Cheatsheet
 
Tutorial # 4: TimberImages, TimberMenu & TimberUser
 
Du kan konsultere online dokumentasjon av Timber for mer.
Gå gjennom hele denne serien og implementer alle de forklarte eksemplene, og jeg vedder på at du vil nyte Twig. Legg inn dine spørsmål i kommentarfeltet nedenfor. Du kan også nå meg gjennom Twitter.



		
			
	   
	




Kode