Dans l'article précédent, j'avais décrit l'intégration du moteur de modélisation Twig dans WordPress via Timber et expliqué comment les développeurs pouvaient envoyer des données des fichiers PHP aux fichiers Twig. Discutons de la création d'un modèle de base avec Twig, des avantages de cette technique DRY et d'une feuille de mise en page Timber-Twig WordPress..

Création d'un modèle de base dans Twig

Twig fonctionne selon le principe DRY (Don't Repeat Yourself). L’une des caractéristiques les plus importantes de Twig est modèles de base avec imbrication et héritage multiple. Bien que la plupart des gens utilisent PHP inclut de manière linéaire, vous pouvez créer des niveaux infinis de blocs imbriqués pour contrôler particulièrement vos modèles de page.. 

Pensez à votre modèle de base en tant que modèle parent contenant des ensembles de blocs. Un modèle enfant peut étendre un modèle parent et modifier un ou plusieurs blocs de l'intérieur sans réécrire le code, qui serait similaire dans les deux modèles..

Jetons un coup d’œil à un exemple de modèle parent ou de base, base.twig fichier. Vous pouvez le placer avec d'autres modèles Twig dans le dossier des vues. Vous appelez ce fichier dans l’un de vos modèles Twig, où il est utilisé comme modèle parent pour ce fichier Twig particulier. Tapez les lignes de code suivantes pour créer un  vues dossier. Ce modèle de base fournira une structure de base pour votre thème WordPress. Voici le code d'un simple base.twig fichier.

# Modèle de base: base.twig # % block html_head_container% % include 'header.twig'% % endblock%  
 % block content%  
PARDON! Aucun contenu trouvé!
 % endblock% 
  % include "footer.twig"%   

Commentaires dans Twig: # Modèle de base: base.twig #

Vous pouvez écrire des commentaires dans Twig avec la syntaxe # comment here #. Pour commenter une partie de ligne dans un modèle, utilisez la syntaxe de commentaire #… #. Ceci est utile pour le débogage ou pour ajouter des informations à d'autres concepteurs de modèles ou à vous-même. Vous pouvez trouver un commentaire sur la ligne 1.

Blocs: % block html_head_container% % endblock%

Toute la philosophie de Twig and Timber s’articule autour de l’approche de code modulaire dans WordPress. J'ai souvent écrit sur l'idée que les données dans Twig sont traitées sous forme de composants ou de blocs. 

Les blocs sont utilisés pour l'héritage et agissent comme des espaces réservés et des remplacements en même temps. Ils sont documentés en détail dans la documentation de la balise extend.

% block add_block_name_here% Bloque le contenu ici % endblock%

Dans le code écrit ci-dessus, vous pouvez trouver un bloc appelé html_head_container qui s'étend de la ligne 3 à la ligne 7. Tout modèle qui étend ce modèle de base base.twig peut hériter du contenu du même bloc ou le modifier pour ajouter autre chose. Il y a un autre bloc appelé contenu % block content% où s'étend de la ligne 13 à la ligne 18.

De même, le concept de création de blocs est étendu plus loin, vous pouvez également créer des niveaux infinis de blocs imbriqués. C'est le vrai principe DRY.

Inclure la déclaration: % include "header.twig"% 

Les modèles Twig peuvent inclure d'autres modèles Twig, comme nous le faisons en PHP. Ce base.twig fichier va être un wrapper général, et il est incomplet sans son entête et bas de page des dossiers. Par conséquent, la syntaxe % include "file.twig"% nous aidera à inclure deux modèles Twig différents:

• Le modèle d'en-tête % include "header.twig"% sur la ligne 5.
• Le modèle de pied de page (% include "footer.twig"% sur la ligne 23.

Extension du modèle de base

Nous avons créé un base.twig fichier en tant que modèle parent et a laissé le bloc de contenu vide. Ce bloc peut être utilisé dans tous les fichiers Twig personnalisés qui le modifieraient, et le reste du modèle de base sera hérité tel quel. Par exemple, créons un single.twig fichier qui étendra le modèle base.twig et modifiera le contenu bloc.

# Modèle unique: 'single.twig' # % extend "base.twig"% % block content% 
 
 titre de l'article 
 
post.get_content
 
 % endblock% 

Ce code montre une coutume single.twig fichier. Sur la ligne 3, ce modèle s’étend à base.twig en tant que modèle parent ou de base. le s'étend tag peut être utilisé pour étendre un modèle à partir d'un autre.

Ici, tous les détails liés à la entête et bas de page sont hérités de la base.twig fichier, qui est le modèle parent, tandis que le contenu le bloc sera remplacé par le titre et le contenu de l'article. Combien est-ce amusant?

WordPress CheatSheet pour le bois

Les développeurs de Timber se sont assurés de compléter WordPress de toutes les manières possibles, des utilisateurs centraux aux utilisateurs finaux. Bien que la syntaxe de conversion des fonctions WordPress dans Timber soit quelque peu différente, elle est assez bien documentée. Vers la fin de cet article, je partagerai une liste de certaines des conversions pour les fonctions WordPress et leurs équivalents Timber. Résumons.

Bref rappel!

Dans mon article précédent, j'ai créé un message de bienvenue qui s'est simplement composé via une chaîne PHP sur la page d'accueil de mon site de démonstration. Le code pour cela peut être trouvé dans sa branche sur GitHub. Répétons cette procédure encore une fois mais avec une approche différente et plus technique.

Pour le moment, je vais afficher le même message de bienvenue, mais cette fois en créant une nouvelle page qui apparaîtra sur la page d'accueil..  

Récupération de fonctions WordPress dans Twig

Créez une nouvelle page avec le titre "Bienvenue sur mon blog!" et ajouter du contenu à l'intérieur avant de cliquer sur le bouton de publication.

Maintenant, affichons le contenu de cette page d'accueil sur la page d'accueil. Pour ce faire, rendez-vous à nouveau au index.php déposer et ajouter les lignes de code suivantes.

Ici, j'ai ajouté un $ contexte tableau, à l'intérieur duquel j'ai ajouté un élément page d'accueil et ensuite utilisé le get_post () fonction pour aller chercher la page que je viens de créer. Pour ce faire, j'ai soumis l'ID de la page, qui est 4 dans ce cas.
À l'intérieur de bienvenue.twig fichier, laisse print_r l'élément page d'accueil et voir quelles données nous obtenons. Mon fichier welcome.twig ressemble à ceci pour le moment.
# Modèle de message: 'welcome.twig' # 
 
 welcome_page | print_r 
 
Je peux confirmer que cet élément du tableau $ context a maintenant un objet TimberPost pour cette page particulière avec l'ID 4.
De là, nous pouvons obtenir toutes les propriétés qui peuvent être affichées sur le front-end. Par exemple, je veux afficher le titre de la page et contenu seulement. Alors maintenant mon bienvenue.twig Le fichier ressemble à ceci:
# Modèle de message: 'welcome.twig' # 
 
welcome_page.title
 
welcome_page.content
 
 
Et la page d'accueil contient les informations dont nous avons besoin.
WordPress Cheatsheet
Comme je l'ai dit plus tôt, Timber vous fournit des conversions pratiques des fonctions WordPress. Ces fonctions peuvent vous aider à obtenir des informations concernant:
 
Blog
 
Classes corporelles
 
En-tête / pied de page
 
 get_context () une fonction
Il y a un Timber :: get_context () fonction qui récupère des charges d'informations de site qu'un développeur voudrait afficher sur le front-end du site. La documentation l'explique comme ceci:
Cela va retourner un objet avec beaucoup des choses communes dont nous avons besoin sur tout le site. Des choses comme votre navigation, wp_head et wp_footer vous permettront de commencer chaque fois (même si vous les écrasez plus tard). Tu peux faire un $ context = Timber :: get_context (); print_r ($ context); pour voir ce qu'il y a dedans ou ouvert timber.php inspecter par vous-même.
Non seulement cela, mais vous pouvez ajouter vos propres données personnalisées à cette fonction via un filtre pratique.
Vous trouverez ci-dessous quelques conversions supplémentaires comme celle-ci, utilisables avec Timber..
Infos sur le blog
 
 blog_info ('charset') => site.charset 
 
 blog_info ('description') =>  Description du site  
 
 blog_info ('sitename') =>  nom du site  
 
 blog_info ('url') =>  URL du site  
 
 Classe du corps
 implode (", get_body_class ()) =>  
 Thème
 
 get_template_directory_uri () => theme.link (pour les thèmes parents)
 
 get_template_directory_uri () => theme.parent.link (pour les thèmes enfants)
 
 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 
 
Expérimentons quelques fonctions, en commençant par les informations du blog. Au lieu de foo, écrire  nom du site . 
Le front-end affichera le titre du site comme ceci:
Timber propose également des conversions de fonctions pour afficher les publications et les informations relatives aux publications via TimberPost (). Avant d’expliquer l’utilisation de cette fonction, listons les conversions de fonctions qui lui sont associées..
Poster
 
 le contenu() =>  Publier un contenu  
 
 the_permalink () => post.permalink 
 
 le titre() =>  titre de l'article  
 
 get_the_tags () => post.tags 
 
Usage
Utilisez ce code dans le single.php fichier.
Maintenant testons le  titre de l'article  fonctionner dans notre fichier Twig.
 
 titre de l'article 
 
 
Enregistrez-le et le front-end affichera le titre de l'article comme ceci:
À ton tour!
Aujourd'hui, vous avez assisté à la mise en pratique du principe DRY avec Timber et Twig lors de la création d'un thème WordPress. Parcourez ce didacticiel et essayez de le mettre en œuvre, et laissez-moi savoir si vous avez des questions. Vous pouvez trouver le code complet dans la branche WP Cheatsheet dans ce référentiel GitHub.
Dans le prochain et le dernier article, je vais expliquer comment gérer les images et les menus dans un modèle WordPress basé sur Twig. Jusque-là, contactez-moi sur Twitter pour obtenir des réponses à vos questions ou envoyez-en une ici..



		
			
	   
	




Code