Până acum ați citit despre conceptele de bază ale folosirii lui Twig prin intermediul lemnului, în timp ce construim o temă modulară WordPress. Am studiat, de asemenea, blocarea cuiburilor și moștenirea multiplă cu Twig, pe baza principiului DRY. Astăzi, vom explora modul de afișare a imaginilor atașate, a meniurilor WordPress și a utilizatorilor într-o temă cu Twig prin pluginul Timer.

Imagini în lemn

Imaginile sunt unul dintre elementele vitale pentru orice temă WordPress. În practicile obișnuite de codificare WordPress, imaginile sunt integrate cu PHP în interiorul tagurilor HTML normale. Cu toate acestea, cherestea oferă o modalitate destul de cuprinzătoare de a manipula img (imagine), care este modulară și curată.

Sunt atașate imagini în câmpul miniatural al postării. Acestea pot fi recuperate cu ușurință prin fișierele Twig de către post.thumbnail. Este chiar atât de ușor!

folosire

Să începem cu un exemplu practic. Al nostru single.php fișierul arată astfel:

Aici, am folosit-o TimberPost () pentru motive destul de evidente. Acest lucru este folosit în întreaga cherestea pentru a reprezenta posturile preluate din WordPress, făcându-le disponibile pentru șabloanele Twig.
Deoarece imaginea recomandată este atașată la datele de post, acum trebuie să o preluăm pe front. Deci, dosarul Twig pentru asta, single.twig, va arata astfel:
# Sinlge Template: 'single.twig' # % extinde "base.twig"% % conținut bloc%% 
  
 % endblock% 
Pe linia # 9 codul post.thumbnail.src preia imaginea (thumbnail) a postului și o afișează astfel:
Puteți utiliza această sintaxă de cod pentru a prelua cât mai multe imagini miniatură dorite.
Există încă mult mai multe pe care le puteți experimenta cu aceste imagini atunci când utilizați cherestea. De exemplu, le puteți redimensiona și prin:
 
Prin utilizarea funcției redimensionarea (), , puteți adăuga noi dimensiuni imaginii în care este primul parametru lăţime iar al doilea este înălţime. Dacă doriți să reduceți proporțional imaginea, atunci omiteți imaginea înălţime atribut. Acum sintaxa devine:
Front-end-ul afișează aceeași imagine ca aceasta:
Dacă doriți să explorați mai multe, încercați apoi agenda de bucate.
Utilizarea TimberImage () 
Luați în considerare un scenariu în care un dezvoltator dorește să preia imagini prin ID-ul imaginii sau dorește să afișeze o imagine externă prin URL etc. Pentru o astfel de abordare extinsă, Timber oferă o clasă, TimberImage (), pentru a reprezenta imaginile recuperate din WordPress.
folosire
Să luăm un exemplu pentru noi single.php fișier, care arată astfel:
De data aceasta, eu folosesc TimberImage () clasa care ia ID-ul imaginii 8 ca parametru. Restul rutinei de codare este la fel. Să recuperăm această imagine prin fișierul Twig single.twig.
 
Valoarea stocată în interior $ context elementul custom_img, adică. custom_img, va prelua imaginea prin ID-ul său pentru a fi afișată pe capătul din față, astfel:
Pentru a prelua imaginea printr-o înlocuire externă a adresei URL, puteți urma această sintaxă.
 
