Kick-start WordPress-ontwikkeling met takje aan de slag

Nu begrijpen we dat Twig-samen met de WordPress-plug-in Timber-ontwikkelaars kan helpen bij het schrijven van modulaire code tijdens het ontwikkelen van WordPress-thema's. Met een dergelijke modulaire aanpak kunt u de logica en de weergavelaag van uw webtoepassing afzonderlijk verwerken. Laten we overgaan op iets meer technische zaken: Twig-sjablonen maken, HTML naar Twig-bestanden converteren en de logica of gegevens renderen met twig-sjablonen.

Installeer hout

Allereerst ga ik Timber installeren, een WordPress-plug-in die helpt de Twig-templating-engine met WP te integreren. Dus laten we het doen.

• Log in op uw WordPress-dashboard.
• Ga naar Plug-ins> Voeg nieuw toe.
• Zoek naar de houtplugin.
• Installeer en activeer de plug-in.

Zodra Timber is geïnstalleerd, kunt u nu beginnen met het splitsen van uw sjabloonbestanden gegevens en uitzicht bestanden.

Een twig-sjabloon maken

Voordat we Twig-sjablonen gaan maken, ga ik ervan uit dat je een lokale WordPress-configuratie hebt. Voor deze specifieke tutorial is mijn setup:

• Een localhost WP-installatie (ik gebruik DesktopServer van ServerPress).
• Hout-plug-in geïnstalleerd en geactiveerd.
• Optioneel: elk basis / starter-thema (ik gebruik mijn eigen, oftewel Nette).

UpStatement heeft ook een Timber Starter-thema gebouwd.

Laten we beginnen. Ik wil een welkomstbericht boven aan mijn startpagina weergeven. Hoe zou ik het doen zonder Twig? Waarschijnlijk zou ik HTML-code opnemen in het PHP-bestand en het welkomstbericht herhalen, zoals ik deed in het onderstaande codevoorbeeld. Mijn index.php bestand ziet er ongeveer zo uit.

Nu wordt op de startpagina van mijn lokale WordPress-installatie een welkomstbericht weergegeven bovenaan. Dit is het screenshot.

Probleem

Het probleem met deze benadering is dat we data / logica met weergave combineren. Hoe complexer dit bestand wordt, hoe moeilijker het is om het te onderhouden, laat staan ​​te begrijpen, bijvoorbeeld als je de WordPress-lus na deze code toevoegt met een paar argumenten en daarna filter en paginering. Voeg daar aan toe, PHP in HTML ziet er niet goed uit als je een beetje van de logica krijgt.

Modulaire aanpak

Om het meer modulair te maken, kunnen we onze inhoud op de startpagina in de vorm van blokken of componenten bedenken. Er kunnen standaard twee volledige zijn, dat wil zeggen berichten van The_Loop en paginering. Omdat we nu een ander onderdeel bovenaan willen toevoegen, d.w.z. het welkomstbericht, laten we een Twig-bestand maken voor dat onderdeel. 

Open een nieuw, leeg bestand in de editor en kopieer de volgende regels code.

 
 
Welkom op mijn website!
 
 

Maak een nieuwe map in de root van uw thema genaamd keer bekeken en sla dit bestand op met de  .takje uitbreiding. Ik heb het bestand bijvoorbeeld opgeslagen als welcome.twig.

De twig-sjabloon weergeven

Hout biedt ons een paar nuttige functies, waaronder de renderfunctie. Je kunt het zo noemen:

Timber :: render ();

Deze functie kan maximaal vier argumenten bevatten. Aangezien dit buiten het bestek van dit artikel valt, kunt u erover lezen in de houtdocumenten. We kunnen de naam van elk Twig-bestand doorgeven dat aanwezig is in de keer bekeken map van uw thema voor deze functie.

Laten we het welkomstbericht weergeven in de index.php het dossier.

