A présent, vous avez découvert les concepts de base de l'utilisation de Twig via Timber, tout en construisant un thème WordPress modulaire. Nous avons également étudié l'imbrication de blocs et l'héritage multiple avec Twig, sur la base du principe DRY. Aujourd'hui, nous allons explorer comment afficher des images de pièces jointes, des menus WordPress et des utilisateurs dans un thème avec Twig via le plugin Timber..

Images en bois

Les images sont l’un des éléments essentiels de tout thème WordPress. Dans les pratiques habituelles de codage WordPress, les images sont intégrées à PHP dans les balises HTML normales. Timber offre cependant un moyen assez complet de gérer le img balise (image) modulaire et propre.

Des images sont attachées au champ de vignettes de la publication. Ceux-ci peuvent être facilement récupérés via les fichiers Twig en post.thumbnail. C'est aussi simple que cela!

Usage

Commençons par un exemple pratique. Notre single.php Le fichier ressemble à ceci:

Ici, j'ai utilisé le TimberPost () fonctionner pour des raisons assez évidentes. Ceci est utilisé dans Timber pour représenter les publications extraites de WordPress, les rendant ainsi disponibles pour les modèles Twig..
Comme l'image sélectionnée est attachée aux données de publication, nous devons maintenant la récupérer au début. Donc, le fichier Twig pour cela, single.twig, ressemblera à ceci:
# Modèle Sinlge: 'single.twig' # % extend "base.twig"% % block content% 
  
 % endblock% 
Sur la ligne 9 le code post.thumbnail.src récupère l'image sélectionnée de la publication (miniature) et l'affiche comme suit:
Vous pouvez utiliser cette syntaxe de code pour récupérer autant d'images miniatures que vous souhaitez..
Il y a encore beaucoup plus que vous pouvez expérimenter avec ces images lorsque vous utilisez Timber. Par exemple, vous pouvez aussi les redimensionner via:
 
En utilisant le redimensionner (), fonction, vous pouvez ajouter de nouvelles dimensions à l’image où le premier paramètre est largeur et le second est la taille. Si vous souhaitez redimensionner l’image proportionnellement, omettez le paramètre la taille attribut. Maintenant la syntaxe devient:
Le front-end affiche la même image comme ceci:
Si vous voulez explorer davantage, essayez le livre de recettes image..
En utilisant TimberImage () 
Prenons un scénario dans lequel un développeur souhaite récupérer des images via l'ID d'image, ou souhaite afficher une image externe via une URL, etc. Pour une telle approche étendue, Timber propose une classe., TimberImage (), pour représenter les images extraites de WordPress.
Usage
Prenons un exemple pour notre single.php fichier, qui ressemble à ceci maintenant:
Cette fois, j'utilise le TimberImage () classe qui prend l'identifiant de l'image 8 comme paramètre. Le reste de la routine de codage est identique. Récupérons cette image via le fichier Twig single.twig.
 
La valeur stockée à l'intérieur $ contexte élément custom_img, c'est-à-dire. custom_img, récupérera l'image via son identifiant pour l'afficher en façade comme ceci:
Pour récupérer l'image via une URL externe, vous pouvez suivre cette syntaxe.
 
