Inmiddels heb je gelezen over de basisbegrippen van het gebruik van Twig via Timber, terwijl je een modulair WordPress-thema opbouwt. We hebben ook block-nesting en multiple inheritance met Twig bestudeerd, gebaseerd op het DRY-principe. Vandaag gaan we verkennen hoe bijlage-afbeeldingen, WordPress-menu's en gebruikers in een thema met Twig kunnen worden weergegeven via de Timber-plug-in.

Afbeeldingen in hout

Afbeeldingen zijn een van de essentiële elementen voor elk WordPress-thema. In reguliere coderingsmethoden voor WordPress worden afbeeldingen geïntegreerd met PHP binnen de normale HTML-afbeeldingstags. Timber biedt echter een vrij uitgebreide manier om met de img (afbeelding) tag die modulair en schoon is.

Er zijn afbeeldingen toegevoegd aan het miniatuurveld van het bericht. Deze kunnen eenvoudig via de Twig-bestanden worden opgehaald post.thumbnail. Het is zo eenvoudig!

Gebruik

Laten we beginnen met een praktisch voorbeeld. Onze single.php bestand ziet er als volgt uit:

Hier heb ik de TimberPost () functioneer om vrij voor de hand liggende redenen. Dit wordt in heel Timber gebruikt om berichten weer te geven die zijn opgehaald uit WordPress, waardoor ze beschikbaar zijn voor Twig-sjablonen.
Omdat de afgebeelde afbeelding is gekoppeld aan de postgegevens, moeten we deze nu aan de voorkant ophalen. Dus het Twig-bestand ervoor, single.twig, ziet er zo uit:
# Sinlge-sjabloon: 'single.twig' # % breidt 'base.twig'% % block content% uit 
  
 % endblock% 
Op regel # 9 de code post.thumbnail.src haalt de aanbevolen (miniatuur) afbeelding van het bericht op en geeft het als volgt weer:
U kunt deze codesyntaxis gebruiken om zoveel gewenste miniatuurafbeeldingen op te halen.
Er is nog veel meer waarmee je kunt experimenteren met deze afbeeldingen bij het gebruik van Timber. U kunt ze bijvoorbeeld ook vergroten / verkleinen via:
 
Door de verkleinen (), functie, kunt u nieuwe dimensies toevoegen aan de afbeelding waar de eerste parameter is breedte en de tweede is hoogte. Als u het beeld proportioneel wilt schalen, laat dan het hoogte attribuut. Nu wordt de syntaxis:
Het front-end geeft hetzelfde beeld als volgt weer:
Als je meer wilt ontdekken, probeer dan het kookboek met afbeeldingen.
Gebruik makend van TimberImage () 
Overweeg een scenario waarin een ontwikkelaar afbeeldingen wil ophalen via de image-ID, of een externe afbeelding wil weergeven via URL, enzovoort. Voor een dergelijke uitgebreide aanpak biedt Timber een klasse, TimberImage (), om de afbeeldingen weer te geven die worden opgehaald uit WordPress.
Gebruik
Laten we een voorbeeld nemen voor onze single.php bestand, dat er nu als volgt uitziet:
Deze keer gebruik ik de TimberImage () klasse die de afbeeldings-ID neemt 8 als zijn parameter. De rest van de coderingsroutine is precies hetzelfde. Laten we deze afbeelding ophalen via het Twig-bestand single.twig.
 
De waarde die erin is opgeslagen $ context custom_img element, d.w.z.. custom_img, zal de afbeelding via zijn ID ophalen om aan de voorkant als volgt weer te geven:
Als u de afbeelding via een externe URL wilt vervangen, kunt u deze syntaxis volgen.
 