Hout maakt de welcome.twig bestand, laadt de HTML-code en geeft de nieuwe aangepaste weergavelaag aan de voorkant als volgt weer: 
De render () functie neemt welcome.twig als zijn argument, maar het leest dit bestand automatisch zolang de twijftjablonen aanwezig zijn in de map met de naam keer bekeken. 
Als u een aangepaste naam / pad voor de map wilt gebruiken, moet u het pad van die map opgeven. Ik heb bijvoorbeeld een twig-map gemaakt in de hoofdmap van mijn thema en deze toegevoegd aan het argument van de renderfunctie.
De officiële laadvolgorde
Hout zal eerst in het kindthema kijken en daarna terugvallen op het bovenliggende thema (hetzelfde als WordPress-logica). De officiële laadvolgorde is:
 
Door de gebruiker gedefinieerde locaties
 
Directory van PHP-script (maar geen thema)
 
Kindthema
 
Hoofdthema
 
Directory van PHP-script (inclusief het thema)
 
Item 2 wordt boven andere ingevoegd, zodat als u Timber in een plug-in gebruikt, het twig-bestanden in de directory van de plug-in gebruikt.
Dus, het index.php bestand heeft geen HTML erin, en het geeft een Twig-sjabloon weer.
Laten we nu een paar dynamische gegevens van sturen index.php naar de welcome.twig bestand en render met Timber.
Gegevens verzenden via hout naar takjesbestanden
Als u gegevens van het PHP-bestand naar het Twig-bestand wilt verzenden, moet u een contextarray definiëren. De renderfunctie heeft een array met gegevens nodig om Twig-sjablonen een bepaalde context te geven. Laten we de array bellen  $ context, wat een associatieve array is, d.w.z. het neemt de sleutelwaardeparen op. 
Laten we een sleutel / waarde-paar toevoegen dat een dynamisch welkomstbericht zou zijn, dat ons PHP-bestand naar het Twig-bestand zou sturen.
Data bestand
Mijn index.php bestand ziet er nu zo uit.
Dus, binnen de index.php bestand, heb ik een leeg gedefinieerd $ context matrix op regel # 8. Dan op regel # 11, heb ik een variabele gemaakt $ var met de waarde 'Dynamische boodschap'. Op regel # 14 heb ik een sleutel gemaakt het bericht wat gelijk is aan $ var.
Op regel # 17 noemde ik de render-functie met de welcome.twig bestand, maar deze keer is er een extra argument nodig, d.w.z. de $ context matrix. Dit nieuwe argument bevat eigenlijk de gegevens die Timber vanuit het PHP-bestand naar het Twig-bestand verzendt.
We hebben de contextarray gedefinieerd en een dynamisch bericht toegevoegd (je kunt een ander bericht aan verschillende gebruikers laten zien door er een of andere vorm van logica aan toe te voegen, zoals het weergeven van de voornaam van de huidige gebruiker). 
Sjabloonbestand
Nu moeten we deze gegevens gebruiken, d.w.z.. het bericht, in het Twig-bestand. We kunnen een variabele echoën in onze Twig-sjabloon door er dubbele accolades omheen te plaatsen. Als u bijvoorbeeld $ var in een twijgbestand wilt echoën, kunnen we schrijven var. Dat is precies wat ik deed.
 
 
 het bericht 
 
 
De waarde van het bericht wordt afgedrukt in de h2-tags. Ik weet het, het is zo eenvoudig, en de code ziet er behoorlijk schoon uit. 
Dat is het! Sla de code op en bekijk het dynamische welkomstbericht aan de voorkant. Dit is het uiteindelijke screenshot.
Conclusie
Samengevat, nu kunt u het PHP-bestand gebruiken voor het coderen van de logica en het verstrekken van gegevens aan een Twig-sjabloon die HTML bevat en de Twig-variabelen of -functies binnen de dubbele accolades weergeeft.
Deze modulaire aanpak kan leiden tot een afzonderlijk sjabloonbestand voor elk onderdeel van uw WordPress-thema. Denk na over het hebben van een bericht. Twee componenten die u overal in het thema kunt gebruiken om elk bericht dat u maar wilt, een aantal keren weer te geven. 
Dit was een basisimplementatie van Twig met Timber. In de volgende twee artikelen zal ik echter schrijven over de Timber WordPress Cheatsheet, afbeeldingen beheren met Timber en menu's maken zonder de crazy walker-functie te gebruiken.
Als je vragen hebt, kun je deze plaatsen in de reacties hieronder of contact opnemen via Twitter. Je kunt ook mijn themacode bekijken op deze GitHub-repo.



		
			
	   
	




Code