Cette fois, à la place de l'ID d'image, il existe une URL d'image externe qui est affichée sur le serveur, comme suit:
Pour explorer quelques fonctionnalités supplémentaires de cette fonction, vous pouvez consulter la documentation.
Menus en bois
Maintenant, comment feriez-vous pour rendre un menu WordPress avec des modèles Twig? C'est une chose difficile à faire. Mais attendez! Le bois vous fournit sa TimberMenu () classe, qui peut vous aider à rendre les menus WordPress à l’intérieur des fichiers Twig sous forme de boucle complète. Jetons un coup d'oeil. 
Usage
Le concept entier de récupération des éléments de menu tourne autour de la objet de menu. Il y a deux façons de définir son contexte. La première consiste à rendre l'objet de menu disponible sur chaque page en l'ajoutant à la fonction globale get_context (), comme je l'ai fait dans le cas contraire. functions.php fichier. Deuxièmement, vous pouvez ajouter un menu particulier par son ID pour un modèle PHP particulier.
Indépendamment des deux méthodes, une fois le menu disponible pour le bois $ contexte tableau, vous pouvez récupérer tous les éléments de menu à partir de celui-ci. Mais je préfère le définir globalement. Alors allez au functions.php Fichier et collez le code suivant:
Donc, ici, j'ai défini un appel de fonction personnalisé add_to_context. Cette fonction contient des données que je veux être disponibles sur chaque modèle PHP via le get_context () une fonction. Sur la ligne 13, vous pouvez trouver une instance de TimberMenu () être passé contre le menu d'élément dans le $ data tableau. 
Cela rendra un menu WordPress standard disponible pour le modèle Twig en tant qu’objet que nous pouvons parcourir en boucle. le TimberMenu () la fonction peut prendre des paramètres comme le slug ou l'ID du menu.
Créons un modèle Twig appelé le menu.twig fichier.
# Modèle de menu: 'menu.twig' #  
Le code ci-dessus exécute une boucle dans ce modèle Twig. La ligne 5 exécute un pour boucle pour chaque élément de menu et affiche le titre de chaque menu article dans une liste non ordonnée. La boucle s’exécute jusqu’à toutes les paires clé-valeur du menu les objets sont itérés et listés sur le front-end.
Je suis allé de l'avant et inclus le menu.twig modèle dans le base.twig modèle sur la ligne 11.
# Modèle de base: 'base.twig' # % block html_head_container% % include 'header.twig'% % endblock%  % include "menu.twig"% 
 % block content%  
PARDON! Aucun contenu trouvé!
 % endblock% 
  % include "footer.twig"%   
Prévisualisons le back-end (Apparence> Menus) de mon site Web de démonstration où son menu contient deux éléments parents et un élément enfant. 
Alors, jetons un coup d'oeil à une page de post-depuis notre single.twig s'étend base.twig, notre menu apparaîtra automatiquement sur cette page.
Vous pouvez voir qu'en haut de notre article, il y a un menu avec les deux éléments parents à l'intérieur.. 
Qu'en est-il des éléments du menu enfant? Mettons à jour notre menu.twig fichier pour inclure les éléments enfants ainsi.
# Modèle de menu: 'menu.twig' #  
Les lignes 9 à 23 impriment les éléments du menu enfant, le cas échéant. Cette fois, le front-end affiche l'élément enfant de notre premier parent.
Pour plus de détails sur TimberMenu (), vérifier la documentation.
Utilisateurs dans le bois
Les utilisateurs peuvent être récupérés à partir de la base de données WordPress avec le TimberUser () classe. La classe prend l'ID utilisateur ou le slug comme argument pour récupérer l'utilisateur.
Étant donné que les utilisateurs ou les auteurs de blogs sont associés aux publications WP, je vais utiliser le code de single.php, qui ressemble maintenant à ceci:
La ligne 20 initialise le TimberUser () class et est affecté à un élément d'objet de contexte, c'est-à-dire. utilisateur. Affiche le nom de l'auteur via le modèle Twig.
Mon modèle single.twig a une nouvelle ligne de code à la fin, ligne 21.
# Modèle Sinlge: 'single.twig' # % extend "base.twig"% % block content% 
  #  # #  # #  # 
 titre de l'article 
 
post.get_content
 
Auteur: utilisateur 
 
 % endblock% 
Le code récupère le nom de l'auteur de la publication en cours et l'affiche sur le front-end. Vous pouvez utiliser utilisateur | print_r pour voir ce qui est disponible dans l'objet TimberUser. 
Pour en savoir plus sur cette classe, reportez-vous à la documentation. Vous pouvez trouver le code de ce tutoriel dans le dépôt GitHub sur la branche ImagesMenusUsers.
Conclusion
Cet article termine la série entière. Au cours de ces quatre articles, j'ai exploré l'utilisation de Timber pour intégrer le langage de modélisation Twig dans un thème WordPress.. 
Le référentiel final de cette série est disponible sur GitHub avec des branches spécifiques au tutoriel:
 
Tutoriel n ° 2: Mise en route
 
Tutoriel n ° 3: Feuille de frappe WordPress
 
Tutoriel # 4: TimberImages, TimberMenu & TimberUser
 
Vous pouvez consulter la documentation en ligne de Timber pour plus d'informations..
Parcourez toute cette série et implémentez tous les exemples expliqués, et je parie que vous apprécierez Twig. Postez vos questions dans la zone de commentaire ci-dessous. Vous pouvez également me joindre via Twitter.



		
			
	   
	




Code