Accentsconagua

Kick-Start Dezvoltare WordPress cu Twig Noțiuni de bază

Cod
Share

Acum înțelegem că Twig - împreună cu pluginul WordPress Timber-poate ajuta dezvoltatorii să scrie coduri modulare în timp ce dezvoltă teme WordPress. Cu o astfel de abordare modulară, puteți trata separat logica și stratul vizual al aplicației dvs. web. Să trecem la lucruri puțin mai tehnice: crearea șabloanelor Twig, conversia fișierelor HTML în fișierele Twig și modul de redare a logicii sau a datelor cu șabloanele.

Instalați cherestea

Mai întâi de toate, am de gând să instalez Timber, un plugin WordPress care ajută la integrarea motorului de template-uri Twig cu WP. Deci hai sa o facem.

  • Conectați-vă la tabloul de bord WordPress.
  • Mergi la Plugin-uri> Adăugați noi.
  • Căutați pluginul Timber.
  • Instalați și activați pluginul.

Odată ce ați instalat cherestea, puteți începe să vă despărțiți fișierele șablon date și vedere fișiere.

Crearea unui șablon Twig

Înainte de a începe să creăm șabloane Twig, presupun că aveți un fel de configurare locală WordPress. Pentru acest tutorial special, setarea mea este:

  • O instalare locală WP (folosesc DesktopServer by ServerPress).
  • Pluginul Timber este instalat și activat.
  • Opțional: orice temă de bază / starter (folosesc propria mea, adică Neat).

UpStatement a construit, de asemenea, o tematică pentru începători.

Sa incepem. Vreau să afișez un mesaj de bun venit în partea de sus a paginii mele de start. Cum aș merge fără Twig? Probabil, aș include cod HTML în fișierul PHP și echo mesajul de întâmpinare, așa cum am făcut în exemplul de cod de mai jos. Mele index.php fișierul arată așa.

Acum, pagina de pornire a instalării mele WordPress locale afișează un mesaj de întâmpinare chiar în partea de sus. Iată captura de ecran.

Problemă

Problema cu această abordare este aceea că amestecăm datele / logica cu vederea. Cu cât este mai complex acest fișier, cu atât mai greu este să vă mențineți să înțelegeți - de exemplu, dacă adăugați bucla WordPress după acest cod cu câteva argumente și apoi filtrați și paginarea după aceea. Adăugați la aceasta, PHP în interiorul HTML nu arată bine atunci când ați terminat cu un pic de logică.

Abordarea modulară

Pentru ao face mai modulară, ne putem gândi la conținutul nostru pe pagina principală sub formă de blocuri sau componente. În mod implicit, pot fi două complete, adică Posts from The_Loop și paginare. Din moment ce dorim să adăugăm o altă componentă în partea de sus, adică mesajul de bun venit, să creăm un fișier Twig pentru acea componentă. 

Deschideți un nou fișier gol în editor și copiați următoarele linii de cod.

 
 
Bine ați venit pe site-ul meu!

Creați un nou director în rădăcina temei numită vizualizari și salvați acest fișier cu  .crenguţă extensie. De exemplu, am salvat fișierul ca welcome.twig.

Realizați șablonul Twig

Cherestea ne oferă câteva funcții utile, dintre care una este funcția de randare. Puteți să-l numiți astfel:

Cherestea :: render ();

Această funcție poate necesita până la patru argumente. Din moment ce acest lucru este în afara sferei de aplicare a acestui articol, puteți citi despre el în docs Timber. Putem trece numele oricărui fișier Twig care este prezent în vizualizari dosarul temei dvs. la această funcție.

Să trimitem mesajul de bun venit în index.php fişier.

Cherestea face welcome.twig fișierul, încarcă codul HTML și afișează noul strat de vizualizare modificat la front-end, astfel: 
 face() funcționează welcome.twig ca argument, dar citește în mod automat acest fișier, atâta timp cât șabloanele ramase locuiesc în interiorul directorului numit vizualizari. 
