În articolul precedent, am scris despre integrarea motorului de template-uri Twig cu WordPress prin cherestea și despre modul în care dezvoltatorii pot trimite date din fișierele PHP către fișierele Twig. Să discutăm cum să creați un șablon de bază cu Twig, avantajele acestei tehnici DRY și o Cheatsheet WordPress WordPress.

Crearea unui șablon de bază în Twig

Twig funcționează cu principiul DRY (Do not Repeat Yourself). Una dintre cele mai importante caracteristici ale lui Twig este bază templating cu cuibărit și moștenire multiple. În timp ce majoritatea oamenilor utilizează PHP include într-un mod liniar, puteți crea nivele infinite de blocuri imbricate pentru a controla în special șabloanele de pagină. 

Gândiți-vă la șablonul de bază ca șablon parental cu seturi de blocuri din interiorul acestuia. Un șablon copil poate extinde un șablon părinte și poate modifica orice bloc sau blocuri din interiorul lui fără a rescrie codul, ceea ce ar fi similar în ambele șabloane.

Să aruncăm o privire la un exemplu de șablon părinte sau de bază, a base.twig fişier. Puteți să-l așezați cu alte șabloane Twig în dosarul vizualizări. Apelați acest fișier în oricare dintre șabloanele dvs. Twig unde este folosit ca șablon parental pentru acel fișier în cazul în care este vorba de Twig. Introduceți următoarele linii de cod pentru a crea o  vizualizari pliant. Acest șablon de bază va oferi o structură de bază pentru tema WordPress. Iată codul simplu base.twig fişier.

#Baza de bază: base.twig # % block html_head_container% % include 'header.twig'% % endblock%  
 % conținutul blocului%  
SCUZE! Nu sa găsit niciun conținut!
 % endblock% 
  % include "footer.twig"%   

Comentarii în Twig: # Șablon de bază: base.twig #

Puteți scrie comentarii în Twig cu sintaxa # comment here #. Pentru a comenta o parte a unei linii dintr-un șablon, utilizați sintaxa de comentariu # ... #. Acest lucru este util pentru depanarea sau adăugarea de informații pentru ceilalți designeri de șabloane sau pentru tine. Puteți găsi un comentariu pe linia # 1.

blocuri: % block html_head_container% % endblock%

Întreaga filosofie a lui Twig și Timber se învârte în jurul abordării modulare a codului în WordPress. Am scris în repetate rânduri despre ideea că datele din Twig sunt tratate sub formă de componente sau blocuri. 

Blocurile sunt folosite pentru moștenire și acționează în același timp ca înlocuitori și substituenți. Acestea sunt documentate în detaliu în documentația pentru eticheta extends.

% block add_block_name_here% Blochează conținutul aici % endblock%

În codul de mai sus, puteți găsi un bloc numit html_head_container care se întinde pe linia # 3 la linia # 7. Orice șablon care extinde acest șablon de bază base.twig poate moșteni conținutul aceluiași bloc sau îl puteți modifica pentru a adăuga altceva. Există un alt bloc numit conținut % conținutul blocului% la care se întinde linia # 13 la linia # 18.

În mod similar, conceptul de a crea blocuri este extins în continuare în cazul în care puteți crea niveluri infinite de blocuri imbricate, de asemenea. Acesta este adevăratul principiu DRY.

Includeți declarația: % include "header.twig"% 

Șabloanele Twig pot include și alte șabloane Twig, la fel ca în PHP. Acest base.twig fișierul va fi un pachet general și este incomplet fără el antet și subsol fișiere. Prin urmare, sintaxa % includ "file.twig"% ne va ajuta să includem două șabloane Twig diferite:

• Șablonul antetului % include "header.twig"% pe linia # 5.
• Șablonul subsol (% include "footer.twig"% pe linia # 23.

Extinderea șablonului de bază

Am creat a base.twig fișier ca șablon parental și lăsat blocul de conținut gol. Acest bloc poate fi utilizat în interiorul oricăror fișiere Twig personalizate, care îl vor modifica, iar restul șablonului de bază va fi moștenit ca atare. De exemplu, să creați o single.twig fișier care va extinde șablonul base.twig și va modifica conţinut bloc.

# Șablonul unic: 'single.twig' # % extinde "base.twig"% % conținut bloc% 
 
post.title
 
post.get_content
 
 % endblock% 

Acest cod arată un personalizat single.twig fişier. Pe linia # 3, acest șablon se extinde la base.twig ca șablon parental sau de bază. extinde tag-ul poate fi folosit pentru a extinde un șablon de la altul.

Aici, toate detaliile legate de antet și subsol sunt moștenite de la base.twig fișier, care este șablonul părinte, în timp ce conţinut bloc va fi înlocuit cu titlul postului și conținutul. Cât de distractiv este asta?

WordPress CheatSheet pentru cherestea

Dezvoltatorii de cherestea s-au asigurat că completează WordPress în orice mod posibil, de la nucleu la utilizatorii finali. Deși sintaxa de conversie a funcțiilor WordPress în cherestea este oarecum diferită, este destul de bine documentată. Spre sfârșitul acestui articol, voi distribui o listă a conversiilor pentru funcțiile WordPress și echivalentele lor pentru lemn. Să recapitulăm.

Scurtă recapitulare!

În articolul meu anterior, am creat un mesaj de întâmpinare care a populat pur și simplu printr-un șir PHP pe pagina de pornire a site-ului meu demo. Codul pentru acest lucru poate fi găsit în filiala sa de pe GitHub. Să repetăm ​​această procedură încă o dată, dar cu o abordare diferită și mai tehnică.

În momentul de față, voi afișa același mesaj de întâmpinare, dar de data aceasta, prin crearea unei noi pagini care se găsește pe pagina principală.  

Preluarea funcțiilor WordPress în Twig

Creați o pagină nouă cu titlul "Bine ați venit pe Blogul meu!" și adăugați conținut în interiorul acestuia înainte de a lovi butonul de publicare.

Acum, să afișăm conținutul acestei pagini de bun venit pe pagina de pornire. Pentru a face acest lucru, du-te din nou la index.php fișier și adăugați următoarele rânduri de cod.

Aici, am adăugat a $ context array, în interiorul căruia am adăugat un element welcome_page și apoi a folosit get_post () pentru a prelua pagina pe care tocmai am creat-o. Pentru a face acest lucru, am trimis ID-ul paginii, care este 4 în acest caz.
În interiorul welcome.twig dosar, haideți print_r elementul welcome_page și să vedem ce date obținem. Fișierul meu welcome.twig arată în acest moment.
# Template mesaj: 'welcome.twig' # 
 
 welcome_page | print_r 
 
Pot confirma că acest element din contextul $ context are acum un obiect TimberPost pentru acea pagină specială cu ID 4.
De aici, putem obține toate proprietățile care pot fi afișate pe front-end. De exemplu, vreau să afișez titlul paginii și conţinut numai. Deci, acum welcome.twig fișierul arată astfel:
# Template mesaj: 'welcome.twig' # 
 
welcome_page.title
 
welcome_page.content
 
 
Iar pagina de pornire are informațiile de care avem nevoie.
Wordpress Cheatsheet
După cum am spus mai devreme, Timber vă oferă câteva conversii la îndemână ale funcțiilor WordPress. Aceste funcții vă pot ajuta să obțineți informații referitoare la:
 
Blog
 
Cursuri corporale
 
Antet / Subsol
 
 get_context () funcţie
Este un Cherestea :: get_context () care returnează sarcini de informații despre site-ul pe care un dezvoltator ar dori să le afișeze pe front-end pe site. Documentația explică astfel:
Aceasta va reveni la un obiect cu multe lucruri comune de care avem nevoie pe site. Lucruri precum navul dvs., wp_head și wp_footer, veți dori să începeți de fiecare dată (chiar dacă le scrieți mai târziu). Puteți face a $ context = Cherestea :: get_context (); print_r (contextul $); pentru a vedea ce este în interior sau deschis timber.php pentru a vă inspecta.
Nu numai acest lucru, dar puteți adăuga propriile date personalizate la această funcție printr-un filtru util.
Mai jos puteți găsi alte câteva conversii ca acesta, care pot fi utilizate cu cherestea.
Blog Info
 
 blog_info ( 'charset') => site.charset 
 
 blog_info ( 'descriere') =>  Descrierea siteului  
 
 blog_info ( 'numesite') =>  Numele site-ului  
 
 blog_info ( 'url') =>  Adresa paginii  
 
 Clasa corpului
 implode (", get_body_class ()) =>  
 Temă
 
 get_template_directory_uri () => theme.link (pentru temele părintești)
 
 get_template_directory_uri () => theme.parent.link (pentru teme pentru copii)
 
 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 
 
Să experimentăm câteva funcții, începând cu informațiile din blog. In locul foo, scrie  Numele site-ului . 
Front-end-ul va afișa titlul site-ului astfel:
Timbrul are, de asemenea, unele conversii de funcții pentru a afișa posturile și informații post-legate prin TimberPost (). Înainte de a explica utilizarea acestei funcții, să enumerăm conversiile funcțiilor legate de aceasta.
Post
 
 continutul() => post.content 
 
 the_permalink () => post.permalink 
 
 titlul() => post.title 
 
 get_the_tags () => post.tags 
 
folosire
Utilizați acest cod în single.php fişier.
Acum, să testați post.title funcționează în interiorul fișierului Twig.
 
post.title
 
 
Salvați-l și partea frontală va afișa titlul postului astfel:
Randul tau!
Astăzi, ați fost martori la implementarea practică a principiului DRY cu Timber și Twig construind o temă WordPress. Mergeți prin acest tutorial și încercați să îl implementați și anunțați-ne despre eventualele întrebări pe care le puteți avea. Puteți găsi codul complet în sucursala WP Cheatsheet în acest depozit GitHub.
În următorul articol și în ultimul articol, voi discuta despre modul de gestionare a imaginilor și a meniurilor într-un șablon WordPress bazat pe Twig. Până atunci, contactați-mă pe Twitter pentru a primi răspunsuri la întrebările dvs. sau postați unul aici.



		
			
	   
	




Cod