In het vorige artikel schreef ik over de integratie van de Twig Templating-engine met WordPress via Timber en hoe ontwikkelaars gegevens van de PHP-bestanden naar de Twig-bestanden kunnen verzenden. Laten we bespreken hoe u een basissjabloon kunt maken met Twig, de voordelen van deze DRY-techniek en een WordPress Cheatsheet voor hout-twijgjes.

Een basissjabloon maken in tak

Twig werkt met het DRY (Do not Repeat Yourself) -principe. Een van de belangrijkste kenmerken van Twig is basissjabloon met nesten en meerdere overerving. Hoewel de meeste mensen PHP op een lineaire manier gebruiken, kunt u oneindige niveaus van geneste blokken maken om met name uw paginasjablonen te beheren. 

Denk aan je basissjabloon als een bovenliggende sjabloon met blokken blokken erin. Een kindsjabloon kan een bovenliggende sjabloon uitbreiden en blokken of blokken van binnenuit wijzigen zonder de code te herschrijven, wat in beide sjablonen vergelijkbaar zou zijn.

Laten we een voorbeeld van een ouder- of basissjabloon bekijken, a base.twig het dossier. Je kunt het plaatsen met andere Twig-sjablonen in de map met weergaven. U noemt dit bestand in elk van uw Twig-sjablonen, waar het wordt gebruikt als een bovenliggende sjabloon voor dat specifieke Twig-bestand. Typ de volgende regels code om een ​​te maken  keer bekeken map. Deze basissjabloon biedt een basisstructuur voor uw WordPress-thema. Hier is de code van een eenvoudig base.twig het dossier.

# Basissjabloon: base.twig # % block html_head_container% % include 'header.twig'% % endblock%  
 % block content%  
SORRY! Geen inhoud gevonden!
 % endblock% 
  % include "footer.twig"%   

Opmerkingen in Twig: # Basissjabloon: base.twig #

U kunt opmerkingen in Twig schrijven met de syntaxis # comment here #. Gebruik de syntaxis voor reacties # ... # om een ​​deel van een regel in een sjabloon weg te laten. Dit is handig voor foutopsporing of om informatie toe te voegen voor andere sjabloonontwerpers of uzelf. Je kunt een reactie vinden op regel # 1.

Blocks: % block html_head_container% % endblock%

De hele filosofie van Twig en Timber draait om de modulaire codeaanpak in WordPress. Ik heb herhaaldelijk geschreven over het idee dat de gegevens in Twig worden verwerkt in de vorm van componenten of blokken. 

Blokken worden gebruikt voor overerving en fungeren tegelijkertijd als tijdelijke aanduidingen en vervangingen. Ze zijn gedocumenteerd in detail in de documentatie voor de extensie-tag.

% block add_block_name_here% Blokkeert de inhoud hier % endblock%

In de hierboven geschreven code, kunt u een blok vinden met de naam html_head_container die regel # 3 tot regel # 7 overspant. Elke sjabloon die deze base.twig-basissjabloon uitbreidt, kan dezelfde blokinhoud overnemen of deze wijzigen om iets anders toe te voegen. Er is nog een blok met de naam content % block content% waarbij lijn # 13 tot regel # 18 wordt overspannen.

Op dezelfde manier wordt het concept van het maken van blokken verder uitgebreid, waar je ook oneindige niveaus van geneste blokken kunt maken. Dit is het ware DRY-principe.

Inclusief verklaring: % include "header.twig"% 

Twig-sjablonen kunnen andere Twig-sjablonen bevatten, net zoals we dat in PHP doen. Deze base.twig bestand wordt een algemene omslag, en het is onvolledig zonder het hoofd en footer bestanden. Daarom is de syntaxis % include "file.twig"% helpt ons om twee verschillende Twig-sjablonen te gebruiken:

• De kopsjabloon % include "header.twig"% op regel # 5.
• Het voettekstsjabloon (% include "footer.twig"% op regel # 23.

De basissjabloon uitbreiden

We hebben een gemaakt base.twig bestand als een bovenliggende sjabloon en liet het inhoudsblok leeg. Dit blok kan worden gebruikt binnen elke aangepaste Twig-bestanden die het kunnen wijzigen en de rest van de basissjabloon zal worden overgenomen zoals deze is. Laten we bijvoorbeeld een maken single.twig bestand dat de base.twig-sjabloon uitbreidt en de inhoud blok.

# Enkele sjabloon: 'single.twig' # % breidt 'base.twig'% % block content% uit 
 
post.title
 
post.get_content
 
 % endblock% 

Deze code toont een aangepast single.twig het dossier. Op regel # 3 wordt deze sjabloon uitgebreid tot base.twig als het bovenliggende of basissjabloon. De strekt tag kan worden gebruikt om een ​​sjabloon uit een andere sjabloon uit te breiden.

Hier, alle details met betrekking tot de hoofd en footer zijn geërfd van de base.twig bestand, dat is de bovenliggende sjabloon, terwijl de inhoud blok wordt vervangen door de titel en inhoud van het bericht. Hoeveel plezier is dat?

WordPress CheatSheet voor hout

De ontwikkelaars van Timber hebben ervoor gezorgd dat het WordPress op elke mogelijke manier aanvult, van de kern tot de eindgebruikers. Hoewel de conversiesyntaxis van WordPress-functies in Timber enigszins verschilt, is deze redelijk goed gedocumenteerd. Aan het einde van dit artikel deel ik een lijst met enkele van de conversies voor de WordPress-functies en hun hout-equivalenten. Laten we samenvatten.

Korte samenvatting!

In mijn vorige artikel heb ik een welkomstbericht gemaakt dat eenvoudigweg werd ingevuld via een PHP-tekenreeks op de startpagina van mijn demowebsite. De code hiervoor is te vinden in zijn branch op GitHub. Laten we deze procedure nogmaals herhalen maar met een andere en meer technische aanpak.

Op dit moment zal ik hetzelfde welkomstbericht weergeven, maar deze keer via het maken van een nieuwe pagina die op de startpagina wordt weergegeven.  

WordPress-functies ophalen in tak

Maak een nieuwe pagina met de titel "Welcome to My Blog!" en voeg wat inhoud erin toe voordat je op de publicatieknop klikt.

Laten we nu de inhoud van deze welkomstpagina op de startpagina weergeven. Om dit te doen, gaat u opnieuw naar de index.php bestand en voeg de volgende regels code toe.

Hier heb ik een toegevoegd $ context array, waarbinnen ik een element heb toegevoegd welkomstpagina en gebruikte toen de get_post () functie om de pagina op te halen die ik zojuist heb gemaakt. Om dit te doen, diende ik de pagina-ID in, die in dit geval 4 is.
Binnen in de welcome.twig bestand, laten we print_r het element welkomstpagina en zie welke gegevens we krijgen. Mijn welcome.twig-bestand ziet er op dit moment zo uit.
# Berichtsjabloon: 'welcome.twig' # 
 
 welcome_page | print_r 
 
Ik kan bevestigen dat dit element in de array $ context nu een TimberPost-object heeft voor die specifieke pagina met ID 4.
Vanaf hier kunnen we alle eigenschappen krijgen die aan de voorkant kunnen worden weergegeven. Ik wil bijvoorbeeld de pagina titel en inhoud enkel en alleen. Dus nu mijn welcome.twig bestand ziet er als volgt uit:
# Berichtsjabloon: 'welcome.twig' # 
 
welcome_page.title
 
welcome_page.content
 
 
En de startpagina heeft de informatie die we nodig hebben.
WordPress Cheatsheet
Zoals ik al eerder zei, biedt Timber enkele handige conversies van de WordPress-functies. Deze functies kunnen u helpen informatie te verkrijgen over de:
 
blog
 
Lichaamsklassen
 
Koptekst / voettekst
 
 get_context () functie
Er is een Timber :: get_context () functie die ladingen site-informatie ophaalt die een ontwikkelaar op de voorkant van de site zou willen weergeven. De documentatie legt het als volgt uit:
Dit gaat een object retourneren met veel van de algemene dingen die we op de site nodig hebben. Dingen zoals je nav, wp_head en wp_footer waar je elke keer mee wilt beginnen (zelfs als je ze later overschrijft). Je kunt een $ context = Timber :: get_context (); print_r ($ context); om te zien wat erin zit of open is timber.php om zelf te inspecteren.
Dit niet alleen, maar u kunt uw eigen aangepaste gegevens aan deze functie toevoegen via een handige filter.
Hieronder vindt u nog enkele conversies zoals deze, die kunnen worden gebruikt met Timber.
Blog Info
 
 blog_info ( 'charset') => site.charset 
 
 blog_info ( 'beschrijving') =>  Omschrijving van de site  
 
 blog_info ( 'sitename') =>  site naam  
 
 blog_info ( 'url') => site.url 
 
 Body Class
 imploderen (", get_body_class ()) =>  
 Thema
 
 get_template_directory_uri () => theme.link (voor bovenliggende thema's)
 
 get_template_directory_uri () => theme.parent.link (voor kindthema's)
 
 get_stylesheet_directory_uri () => theme.link 
 
 get_template_directory () => theme.parent.path 
 
 get_stylesheet_directory () => theme.path 
 
 wp_functions
 
 wp_head () => wp_head 
 
 wp_footer () => wp_footer 
 
Laten we met een paar functies experimenteren, beginnend met de bloginfo. In plaats van foo, schrijven  site naam . 
De front-end geeft de sitetitel als volgt weer:
Hout heeft ook een aantal functieconversies om de berichten en postgerelateerde informatie via weer te geven TimberPost (). Voordat ik het gebruik van deze functie uitleg, laten we dan de functie-conversies vermelden die daarmee samenhangen.
Post
 
 de inhoud() => post.content 
 
 the_permalink () => post.permalink 
 
 de titel() => post.title 
 
 get_the_tags () => post.tags 
 
Gebruik
Gebruik deze code in de single.php het dossier.
Laten we nu de post.title functie in ons Twig-bestand.
 
post.title
 
 
Sla het op en de front-end geeft de berichttitel als volgt weer:
Jouw beurt!
Vandaag was je getuige van de praktische implementatie van het DRY-principe met Timber and Twig tijdens het bouwen van een WordPress-thema. Doorloop deze zelfstudie en probeer deze te implementeren en laat me alles weten over eventuele vragen. Je vindt de complete code in de WP Cheatsheet-branch over in deze GitHub-repository.
In het volgende en het laatste artikel zal ik bespreken hoe ik afbeeldingen en menu's moet verwerken in een Twig-gebaseerde WordPress-sjabloon. Tot dan, neem contact met me op via Twitter om je vragen te beantwoorden of hier een te plaatsen.



		
			
	   
	




Code