Kick-Start WordPress Utvikling Med Twig Komme i gang

Nå forstår vi at Twig-sammen med WordPress plugin Timber-kan hjelpe utviklere skrive modulær kode mens du utvikler WordPress-temaer. Med en slik modulær tilnærming kan du håndtere logikken og visningslaget av webapplikasjonen separat. La oss hoppe til litt mer tekniske ting: lage Twig-maler, konvertere HTML til Twig-filer, og hvordan gjengi logikken eller dataene med kvistmaler.

Installer Timber

Først og fremst skal jeg installere Timber, som er et WordPress-plugin som hjelper til med å integrere Twig-templeringsmotoren med WP. Så, la oss gjøre det.

• Logg inn på ditt WordPress dashboard.
• Gå til Plugins> Legg til nytt.
• Søk etter Timber plugin.
• Installer og aktiver plugin.

Når Timber er installert, kan du nå begynne å dele mallfilene dine inn i data og utsikt filer.

Opprette en kvistmal

Før vi begynner å lage Twig-maler, antar jeg at du har en slags lokal WordPress-oppsett. For denne spesielle opplæringen er oppsettet mitt:

• En lokalhost WP installasjon (jeg bruker DesktopServer av ServerPress).
• Tømmerplugin installert og aktivert.
• Valgfritt: Et hvilket som helst grunnlag / startstempel (jeg bruker min egen, det vil si pent).

UpStatement har også bygget et Timber Starter Theme.

La oss begynne. Jeg vil vise en velkomstmelding øverst på hjemmesiden min. Hvordan ville jeg gå om det uten Twig? Sannsynligvis vil jeg inkludere HTML-kode i PHP-filen og ekko velkomstmeldingen, som jeg gjorde i kodeeksempelet nedenfor. Min index.php filen ser noe ut som dette.

Nå viser hjemmesiden til min lokale WordPress-installasjon en velkomstmelding rett øverst. Her er skjermbildet.

Problem

Problemet med denne tilnærmingen er at vi blander data / logikk med visning. Jo mer komplisert denne filen blir, desto vanskeligere er det å opprettholde, for å forstå, for eksempel, hvis du legger til WordPress-løkken etter denne koden med noen argumenter og deretter filter og paginering etter det. Legg til det, PHP i HTML ser ikke bra ut når du ender med litt av logikken.

Modulær tilnærming

For å gjøre det mer modulært, kan vi tenke på innholdet vårt på hjemmesiden i form av blokker eller komponenter. Det kan være to komplette som standard, dvs. Innlegg fra The_Loop og paginering. Siden nå vil vi legge til en annen komponent øverst, det vil si velkomstmeldingen, la oss lage en Twig-fil for den komponenten. 

Åpne en ny, tom fil i redigeringsprogrammet, og kopier inn de følgende kodelinjene.

 
 
Velkommen til nettstedet mitt!
 
 

Opprett en ny mappe i temaets rot kalt visninger og lagre denne filen med  .kvist forlengelse. For eksempel lagret jeg filen som welcome.twig.

Gjenopprette Twig-malen

Timber gir oss noen nyttige funksjoner, hvorav en er gjengivelsesfunksjonen. Du kan kalle det slik:

Tømmer :: gjengi ();

Denne funksjonen kan ta opptil fire argumenter. Siden det ikke er omfattet av denne artikkelen, kan du lese om det i Timber docs. Vi kan passere navnet på noen Twig-filer som er til stede i visninger mappe av temaet ditt til denne funksjonen.

La oss gjengi velkomstmeldingen i index.php fil.

Tømmer gjør welcome.twig fil, laster HTML-koden og viser det nye modifiserte visningslaget i fronten som dette: 
De render () funksjonen tar welcome.twig Som argument, men det leser automatisk denne filen så lenge kvistmalerne ligger inne i mappen som heter visninger. 
Hvis du vil bruke et egendefinert navn / en bane for mappen, må du angi banen til den aktuelle mappen. For eksempel har jeg opprettet en kvistmappe i temaet mitt og lagt det til gjengivelsesfunksjonens argument.
Den offisielle belastningsordren
Timber vil først se i barnetemaet og deretter falle tilbake til overordnet temaet (samme som WordPress logikk). Den offisielle belastningsordren er:
 
Brukerdefinerte steder
 
Katalog for å ringe PHP script (men ikke tema)
 
Barn tema
 
Foreldre tema
 
Katalog over å ringe PHP-skript (inkludert tema)
 
Punkt 2 er satt inn over andre, slik at hvis du bruker Timber i et plugin, vil det bruke kvistfilene i pluginets katalog.
Så, indeksen index.php har ingen HTML inne i den, og den gir en Twig-mal.
La oss nå sende noen dynamiske data fra index.php til welcome.twig fil og gjør det med Timber.
Sende data gjennom Timber to Twig Files
For å sende data fra PHP-filen til Twig-filen, må du definere en kontekstgruppe. Gjenopprettingsfunksjonen tar en rekke data for å gi Twig-maler med en eller annen form for kontekst. La oss ringe opp arrayet  $ sammenheng, som er en assosiativ array, dvs. det tar opp nøkkelverdierparene. 
La oss legge til et nøkkelverdierpar som ville være en dynamisk velkomstmelding, som vår PHP-fil ville sende til Twig-filen.
Data fil
Min index.php filen ser slik ut nå.
Så inne i index.php fil, definerte jeg en tom $ sammenheng array på linje # 8. Så på linje # 11 har jeg opprettet en variabel $ var med verdien 'Dynamisk melding'. På linje # 14 har jeg laget en nøkkel meldingen som er lik $ var.
På linje nr. 17 ringte jeg gjengivelsesfunksjonen med welcome.twig fil, men denne gangen tar det et ekstra argument, dvs. $ sammenheng array. Dette nye argumentet har faktisk dataene som Timber vil sende fra PHP-filen til Twig-filen.
Så, vi definerte kontekstabellen og la til en dynamisk melding (Du kan vise en annen melding til forskjellige brukere ved å legge til en slags logikk på den, som å vise den nåværende brukerens fornavn). 
Malfil
Nå må vi bruke disse dataene, dvs.. meldingen, i Twig-filen. Vi kan ekko en variabel i vår Twig-mal ved å sette dobbeltbøyler rundt den. For eksempel å ekko $ var i en kvistfil, kan vi skrive var. Det var akkurat det jeg gjorde.
 
 
 meldingen 
 
 
Verdien av meldingen vil bli skrevet ut i h2-kodene. Jeg vet, det er bare så enkelt, og koden ser ganske ren ut. 
Det er det! Lagre koden og vis den dynamiske velkomstmeldingen på forsiden. Her er det siste skjermbildet.
Konklusjon
For å oppsummere, kan du nå bruke PHP-filen for å kode logikken og gi data til en Twig-mal som inneholder HTML og gjør Twig-variablene eller -funksjonene inne i dobbeltbøylene.
Denne modulære tilnærmingen kan føre til en egen malfil for hver komponent i WordPress-temaet. Tenk på å ha en message.twig-komponent som du kan bruke hvor som helst i temaet, for å vise hvilken som helst melding du ønsker, hvilket som helst antall ganger. 
Dette var en grunnleggende implementering av Twig med Timber. Imidlertid vil jeg i de neste to artiklene skrive om Timber WordPress Cheatsheet, administrere bilder med Timber, og lage menyer uten å bruke den vanlige walkerfunksjonen.
Hvis du har spørsmål, legg dem inn i kommentarene under eller nå ut på Twitter. Du kan også ta en titt på min temakode på denne GitHub repo.



		
			
	   
	




Kode