Nel precedente articolo, ho scritto sull'integrazione del motore di templating Twig con WordPress tramite Timber e su come gli sviluppatori possono inviare dati dai file PHP ai file Twig. Parliamo di come creare un modello base con Twig, i vantaggi di questa tecnica DRY e un Cheatsheet Timber-Twig WordPress.

Creazione di un modello base in Twig

Twig funziona con il principio DRY (Do not Repeat Yourself). Una delle caratteristiche più importanti di Twig è modello base con nidificazione e ereditarietà multipla. Mentre molte persone usano PHP include in modo lineare, puoi creare infiniti livelli di blocchi nidificati per controllare in particolare i tuoi modelli di pagina. 

Pensa al tuo modello base come modello padre con serie di blocchi al suo interno. Un modello secondario può estendere un modello principale e modificare qualsiasi blocco o blocco dall'interno senza riscrivere il codice, che sarebbe simile in entrambi i modelli.

Diamo un'occhiata a un modello genitore o di base di esempio, a base.twig file. È possibile posizionarlo con altri modelli Twig nella cartella views. Si chiama questo file all'interno di uno dei propri modelli Twig in cui viene utilizzato come modello padre per quel particolare file Twig. Digitare le seguenti righe di codice per creare un  visualizzazioni cartella. Questo modello base fornirà una struttura di base per il tuo tema WordPress. Ecco il codice di un semplice base.twig file.

# Base Template: base.twig # % block html_head_container% % include 'header.twig'% % endblock%  
 % block content%  
SPIACENTE! Nessun contenuto trovato!
 % endblock% 
  % include "footer.twig"%   

Commenti in Twig: # Base Template: base.twig #

Puoi scrivere commenti in Twig con la sintassi di # comment here here. Per commentare una parte di una riga in un modello, utilizzare la sintassi del commento # ... #. Questo è utile per il debug o per aggiungere informazioni per altri designer di template o te stesso. Puoi trovare un commento sulla linea # 1.

blocchi: % block html_head_container% % endblock%

L'intera filosofia di Twig and Timber ruota intorno all'approccio al codice modulare in WordPress. Ho ripetutamente scritto dell'idea che i dati in Twig siano gestiti sotto forma di componenti o blocchi. 

I blocchi vengono utilizzati per ereditarietà e fungono da segnaposti e sostituzioni allo stesso tempo. Sono documentati in dettaglio nella documentazione per il tag extends.

% block add_block_name_here% Blocca il contenuto qui % endblock%

Nel codice sopra scritto, puoi trovare un blocco chiamato html_head_container che si estende dalla linea n. 3 alla linea n. Qualsiasi modello che estende questo modello base base.twig può ereditare lo stesso contenuto del blocco o modificarlo per aggiungere qualcos'altro. C'è un altro blocco chiamato contenuto % block content% al quale si estende la linea n. 13 alla riga n. 18.

Allo stesso modo, il concetto di creare blocchi viene ulteriormente esteso dove è possibile creare anche infiniti livelli di blocchi nidificati. Questo è il vero principio SECCO.

Includi dichiarazione: % include "header.twig"% 

I modelli di Twig possono includere altri modelli di Twig, proprio come lo facciamo in PHP. Questo base.twig il file diventerà un wrapper generale ed è incompleto senza il suo intestazione e footer File. Pertanto, la sintassi % include "file.twig"% ci aiuterà a includere due diversi modelli di Twig:

