I forrige artikkel skrev jeg om å integrere Twig-templeringsmotoren med WordPress gjennom Timber og hvordan utviklere kan sende data fra PHP-filene til Twig-filene. La oss diskutere hvordan du lager en grunnmal med Twig, fordelene med denne DRY-teknikken, og en Timber-Twig WordPress Cheatsheet.

Opprette en basemal i twig

Twig arbeider med DRY (ikke gjenta selv) prinsippet. En av de viktigste funksjonene i Twig er base templating med nesting og flere arv. Mens de fleste bruker PHP på en lineær måte, kan du opprette uendelige nivåer av nestede blokker for spesielt å kontrollere sidemaler. 

Tenk på basemalen din som en overordnet mal med sett med blokker i den. En barnemal kan forlenge en overordnetmal og endre en blokk eller blokker fra innsiden av den uten å skrive om koden, noe som ville være lik i begge mallene.

La oss ta en titt på et eksempel for foreldre eller basemal, a base.twig fil. Du kan plassere den med andre Twig-maler i visningsmappen. Du kaller denne filen i noen av dine Twig-maler, der den brukes som en overordnet mal for den aktuelle Twig-filen. Skriv inn følgende kodelinjer for å opprette en  visninger mappe. Denne basemalen vil gi en grunnstruktur for WordPress-temaet. Her er koden til en enkel base.twig fil.

# Basemaler: base.twig # % blokk html_head_container% % include 'header.twig'% % endblock%  
 % blokkinnhold%  
UNNSKYLD! Ingen innhold funnet!
 % endblock% 
  % inkluderer "footer.twig"%   

Kommentarer i Twig: # Basemaler: base.twig #

Du kan skrive kommentarer i Twig med # comment here # syntaks. Hvis du vil kommentere en del av en linje i en mal, bruker du kommentarsyntaxen # ... #. Dette er nyttig for feilsøking eller for å legge til informasjon for andre maldesignere eller deg selv. Du kan finne en kommentar på linje # 1.

blokker: % blokk html_head_container% % endblock%

Hele filosofien om Twig og Timber dreier seg om modulær kode tilnærming i WordPress. Jeg har gjentatte ganger skrevet om ideen om at dataene i Twig håndteres i form av komponenter eller blokker. 

Blokker brukes til arv og fungerer som plassholdere og erstatninger samtidig. De er dokumentert i detalj i dokumentasjonen for den utvidede taggen.

% blokk add_block_name_here% Blokker innhold her % endblock%

I den ovenfor skrevet koden kan du finne en blokk som heter html_head_container som strekker seg linje # 3 til linje # 7. En hvilken som helst mal som utvider denne base.twig-basemalen, kan enten arve den samme blokkens innhold eller endre den for å legge til noe annet. Det er en annen blokk som heter innhold % blokkinnhold% hvorav strekker du linje # 13 til linje # 18.

På samme måte er konseptet med å skape blokker utvidet ytterligere der du også kan lage uendelige nivåer av nestede blokker. Dette er det sanne DRY-prinsippet.

Inkluder uttalelse: % inkluderer "header.twig"% 

Twig-maler kan inkludere andre Twig-maler, akkurat som vi gjør det i PHP. Dette base.twig filen kommer til å være et generelt omslag, og det er ufullstendig uten det Overskrift og bunntekst filer. Derfor er syntaksen % inkluderer "file.twig"% vil hjelpe oss med å inkludere to forskjellige Twig-maler:

• Overskriftsmalen % inkluderer "header.twig"% på linje # 5.
• Bunntekstmalen (% inkluderer "footer.twig"% på linje # 23.

Utvide basemalen

Vi opprettet en base.twig filen som en overordnet mal og forlatt innholdsblokken tom. Denne blokken kan brukes i alle tilpassede Twig-filer som vil endre den, og resten av basemalen vil bli arvet som det er. For eksempel, la oss lage en single.twig fil som vil forlenge base.twig-malen og vil endre innhold blokkere.

# Enkeltmal: 'single.twig' # % utvider "base.twig"% % blokkinnhold% 
 
post.title
 
post.get_content
 
 % endblock% 

Denne koden viser en egendefinert single.twig fil. På linje # 3, strekker denne malen seg til base.twig som sin overordnede eller basemaler. De strekker tag kan brukes til å utvide en mal fra en annen.

Her er alle detaljer relatert til Overskrift og bunntekst er arvet fra base.twig fil, som er den overordnede malen, mens innhold blokk vil bli erstattet med posttittel og innhold. Hvor mye moro er det?

WordPress CheatSheet for Timber

Utviklerne av Timber har sørget for at den utfyller WordPress på alle mulige måter fra kjernen til sluttbrukerne. Selv om konverteringssyntaxen til WordPress-funksjonene i Timber er noe annerledes, er det ganske godt dokumentert. Mot slutten av denne artikkelen deler jeg en liste over noen av konverteringene for WordPress-funksjonene og deres Timber-ekvivalenter. La oss ta opp igjen.

Kort oppsummering!

I min tidligere artikkel skapte jeg en velkomstmelding som bare befolket via en PHP-streng på hjemmesiden til min demo-nettside. Koden for dette finner du i grenen på GitHub. La oss gjenta denne prosedyren igjen, men med en annen og mer teknisk tilnærming.

Akkurat nå viser jeg den samme velkomstmeldingen, men denne gangen opprettes en ny side som fylles på hjemmesiden.  

Henter WordPress-funksjoner i Twig

Lag en ny side med tittelen "Velkommen til min blogg!" og legg til noe innhold inni det før du trykker på publiseringsknappen.

La oss nå vise innholdet på denne velkomstsiden på hjemmesiden. For å gjøre det, gå igjen til index.php fil og legg til følgende kodelinjer.

Her la jeg til en $ sammenheng array, innenfor som jeg la til et element welcome_page og brukte deretter get_post () funksjon for å hente siden jeg nettopp opprettet. For å gjøre det, sendte jeg inn siden ID, som er 4 i dette tilfellet.
Inne i welcome.twig fil, la oss print_r elementet welcome_page og se hvilke data vi får. Min welcome.twig-fil ser ut som dette for øyeblikket.
# Meldingsmal: 'welcome.twig' # 
 
 welcome_page | print_r 
 
Jeg kan bekrefte at dette elementet i $ context-arrayet nå har et TimberPost-objekt for den aktuelle siden med ID 4.
Herfra kan vi få alle egenskapene som kan vises på fronten. For eksempel vil jeg vise side tittel og innhold bare. Så nå min welcome.twig filen ser slik ut:
# Meldingsmal: 'welcome.twig' # 
 
welcome_page.title
 
welcome_page.content
 
 
Og hjemmesiden har den informasjonen vi trenger.
WordPress Cheatsheet
Som jeg sa tidligere, gir Timber deg noen praktiske konverteringer av WordPress-funksjonene. Disse funksjonene kan hjelpe deg med å få informasjon relatert til:
 
bloggen
 
Kroppsklasser
 
Topptekst bunntekst
 
 get_context () funksjon
Det er en Tømmer :: get_context () funksjon som henter masse nettstedinformasjon som en utvikler vil ønske å vise på forsiden over nettstedet. Dokumentasjonen forklarer slik:
Dette kommer til å returnere et objekt med mange av de vanlige tingene vi trenger over hele nettstedet. Ting som din nav, wp_head og wp_footer vil du starte med hver gang (selv om du skriver over dem senere). Du kan gjøre en $ context = Timber :: get_context (); print_r ($ kontekst); å se hva som er inne eller åpne timber.php å inspisere for deg selv.
Ikke bare dette, men du kan legge til dine egne tilpassede data til denne funksjonen via et praktisk filter.
Nedenfor finner du noen flere konverteringer som denne, som kan brukes sammen med Timber.
Blog Info
 
 blog_info ( 'CHARSET') => site.charset 
 
 blog_info ( 'beskrivelse') =>  beskrivelse av siden  
 
 blog_info ( 'sitename') =>  side navn  
 
 blog_info ( 'url') => site.url 
 
 Kroppsklasse
 implode (", get_body_class ()) =>  
 Tema
 
 get_template_directory_uri () => theme.link (for foreldre temaer)
 
 get_template_directory_uri () => theme.parent.link (for barn temaer)
 
 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 
 
La oss eksperimentere med noen få funksjoner, starter med bloggen. I stedet for foo, skrive  side navn . 
Front-end vil vise nettstedets tittel slik:
Timber har også noen funksjonskonverteringer for å vise innlegg og postrelatert informasjon via TimberPost (). Før jeg forklarer bruken av denne funksjonen, la vi liste opp funksjonskonverteringene som er relatert til den.
Post
 
 innholdet() => post.content 
 
 the_permalink () => post.permalink 
 
 tittelen() => post.title 
 
 get_the_tags () => post.tags 
 
bruk
Bruk denne koden i single.php fil.
La oss nå teste post.title fungere i vår Twig-fil.
 
post.title
 
 
Lagre det og frontendens vil vise posttittelen slik:
Din tur!
I dag har du opplevd den praktiske gjennomføringen av DRY-prinsippet med Timber and Twig, mens du bygger et WordPress-tema. Gå gjennom denne opplæringen og prøv å implementere den, og gi meg beskjed om eventuelle spørsmål du måtte ha. Du finner den komplette koden i WP Cheatsheet-grenen over i dette GitHub-depotet.
I den neste og siste artikkelen diskuterer jeg hvordan du håndterer bilder og menyer i en Twig-basert WordPress-mal. Til da, nå ut til meg på Twitter for å få svar på spørsmålene dine, eller skriv inn en her.



		
			
	   
	




Kode