Dacă doriți să utilizați un nume / cale personalizată pentru folder, atunci va trebui să furnizați calea acelui director. De exemplu, am creat un dosar în rădăcina temei mele și l-am adăugat la argumentul funcției de redare.
Ordinul oficial de încărcare
Cherestea va arăta mai întâi în tema copilului și apoi va reveni la tema părinte (la fel ca logica WordPress). Ordinea oficială de încărcare este:
     
  1. Locații definite de utilizator
    2.  
  2. Directorul de apelare script PHP (dar nu tema)
    3.  
  3. Tema copilului
    4.  
  4. Temă tematică
    5.  
  5. Directorul de apelare script PHP (inclusiv tema)
    6.  
Poziția 2 este inserată mai sus, astfel încât dacă utilizați cherestea într-un plugin, acesta va folosi fișierele în directorul plugin-ului.
Deci, acum fișierul index.php nu are niciun HTML în interiorul acestuia și redă un șablon Twig.
Acum, să trimitem date dinamice index.php la welcome.twig fișier și să-l facă cu cherestea.
Trimiterea datelor prin intermediul lemnului către fișierele Twig
Pentru a trimite date din fișierul PHP la fișierul Twig, trebuie să definiți un tablou de context. Funcția de redare are nevoie de o serie de date pentru a furniza șabloanele Twig cu un anumit tip de context. Să chemăm matricea  $ context, care este o matrice asociativă, adică ocupă perechile cheie-valoare. 
Să adăugăm o pereche cheie-valoare care ar fi un mesaj dinamic de întâmpinare, pe care fișierul nostru PHP l-ar trimite la fișierul Twig.
Fișier de date
Mele index.php fișierul arată acum.
Deci, în interiorul index.php fișier, am definit un gol $ context array la linia # 8. Apoi, la linia # 11, am creat o variabilă $ var cu valoarea "Mesaj dinamic". La linia # 14, am creat o cheie mesajul care este egal cu $ var.
La linia # 17, am apelat funcția de randare cu welcome.twig fișier, dar de data aceasta, este nevoie de un argument suplimentar, adică de $ context matrice. Acest nou argument are de fapt datele pe care Timber le va trimite de la fișierul PHP la fișierul Twig.
Deci, am definit matricea de context și am adăugat un mesaj dinamic (puteți afișa un mesaj diferit utilizatorilor diferiți prin adăugarea unui fel de logică la acesta, ca și afișarea primului nume al utilizatorului curent). 
Fișier de șabloane
Acum trebuie să folosim aceste date, adică. mesajul, în fișierul Twig. Putem reconecta o variabilă în interiorul șablonului Twig, punându-ne în jurul lui două bretele. De exemplu, pentru a echivala $ var într-un fișier răsucite, putem scrie var. Exact asta am făcut.
 
 
 mesajul 
 
 
Valoarea a mesajul vor fi tipărite în interiorul etichetelor h2. Știu, este simplu și codul pare destul de curat. 
Asta e! Salvați codul și vizualizați mesajul dinamic de întâmpinare de la front-end. Iată captura de ecran finală.
Concluzie
Pentru a rezuma, acum puteți folosi fișierul PHP pentru codarea logicii și furnizarea de date unui șablon Twig care conține HTML și redă variabilele Twig sau funcțiile din interiorul bretelelor duble.
Această abordare modulară poate duce la un fișier șablon separat pentru fiecare componentă din tema WordPress. Gândiți-vă la a avea o componentă message.twig pe care o puteți folosi oriunde în temă pentru a afișa orice mesaj doriți, ori de câte ori. 
Aceasta a fost o implementare de bază a lui Twig cu cherestea. Cu toate acestea, în următoarele două articole voi scrie despre Timpul WordPress Cheatsheet, gestionarea imaginilor cu Timber și crearea de meniuri fără a utiliza funcția nebun Walker.
Dacă aveți întrebări, postați-le în comentariile de mai jos sau contactați Twitter. De asemenea, puteți să vă uitați la codul temei la acest replică GitHub.





	
	
			
	   
	







Cod
×