• Il modello di intestazione % include "header.twig"% sulla linea # 5.
• Il modello del piè di pagina (% include "footer.twig"% sulla linea # 23.

Estensione del modello base

Abbiamo creato a base.twig file come modello padre e lasciato vuoto il blocco del contenuto. Questo blocco può essere utilizzato all'interno di qualsiasi file Twig personalizzato che lo modifichi e il resto del modello di base verrà ereditato così com'è. Ad esempio, creiamo a single.twig file che estenderà il modello base.twig e modificherà il file soddisfare bloccare.

# Single Template: 'single.twig' # % estende "base.twig"% % block content% 
 
 titolo del post 
 
post.get_content
 
 % endblock% 

Questo codice mostra un'abitudine single.twig file. Alla riga n. 3, questo modello si estende a base.twig come modello principale o di base. Il si estende il tag può essere utilizzato per estendere un modello da un altro.

Qui, tutti i dettagli relativi al intestazione e footer sono ereditati dal base.twig file, che è il modello principale, mentre il soddisfare il blocco verrà sostituito con il titolo e il contenuto del post. Quanto è divertente?

CheatSheet WordPress per il legname

Gli sviluppatori di Timber hanno fatto in modo che integri WordPress in ogni modo possibile, dal nucleo agli utenti finali. Sebbene la sintassi di conversione delle funzioni di WordPress in Timber sia leggermente diversa, è piuttosto ben documentata. Verso la fine di questo articolo, condividerò un elenco di alcune conversioni per le funzioni di WordPress e i loro equivalenti Timber. Ricapitoliamo.

Breve riassunto!

Nel mio precedente articolo, ho creato un messaggio di benvenuto che veniva compilato semplicemente tramite una stringa PHP sulla home page del mio sito web demo. Il codice per questo può essere trovato nel suo ramo su GitHub. Ripetiamo questa procedura ancora una volta, ma con un approccio diverso e più tecnico.

In questo momento, visualizzerò lo stesso messaggio di benvenuto, ma questa volta tramite la creazione di una nuova pagina che viene visualizzata nella home page.  

Recupero di funzioni WordPress in Twig

Crea una nuova pagina con il titolo "Benvenuto nel mio blog!" e aggiungi del contenuto al suo interno prima di premere il pulsante di pubblicazione.

Ora mostriamo il contenuto di questa pagina di benvenuto sulla homepage. Per farlo, ancora una volta andare al index.php file e aggiungere le seguenti righe di codice.

Ecco, ho aggiunto un $ contesto array, all'interno del quale ho aggiunto un elemento welcome_page e poi ha usato il get_post () funzione per recuperare la pagina che ho appena creato. Per fare ciò, ho inviato l'ID della pagina, che in questo caso è 4.
Dentro il welcome.twig file, andiamo print_r l'elemento welcome_page e vedere quali dati otteniamo. Il mio file welcome.twig ha questo aspetto al momento.
# Modello messaggio: 'welcome.twig' # 
 
 welcome_page | print_r 
 
Posso confermare che questo elemento nell'array $ context ora ha un oggetto TimberPost per quella particolare pagina con ID 4.
Da qui, possiamo ottenere tutte le proprietà che possono essere visualizzate sul front-end. Ad esempio, voglio visualizzare il titolo della pagina e soddisfare solo. Quindi ora il mio welcome.twig il file assomiglia a questo:
# Modello messaggio: 'welcome.twig' # 
 
welcome_page.title
 
welcome_page.content
 
 
E la homepage ha le informazioni di cui abbiamo bisogno.
Cheatsheet di WordPress
Come ho detto prima, Timber ti offre alcune utili conversioni delle funzioni di WordPress. Queste funzioni possono aiutarti a ottenere informazioni relative a:
 
blog
 
Classi corporee
 
Intestazione / piè di pagina
 
 GET_CONTEXT () funzione
C'è un Legno :: GET_CONTEXT () funzione che recupera un sacco di informazioni sul sito che uno sviluppatore vorrebbe visualizzare sul front-end attraverso il sito. La documentazione lo spiega così:
Questo restituirà un oggetto con molte delle cose comuni di cui abbiamo bisogno attraverso il sito. Cose come il tuo nav, wp_head e wp_footer con cui vuoi iniziare ogni volta (anche se le sovrascrivi più tardi). Puoi fare un $ context = Timber :: get_context (); print_r ($ context); per vedere cosa c'è dentro o in apertura timber.php ispezionare per te stesso.
Non solo questo, ma puoi aggiungere i tuoi dati personalizzati a questa funzione tramite un comodo filtro.
Di seguito puoi trovare altre conversioni come questa, che possono essere utilizzate con Timber.
Informazioni sul blog
 
 blog_info ( 'charset') => site.charset 
 
 blog_info ( 'descrizione') =>  descrizione del sito  
 
 blog_info ( 'sitename') =>  nome del sito  
 
 blog_info ( 'url') =>  indirizzo del sito  
 
 Classe di corpo
 implode (", get_body_class ()) =>  
 Tema
 
 get_template_directory_uri () => theme.link (per temi padre)
 
 get_template_directory_uri () => theme.parent.link (per temi figlio)
 
 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 
 
Sperimentiamo con alcune funzioni, iniziando con le informazioni del blog. Al posto di foo, Scrivi  nome del sito . 
Il front-end mostrerà il titolo del sito in questo modo:
Il legname ha anche alcune conversioni di funzioni per visualizzare i post e le informazioni relative al post tramite TimberPost (). Prima di spiegare l'utilizzo di questa funzione, elenchiamo le conversioni di funzione ad esso correlate.
Inviare
 
 il contenuto() => post.content 
 
 the_permalink () => post.permalink 
 
 il titolo() =>  titolo del post  
 
 get_the_tags () => post.tags 
 
uso
Usa questo codice nel single.php file.
Ora proviamo il  titolo del post  funzione all'interno del nostro file Twig.
 
 titolo del post 
 
 
Salvalo e il front-end mostrerà il titolo del post in questo modo:
Il tuo turno!
Oggi hai assistito all'implementazione pratica del principio DRY con Timber e Twig mentre creavi un tema WordPress. Segui questo tutorial e prova a implementarlo e fammi sapere di qualsiasi domanda tu possa avere. È possibile trovare il codice completo nel ramo Cheat WP in questo repository GitHub.
Nel prossimo e nell'ultimo articolo, discuterò su come gestire immagini e menu in un modello WordPress basato su Twig. Fino ad allora, contattami su Twitter per ottenere risposta alle tue domande o pubblicarne uno qui.



		
			
	   
	




Codice