Deze keer is er in plaats van de afbeeldings-ID een externe afbeeldings-URL die aan de voorkant wordt weergegeven zoals deze:
Om meer functies van deze functie te verkennen, kunt u de documentatie raadplegen.
Menu's in hout
Hoe zou je een WordPress-menu renderen met Twig-sjablonen? Dat is lastig om te doen. Maar wacht even! Hout biedt u zijn TimberMenu () klasse, die u kan helpen de WordPress-menu's in Twig-bestanden als een volledige lus weer te geven. Laten we er eens naar kijken. 
Gebruik
Het hele concept van het ophalen van de menu-items draait om het menubestand. Er zijn twee manieren om de context te bepalen. De eerste is om het menu-object op elke pagina beschikbaar te maken door het toe te voegen aan de globale functie get_context (), zoals ik deed in de functions.php het dossier. Ten tweede kunt u een bepaald menu toevoegen aan de ID voor een bepaalde PHP-sjabloon.
Ongeacht de twee methoden, zodra het menu beschikbaar is voor het hout $ context array, kunt u alle menu-items ervan ophalen. Maar ik geef er de voorkeur aan om het wereldwijd te definiëren. Dus ga naar de functions.php bestand en plak de volgende code:
Dus hier heb ik een aangepaste functieaanroep gedefinieerd add_to_context. Binnen deze functie zijn enkele gegevens die ik wil beschikbaar zijn op elke PHP-sjabloon via de get_context () functie. Op regel # 13 vindt u een exemplaar van TimberMenu () wordt doorgegeven aan het elementmenu in de $ data rangschikking. 
Hierdoor wordt een standaard WordPress-menu beschikbaar voor de Twig-sjabloon als een object dat we kunnen doorlopen. De TimberMenu () functie kan parameters zoals het menu slug of ID nemen.
Laten we een twig-sjabloon maken met de naam menu.twig het dossier.
# Menusjabloon: 'menu.twig' #  
De bovenstaande code voert een lus uit binnen deze Twig-sjabloon. Regel # 5 loopt a voor lus voor elk menu-item en geeft de titel van elk menu weer item in een ongeordende lijst. De lus wordt uitgevoerd tot alle sleutel / waarde-paren van de menu objecten worden geïtereerd en aan de voorkant vermeld.
Ik ging door en nam de menu.twig sjabloon in de base.twig sjabloon op regel # 11.
# Basissjabloon: 'base.twig' # % block html_head_container% % include 'header.twig'% % endblock%  % include "menu.twig"% 
 % block content%  
SORRY! Geen inhoud gevonden!
 % endblock% 
  % include "footer.twig"%   
Laten we een voorbeeld van de back-end bekijken (Uiterlijk> Menu's) van mijn demowebsite waar het menu twee bovenliggende items en één onderliggende item bevat. 
Laten we dus een postpagina bekijken - sinds onze single.twig strekt base.twig, ons menu verschijnt automatisch op die pagina.
Je kunt zien dat er bovenaan een enkele post een menu staat met zowel de bovenliggende items erin. 
Hoe zit het met de kindermenu-items? Laten we onze updaten menu.twig bestand om de onderliggende items ook toe te voegen.
# Menusjabloon: 'menu.twig' #  
Regel 9 tot 23 print de onderliggende menu-items, indien aanwezig. Deze keer toont de voorkant het onderliggende item van onze eerste ouder.
Voor meer informatie over TimberMenu (), controleer de documentatie.
Gebruikers in hout
Gebruikers kunnen worden opgehaald uit de WordPress-database met de TimberUser () klasse. De klasse neemt gebruikers-ID of slug als argumenten om de gebruiker op te halen.
Omdat gebruikers of blogauteurs zijn gekoppeld aan de WP-berichten, ga ik de code gebruiken van single.php, wat er nu zo uitziet:
Regel # 20 initialiseert de TimberUser () klasse en wordt toegewezen aan een contextobjectelement, d.w.z.. gebruiker. Laten we de auteursnaam weergeven via de twig-sjabloon.
Mijn single.twig-sjabloon heeft aan het einde een nieuwe regel code, op regel # 21.
# Sinlge-sjabloon: 'single.twig' # % breidt 'base.twig'% % block content% uit 
  #  # #  # #  # 
post.title
 
post.get_content
 
Auteur: user 
 
 % endblock% 
De code haalt de naam van de auteur van het huidige bericht op en geeft deze weer aan de voorkant. Je kunt gebruiken user | print_r om te zien wat er nog meer beschikbaar is in het TimberUser-object. 
Raadpleeg de documentatie voor meer informatie over deze klasse. Je vindt de code van deze tutorial in de GitHub-repo op de tak ImagesMenusUsers.
Conclusie
Dit artikel bevat de volledige serie. In deze vier artikelen heb ik onderzocht hoe ik Timber kan gebruiken om de Twig-sjablatietaal te integreren in een WordPress-thema. 
De laatste repository voor deze serie is te vinden op GitHub met tutorial-specifieke branches:
 
Tutorial # 2: Aan de slag
 
Tutorial # 3: WordPress Cheatsheet
 
Tutorial # 4: TimberImages, TimberMenu & TimberUser
 
U kunt de online documentatie van Timber raadplegen voor meer informatie.
Doorloop deze hele serie en implementeer alle toegelichte voorbeelden, en ik wed dat je zult genieten van Twig. Plaats uw vragen in het opmerkingenveld hieronder. Je kunt me ook via Twitter bereiken.



		
			
	   
	




Code