Sviluppo WordPress kick-start con Twig come iniziare

Ora capiamo che Twig, insieme al plugin WordPress Timber, può aiutare gli sviluppatori a scrivere codice modulare durante lo sviluppo di temi WordPress. Con un tale approccio modulare è possibile gestire la logica e il livello di visualizzazione della propria applicazione Web separatamente. Passiamo a cose un po 'più tecniche: creazione di modelli Twig, conversione di file HTML in Twig e modalità di rendering della logica o dei dati con i modelli di ramoscello.

Installa il legname

Prima di tutto, installerò Timber, un plugin per WordPress che aiuta a integrare il motore di Twig Templating con WP. Facciamolo.

• Accedi al tuo pannello di WordPress.
• Vai a Plugin> Aggiungi nuovo.
• Cerca il plugin Timber.
• Installa e attiva il plugin.

Una volta installato Timber, è ora possibile iniziare a suddividere i file del modello in dati e vista File.

Creazione di un modello di ramoscello

Prima di iniziare a creare i modelli Twig, presumo che tu abbia qualche tipo di installazione locale di WordPress. Per questo particolare tutorial, la mia configurazione è:

• Un'installazione WP di localhost (sto usando DesktopServer di ServerPress).
• Plugin di legno installato e attivato.
• Facoltativo: qualsiasi tema base / iniziale (sto utilizzando il mio, ovvero Neat).

UpStatement ha anche creato un tema di avviamento con il legno.

Cominciamo. Voglio mostrare un messaggio di benvenuto nella parte superiore della mia homepage. Come potrei fare senza Twig? Probabilmente, includerei il codice HTML all'interno del file PHP ed echo il messaggio di benvenuto, come ho fatto nell'esempio di codice qui sotto. Mio index.php file sembra qualcosa del genere.

Ora la homepage della mia installazione locale di WordPress mostra un messaggio di benvenuto in alto. Ecco lo screenshot.

Problema

Il problema con questo approccio è che stiamo mescolando dati / logica con la vista. Più questo file diventa complesso, più difficile da gestire e tanto meno comprendere, ad esempio, se aggiungi il ciclo WordPress dopo questo codice con alcuni argomenti e successivamente il filtro e la paginazione. Aggiungendo a ciò, PHP all'interno di HTML non sembra buono quando si finisce con un po 'di logica.

Approccio modulare

Per renderlo più modulare, possiamo pensare al nostro contenuto sulla homepage sotto forma di blocchi o componenti. Di default ce ne possono essere due completi, ad esempio Post from The_Loop e impaginazione. Dato che ora vogliamo aggiungere un altro componente in alto, ovvero il messaggio di benvenuto, creiamo un file Twig per quel componente. 

Apri un nuovo file vuoto nell'editor e copia incolla le seguenti righe di codice.

 
 
Benvenuti nel mio sito web!
 
 

Crea una nuova cartella nella radice del tuo tema chiamata visualizzazioni e salva questo file con  .ramoscello estensione. Ad esempio, ho salvato il file come welcome.twig.

Rendering del modello di ramoscello

Il legname ci fornisce alcune funzioni utili, una delle quali è la funzione di rendering. Puoi chiamarlo così:

Legno :: render ();

Questa funzione può richiedere fino a quattro argomenti. Poiché ciò non rientra nell'ambito di questo articolo, puoi leggerlo a proposito dei documenti del legname. Possiamo passare il nome di qualsiasi file Twig presente nel file visualizzazioni cartella del tuo tema per questa funzione.

Facciamo il messaggio di benvenuto nel index.php file.

