Ormai hai letto i concetti di base dell'utilizzo di Twig through Timber, mentre costruisci un tema WordPress modulare. Abbiamo anche studiato la nidificazione dei blocchi e l'ereditarietà multipla con Twig, basata sul principio DRY. Oggi, esploreremo come visualizzare immagini di allegati, menu WordPress e utenti in un tema con Twig tramite il plugin Timber.

Immagini in legno

Le immagini sono uno degli elementi vitali per qualsiasi tema WordPress. Nelle normali pratiche di codifica di WordPress, le immagini sono integrate con PHP all'interno dei normali tag immagine HTML. Tuttavia, Timber offre un modo abbastanza completo di gestire il img (immagine) tag che è modulare e pulito.

Ci sono immagini allegate al campo delle miniature del post. Questi possono essere facilmente recuperati tramite i file Twig di post.thumbnail. È così facile!

uso

Iniziamo con un esempio pratico. Nostro single.php il file assomiglia a questo:

Ecco, ho usato il TimberPost () funzione per ragioni abbastanza ovvie. Questo è usato in tutto il legname per rappresentare i post recuperati da WordPress, rendendoli disponibili ai modelli Twig.
Poiché l'immagine in primo piano è allegata ai dati del post, ora dobbiamo recuperarla sul front-end. Quindi il file Twig per questo, single.twig, sarà simile a questo:
# Sinlge Template: 'single.twig' # % estende "base.twig"% % block content% 
  
 % endblock% 
Sulla linea # 9 il codice post.thumbnail.src recupera l'immagine in primo piano (miniatura) del post e la visualizza in questo modo:
È possibile utilizzare questa sintassi del codice per recuperare tutte le immagini di anteprima desiderate.
C'è ancora molto di più su cui puoi sperimentare queste immagini quando usi Timber. Ad esempio, puoi anche ridimensionarli tramite:
 
Usando il ridimensionare (), funzione, è possibile aggiungere nuove dimensioni all'immagine in cui si trova il primo parametro larghezza e il secondo è altezza. Se si desidera ridimensionare l'immagine in modo proporzionale, omettere il altezza attributo. Ora la sintassi diventa:
Il front-end mostra la stessa immagine in questo modo:
Se vuoi saperne di più, prova il ricettario immagini.
utilizzando TimberImage () 
Considera uno scenario in cui uno sviluppatore desidera recuperare le immagini tramite l'ID immagine o desidera visualizzare un'immagine esterna tramite URL, ecc. Per un approccio così esteso, Timber offre una classe, TimberImage (), per rappresentare le immagini che vengono recuperate da WordPress.
uso
Facciamo un esempio per il nostro single.php file, che assomiglia a questo ora:
Questa volta, sto usando il TimberImage () classe che prende l'ID dell'immagine 8 come il suo parametro. Il resto della routine di codifica è lo stesso. Recuperiamo questa immagine tramite il file Twig single.twig.
 
Il valore memorizzato all'interno $ contesto elemento custom_img, ad es. custom_img, recupererà l'immagine tramite il suo ID per visualizzare sul front-end in questo modo:
Per recuperare l'immagine tramite un URL esterno sostituisci puoi seguire questa sintassi.
 
