I den föregående artikeln skrev jag om att integrera Twig-templeringsmotorn med WordPress via Timber och hur utvecklare kan skicka data från PHP-filerna till Twig-filerna. Låt oss diskutera hur man skapar en basmall med Twig, fördelarna med denna DRY-teknik och ett Timber-Twig WordPress Cheatsheet.

Skapa en basmall i twig

Twig arbetar med DRY (Do not Repeat Yourself) principen. En av Twigs viktigaste funktioner är basmattning med nestning och flera arv. Medan de flesta använder PHP innehåller linjärt, kan du skapa oändliga nivåer av kapslade block för att särskilt styra dina sidmallar. 

Tänk på din basmall som föräldermall med uppsättningar av block inuti den. En barnmall kan förlänga en modermall och ändra block eller block från insidan utan att skriva om koden, vilket skulle vara lika i båda mallarna.

Låt oss ta en titt på ett exempel förälder eller basmall, a base.twig fil. Du kan placera den med andra Twig-mallar i visningsmappen. Du ringer den här filen i någon av dina Twig-mallar där den används som föräldermall för den specifika Twig-filen. Skriv följande linjer kod för att skapa en  visningar mapp. Denna basmall ger en basstruktur för ditt WordPress-tema. Här är koden till en enkel base.twig fil.

# Basmall: base.twig # % block html_head_container% % include 'header.twig'% % endblock%  
 % block content%  
FÖRLÅT! Inget innehåll hittades!
 % endblock% 
  % inkluderar "footer.twig"%   

Kommentarer i Twig: # Basmall: base.twig #

Du kan skriva kommentarer i Twig med # comment here # syntax. Om du vill kommentera del av en rad i en mall använder du kommentarsyntaxen # ... #. Det här är användbart för felsökning eller för att lägga till information för andra malldesigners eller dig själv. Du kan hitta en kommentar på rad # 1.

block: % block html_head_container% % endblock%

Hela filosofin om Twig och Timber kretsar kring den modulära kodmetoden i WordPress. Jag har upprepade gånger skrivit om tanken att data i Twig hanteras i form av komponenter eller block. 

Block används för arv och fungerar som platshållare och ersättare samtidigt. De dokumenteras i detalj i dokumentationen för den utvidgade taggen.

% block add_block_name_here% Blockerar innehåll här % endblock%

I den ovan skrivna koden kan du hitta ett block som heter html_head_container som sträcker sig linje # 3 till rad # 7. Alla mallar som utökar denna bas.twig-basmall kan antingen erhålla samma blockets innehåll eller ändra det för att lägga till något annat. Det finns ett annat block som heter innehåll % block content% vid vilken sträcker sig linje # 13 till linje # 18.

På samma sätt utvidgas konceptet att skapa block ytterligare där du också kan skapa oändliga nivåer av kapslade block. Detta är den sanna DRY-principen.

Inkludera uttalande: % inkluderar "header.twig"% 

Twig-mallar kan inkludera andra Twig-mallar, precis som vi gör det i PHP. Detta base.twig filen kommer att bli en allmän omslag, och den är ofullständig utan dess rubrik och sidfot filer. Därför är syntaxen % inkluderar "file.twig"% hjälper oss att inkludera två olika Twig-mallar:

• Rubrikmallen % inkluderar "header.twig"% på rad # 5.
• Footer-mallen (% inkluderar "footer.twig"% på rad # 23.

Utöka basmallen

Vi skapade en base.twig filen som föräldermall och lämnade innehållsblocket tomt. Detta block kan användas inuti alla anpassade Twig-filer som skulle modifiera det, och resten av basmallen kommer att vara ärvd som den är. Till exempel, låt oss skapa en single.twig fil som kommer att förlänga bas.twig mallen och kommer att ändra innehåll blockera.

# Enda mall: 'single.twig' # % sträcker sig "base.twig"% % block content% 
 
 Post titel 
 
post.get_content
 
 % endblock% 

Denna kod visar en anpassad single.twig fil. På rad # 3 sträcker sig denna mall till base.twig som sin förälder eller basmall. De sträcker tagg kan användas för att förlänga en mall från en annan.

Här är alla detaljer relaterade till rubrik och sidfot ärvda från base.twig fil, som är modermallen, medan innehåll block kommer att ersättas med posttitel och innehåll. Hur mycket kul är det?

WordPress CheatSheet för Timber

Utvecklarna av Timber har försäkrat sig om att det kompletterar WordPress på alla möjliga sätt från kärnan till slutanvändarna. Även om konverteringssyntaxen för WordPress-funktionerna i Timber är något annorlunda, är den ganska väl dokumenterad. Mot slutet av denna artikel delar jag en lista över några av konverteringarna för WordPress-funktionerna och deras Timber-ekvivalenter. Låt oss sammanfatta.

Kort sammanfattning!

I min tidigare artikel skapade jag ett välkomstmeddelande som bara fylldes via en PHP-sträng på hemsidan för min demo-hemsida. Koden för detta finns i sin filial på GitHub. Låt oss upprepa denna procedur än en gång men med ett annat och mer tekniskt tillvägagångssätt.

Just nu visar jag samma välkomstmeddelande men den här gången via att skapa en ny sida som fyller på hemsidan.  

Hämtar WordPress-funktioner i Twig

Skapa en ny sida med titeln "Welcome to My Blog!" och lägg till lite innehåll innanför det innan du trycker på publicera-knappen.

Låt oss nu visa innehållet på denna välkomstsida på hemsidan. För att göra det, gå igen till index.php fil och lägg till följande rad kod.

Här lade jag till en $ sammanhang array, inuti vilket jag lade till ett element welcome_page och använde sedan get_post () funktion för att hämta den sida som jag just skapat. För att göra så skickade jag sidans ID, vilket är 4 i det här fallet.
Inuti welcome.twig fil, låt oss print_r elementet welcome_page och se vilka data vi får. Min welcome.twig-fil ser ut så här just nu.
# Meddelandemall: 'welcome.twig' # 
 
 welcome_page | print_r 
 
Jag kan bekräfta att detta element i $ context-arrayen nu har ett TimberPost-objekt för den specifika sidan med ID 4.
Härifrån kan vi få alla egenskaper som kan visas på framsidan. Till exempel vill jag visa sidans titel och innehåll endast. Så nu min welcome.twig filen ser så här ut:
# Meddelandemall: 'welcome.twig' # 
 
welcome_page.title
 
welcome_page.content
 
 
Och hemsidan har den information vi behöver.
WordPress Cheatsheet
Som jag sa tidigare ger Timber dig några praktiska konverteringar av WordPress-funktionerna. Dessa funktioner kan hjälpa dig att få information relaterad till:
 
blogg
 
Kroppsklasser
 
Sidhuvud / sidfot
 
 get_context () fungera
Det finns en Timmer :: get_context () funktion som hämtar massor av webbplatsinformation som en utvecklare skulle vilja visa på fronten över webbplatsen. Dokumentationen förklarar så här:
Detta kommer att returnera ett objekt med många av de vanliga sakerna vi behöver på hela webbplatsen. Saker som din nav, wp_head och wp_footer du vill börja med varje gång (även om du skriver över dem senare). Du kan göra en $ context = Timber :: get_context (); print_r ($ context); för att se vad som är inuti eller öppet timber.php att inspektera för dig själv.
Inte bara detta men du kan lägga till egna anpassade data till den här funktionen via ett praktiskt filter.
Nedan hittar du några fler omvandlingar som den här, som kan användas med Timber.
Blog Info
 
 blog_info ( 'charset') => site.charset 
 
 blog_info ( 'beskrivning') => site.description 
 
 blog_info ( 'sitename') =>  sidnamn  
 
 blog_info ( 'webbadress') => site.url 
 
 Kroppsklass
 implodera (", get_body_class ()) =>  
 Tema
 
 get_template_directory_uri () => theme.link (för överordnade teman)
 
 get_template_directory_uri () => theme.parent.link (för barnteman)
 
 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 
 
Låt oss experimentera med några funktioner, börja med blogginformationen. Istället för foo, skriva  sidnamn . 
Framsidan visar webbplatsens titel så här:
Timber har också några funktionskonverteringar för att visa inlägg och postrelaterad information via TimberPost (). Innan jag förklarar användningen av denna funktion, låt oss lista de funktionsomvandlingar som är relaterade till den.
Posta
 
 innehållet() => post.content 
 
 the_permalink () => post.permalink 
 
 titeln() =>  Post titel  
 
 get_the_tags () => post.tags 
 
Användande
Använd den här koden i single.php fil.
Nu ska vi testa  Post titel  funktionen i vår Twig-fil.
 
 Post titel 
 
 
Spara det och fronten kommer att visa posttiteln så här:
Din tur!
Idag såg du det praktiska genomförandet av DRY-principen med Timber and Twig, medan du byggde ett WordPress-tema. Gå igenom den här handledningen och försök att genomföra den, och meddela mig om eventuella frågor du kanske har. Du hittar den fullständiga koden i WP Cheatsheet-filialen över i det här GitHub-arkivet.
I nästa och sista artikeln kommer jag att diskutera hur man hanterar bilder och menyer i en Twig-baserad WordPress-mall. Till dess, ta reda på mig på Twitter för att få dina frågor besvarade eller skicka en här.



		
			
	   
	




Koda