Il legname rende il welcome.twig file, carica l'HTML e visualizza il nuovo livello di visualizzazione modificato sul front-end in questo modo: 
Il render () la funzione richiede welcome.twig come argomento, ma legge automaticamente questo file fintanto che i modelli di ramoscello risiedono all'interno della cartella denominata visualizzazioni. 
Se si desidera utilizzare un nome / percorso personalizzato per la cartella, sarà necessario fornire il percorso di tale cartella. Ad esempio, ho creato una cartella di ramoscelli nella radice del mio tema e l'ho aggiunta all'argomento della funzione di rendering.
L'ordine di carico ufficiale
Il legname cercherà prima il tema secondario e poi tornerà al tema principale (come nella logica di WordPress). L'ordine di caricamento ufficiale è:
 
Posizioni definite dall'utente
 
Directory di chiamare lo script PHP (ma non il tema)
 
Tema bambino
 
Tema padre
 
Directory di chiamata allo script PHP (incluso il tema)
 
L'articolo 2 è inserito sopra gli altri in modo tale che se usi Timber in un plug-in utilizzerai i file di twig nella directory del plugin.
Quindi, ora il file index.php non ha HTML al suo interno, e sta rendendo un modello Twig.
Ora inviamo alcuni dati dinamici da index.php al welcome.twig file e renderlo con Timber.
Invio di dati tramite il legname ai file Twig
Per inviare dati dal file PHP al file Twig, è necessario definire un array di contesto. La funzione di rendering prende una serie di dati per fornire ai modelli Twig un qualche tipo di contesto. Chiamiamo la matrice  $ contesto, che è un array associativo, cioè occupa le coppie chiave-valore. 
Aggiungiamo una coppia chiave-valore che sarebbe un messaggio di benvenuto dinamico, che il nostro file PHP avrebbe inviato al file Twig.
File di dati
Mio index.php il file sembra ora.
Quindi, dentro index.php file, ho definito un vuoto $ contesto array alla riga n. 8. Quindi alla riga n. 11, ho creato una variabile $ var con il valore "Messaggio dinamico". Alla riga 14, ho creato una chiave il messaggio che è uguale a $ var.
Alla riga n. 17, ho chiamato la funzione di rendering con il welcome.twig file, ma questa volta richiede un argomento aggiuntivo, ad esempio il $ contesto array. Questo nuovo argomento contiene effettivamente i dati che Timber invierà dal file PHP al file Twig.
Quindi, abbiamo definito l'array di contesto e aggiunto un messaggio dinamico (puoi mostrare un messaggio diverso a diversi utenti aggiungendo qualche tipo di logica, come visualizzare il nome dell'utente corrente). 
File di modello
Ora dobbiamo usare questi dati, ad es. il messaggio, nel file Twig. Possiamo echeggiare una variabile all'interno del nostro modello Twig inserendovi doppie parentesi. Ad esempio, per echo $ var in un file di ramoscello, possiamo scrivere var. Questo è esattamente quello che ho fatto.
 
 
 il messaggio 
 
 
Il valore di il messaggio verrà stampato all'interno dei tag h2. Lo so, è solo così semplice, e il codice sembra abbastanza pulito. 
Questo è tutto! Salva il codice e visualizza il messaggio di benvenuto dinamico sul front-end. Ecco lo screenshot finale.
Conclusione
Per riassumere, ora è possibile utilizzare il file PHP per codificare la logica e fornire dati a un modello Twig che contiene HTML e rende le variabili Twig o le funzioni all'interno delle doppie parentesi graffe.
Questo approccio modulare può portare a un file modello separato per ogni componente nel tema WordPress. Pensa ad avere un componente message.twig che puoi usare ovunque nel tema per visualizzare qualsiasi messaggio tu voglia, un numero qualsiasi di volte. 
Questa è stata un'implementazione di base di Twig with Timber. Tuttavia, nei prossimi due articoli scriverò sul Timber WordPress Cheatsheet, gestendo le immagini con Timber e creando menu senza utilizzare la funzione pazzo del camminatore..
Se hai domande, pubblicale nei commenti qui sotto o raggiungi Twitter. Puoi anche dare un'occhiata al mio codice tema in questo repository GitHub.



		
			
	   
	




Codice