Questa volta, invece dell'ID immagine, c'è un URL immagine esterno che viene visualizzato sul front-end in questo modo:
Per esplorare alcune funzionalità aggiuntive di questa funzione, è possibile consultare la documentazione.
Menu in legno
Ora, come andresti sul rendering di un menu WordPress con i modelli Twig? Questa è una cosa complicata da fare. Ma aspetta! Il legname ti fornisce il suo TimberMenu () classe, che può aiutarti a rendere i menu WordPress all'interno dei file Twig come un ciclo completo. Diamo un'occhiata a questo. 
uso
L'intero concetto di recupero degli elementi del menu ruota attorno al oggetto del menu. Ci sono due modi per definire il suo contesto. Il primo è rendere l'oggetto menu disponibile su ogni pagina aggiungendolo alla funzione globale get_context (), come ho fatto nel functions.php file. In secondo luogo, puoi aggiungere un particolare menu con il suo ID per un particolare modello PHP.
Indipendentemente dai due metodi, una volta che il menu diventa disponibile per il legname $ contesto array, è possibile recuperare tutte le voci di menu da esso. Ma preferisco definirlo a livello globale. Quindi vai al functions.php file e incolla il seguente codice:
Quindi, qui ho definito una chiamata di funzione personalizzata add_to_context. All'interno di questa funzione ci sono alcuni dati che voglio essere disponibili in ogni modello PHP tramite GET_CONTEXT () funzione. Alla riga # 13 puoi trovare un'istanza di TimberMenu () essere passati contro il menu degli elementi nel $ data schieramento. 
Ciò renderà disponibile un menu WordPress standard al modello Twig come un oggetto che possiamo scorrere. Il TimberMenu () la funzione può assumere parametri come il menu slug o l'ID.
Creiamo un modello Twig chiamato menu.twig file.
# Menu Template: 'menu.twig' #  
Il codice precedente esegue un ciclo all'interno di questo modello Twig. La linea n. 5 esegue a per loop per ogni voce di menu e visualizza il titolo di ogni menu articolo in una lista non ordinata. Il ciclo si estende fino a tutte le coppie chiave-valore di menu oggetto sono iterati e elencati sul front-end.
Sono andato avanti e incluso il menu.twig modello nel base.twig template on line # 11.
# Base Template: 'base.twig' # % block html_head_container% % include 'header.twig'% % endblock%  % include "menu.twig"% 
 % block content%  
SPIACENTE! Nessun contenuto trovato!
 % endblock% 
  % include "footer.twig"%   
Facciamo l'anteprima del back-end (Aspetto> Menu) del mio sito Web demo in cui il menu contiene due elementi principali e un elemento figlio. 
Quindi, diamo un'occhiata a una pagina di post, dal nostro single.twig si estende base.twig, il nostro menu apparirà automagicamente su quella pagina.
Puoi vedere che nella parte superiore del nostro singolo post c'è un menu con entrambi gli elementi principali al suo interno. 
E le voci del menu figlio? Aggiorniamo il nostro menu.twig file per includere anche gli elementi secondari.
# Menu Template: 'menu.twig' #  
Le righe da 9 a 23 stampano le voci del menu secondario, se presenti. Questa volta, il front-end mostra l'elemento figlio del nostro primo genitore.
Per maggiori dettagli su TimberMenu (), controlla la documentazione.
Utenti in legno
Gli utenti possono essere recuperati dal database di WordPress con TimberUser () classe. La classe prende ID utente o slug come argomenti per recuperare l'utente.
Come utenti o autori di blog sono associati ai post di WP, userò il codice di single.php, che ora assomiglia a questo:
La linea # 20 inizializza il TimberUser () classe e viene assegnato a un elemento dell'oggetto contesto, vale a dire. utente. Mostriamo il nome dell'autore tramite il modello Twig.
Il mio modello single.twig ha una nuova riga di codice alla fine, sulla linea # 21.
# Sinlge Template: 'single.twig' # % estende "base.twig"% % block content% 
  #  # #  # #  # 
 titolo del post 
 
post.get_content
 
Autore: utente 
 
 % endblock% 
Il codice recupera il nome dell'autore del post corrente e lo visualizza sul front-end. Puoi usare utente | print_r per vedere cos'altro è disponibile nell'oggetto TimberUser. 
Per saperne di più su questa classe, consultare la documentazione. Puoi trovare il codice di questo tutorial nel repository GitHub sul ramo ImagesMenusUsers.
Conclusione
Questo articolo include l'intera serie. In questi quattro articoli ho esplorato come utilizzare Timber per integrare la lingua di Twig Templating in un tema WordPress. 
Il repository finale per questa serie può essere trovato su GitHub con rami specifici dell'esercitazione:
 
Esercitazione 2: Introduzione
 
Tutorial # 3: foglio di calcolo WordPress
 
Tutorial # 4: TimberImages, TimberMenu e TimberUser
 
Puoi consultare la documentazione online di Legname per ulteriori informazioni.
Passa attraverso tutta questa serie e implementa tutti gli esempi spiegati, e scommetto che ti divertirai con Twig. Pubblica le tue domande nella casella dei commenti qui sotto. Puoi anche contattarmi tramite Twitter.



		
			
	   
	




Codice