De data aceasta, în loc de ID-ul imaginii, există o adresă URL de imagine externă care este afișată pe front, astfel:
Pentru a explora unele caracteristici suplimentare ale acestei funcții, puteți verifica documentația.
Meniuri în cherestea
Acum, cum ai face să faci un meniu WordPress cu șabloane Twig? E un lucru dificil de făcut. Dar, țineți-vă! Cheresteaua vă oferă TimberMenu () clasa, care vă poate ajuta să redenumiți meniurile WordPress din interiorul fișierelor Twig ca o bucla completă. Să aruncăm o privire la ea. 
folosire
Întregul concept de preluare a elementelor din meniu se învârte în jurul valorii de meniul obiect. Există două modalități de definire a contextului său. Primul este de a face obiectul meniului disponibil pe fiecare pagină prin adăugarea lui la funcția globală get_context (), așa cum am făcut în functions.php fişier. În al doilea rând, puteți adăuga un anumit meniu prin ID-ul său pentru un anumit șablon PHP.
Indiferent de cele două metode, odată ce meniul devine disponibil cherestelei $ context array, puteți prelua toate elementele de meniu din acesta. Dar prefer să o definim la nivel global. Deci du-te la functions.php introduceți și lipiți următorul cod:
Deci, aici am definit un apel personalizat add_to_context. În interiorul acestei funcții există unele date pe care vreau să le pun la dispoziție la fiecare șablon PHP prin get_context () funcţie. Pe linia # 13 puteți găsi o instanță de TimberMenu () fiind trecut peste meniul de elemente din $ date mulțime. 
Acest lucru va face ca un meniu standard WordPress să fie disponibil pentru șablonul Twig ca obiect pe care îl putem face. TimberMenu () funcția poate lua parametri precum meniul slug sau ID-ul.
Să creăm un șablon Twig numit menu.twig fişier.
# Template pentru meniuri: 'menu.twig' #  
Codul de mai sus rulează o buclă în interiorul acestui șablon Twig. Linia # 5 rulează a pentru buclă pentru fiecare element de meniu și afișează titlul fiecărui meniu articol într-o listă neordonată. Buclele rulează până la toate perechile cheie-valori ale lui meniul obiect sunt iterate și listate pe front-end.
M-am dus și am inclus menu.twig șablon în base.twig șablon pe linia # 11.
#Baza de bază: "base.twig" # % block html_head_container% % include 'header.twig'% % endblock%  % include "meniu.twig"% 
 % conținutul blocului%  
SCUZE! Nu sa găsit niciun conținut!
 % endblock% 
  % include "footer.twig"%   
Să examinăm back-end-ul (Aspect> Meniuri) din site-ul meu demo, unde meniul său conține două elemente părinte și un element copil. 
Deci, să aruncăm o privire la o pagină de post - de la noi single.twig extinde base.twig, meniul nostru va apărea în mod automat pe acea pagină.
Puteți vedea că în partea de sus a postului nostru unic există un meniu cu ambele elemente părinte din interiorul acestuia. 
Cum rămâne cu elementele din meniul pentru copii? Să ne actualizăm menu.twig fișier pentru a include și elementele copilului.
# Template pentru meniuri: 'menu.twig' #  
Liniile 9-23 tipăresc elementele meniului pentru copii, dacă există. De data aceasta, partea frontală afișează elementul copil al primului nostru părinte.
Pentru mai multe detalii despre TimberMenu (), verificați documentația.
Utilizatorii din lemn
Utilizatorii pot fi preluați din baza de date WordPress cu TimberUser () clasă. Clasa ia ID-ul utilizator sau argou ca argumente pentru a prelua utilizatorul.
Întrucât utilizatorii sau autorii blogului sunt asociați cu posturile WP, voi folosi codul single.php, care arată acum:
Linia # 20 inițializează TimberUser () și devine atribuit unui element obiect context, adică. utilizator. Să afișăm numele autorului prin intermediul șablonului Twig.
Șablonul single.twig are o linie nouă de cod la sfârșitul liniei # 21.
# Sinlge Template: 'single.twig' # % extinde "base.twig"% % conținut bloc%% 
  #  # #  # #  # 
post.title
 
post.get_content
 
Autor: user 
 
 % endblock% 
Codul preia numele autorului mesajului curent și îl afișează pe front-end. Poți să folosești utilizator | print_r pentru a vedea ce altceva este disponibil în obiectul TimberUser. 
Pentru a citi mai multe despre această clasă, consultați documentația. Puteți găsi codul acestui tutorial în repo GitHub pe ramura ImagesMenusUsers.
Concluzie
Acest articol împachetează întreaga serie. Pe parcursul acestor patru articole, am explorat modul de utilizare a lemnului pentru integrarea limbajului templului Twig într-o temă WordPress. 
Depozitul final pentru această serie poate fi găsit pe GitHub cu secțiuni specifice tutorialului:
 
Tutorial # 2: Noțiuni de bază
 
Tutorial # 3: WordPress Cheatsheet
 
Tutorial # 4: TimberImages, TimberMenu & TimberUser
 
Puteți consulta documentația online a cherestelei pentru mai multe informații.
Treceți prin această întreagă serie și implementați toate exemplele explicate și pariez că vă veți bucura de Twig. Postați-vă interogările în caseta de comentarii de mai jos. Puteți să mă contactați și pe Twitter.



		
			
	   
	




Cod