Accentsconagua

Kick-Start développement WordPress avec Twig Mise en route

Code
Share

Nous comprenons maintenant que Twig et le plugin WordPress Timber peuvent aider les développeurs à écrire du code modulaire tout en développant des thèmes WordPress. Avec une telle approche modulaire, vous pouvez gérer séparément la logique et la couche de visualisation de votre application Web. Passons maintenant à des tâches un peu plus techniques: création de modèles Twig, conversion de HTML en fichiers Twig, et rendu de la logique ou des données avec des modèles Twig.

Installer du bois

Tout d’abord, je vais installer Timber, un plugin WordPress qui aide à intégrer le moteur de création de modèles Twig avec WP. Alors faisons-le.

  • Connectez-vous à votre tableau de bord WordPress.
  • Aller à Plugins> Ajouter un nouveau.
  • Rechercher le plugin Timber.
  • Installer et activer le plugin.

Une fois que Timber est installé, vous pouvez maintenant commencer à fractionner vos fichiers de modèle en Les données et vue des dossiers.

Création d'un modèle de brindille

Avant de commencer à créer des modèles Twig, je suppose que vous avez une sorte de configuration WordPress locale. Pour ce tutoriel particulier, ma configuration est la suivante:

  • Une installation WP localhost (j'utilise DesktopServer de ServerPress).
  • Timber plugin installé et activé.
  • Facultatif: n'importe quel thème de base / de départ (j'utilise le mien, c'est-à-dire propre).

UpStatement a également construit un thème de démarrage du bois.

Commençons. Je souhaite afficher un message de bienvenue en haut de ma page d'accueil. Comment pourrais-je m'y prendre sans Twig? J'inclurais probablement le code HTML dans le fichier PHP et répercuterais le message de bienvenue, comme dans l'exemple de code ci-dessous. ma index.php le fichier ressemble à quelque chose comme ça.

Maintenant, la page d’accueil de mon installation WordPress locale affiche un message de bienvenue tout en haut. Voici la capture d'écran.

Problème

Le problème avec cette approche est que nous mélangeons les données / la logique avec la vue. Plus ce fichier est complexe, plus il est difficile à maintenir, encore moins à comprendre. Par exemple, si vous ajoutez la boucle WordPress après ce code avec quelques arguments, puis filtrez et paginez ensuite. Ajoutez à cela, PHP dans HTML ne semble pas bon quand vous vous retrouvez avec un peu de la logique.

Approche modulaire

Pour le rendre plus modulaire, nous pouvons penser à notre contenu sur la page d’accueil sous forme de blocs ou de composants. Il peut y avoir deux versions complètes par défaut, à savoir les publications de The_Loop et la pagination. Puisque nous voulons maintenant ajouter un autre composant en haut, c'est-à-dire le message de bienvenue, créons un fichier Twig pour ce composant.. 

Ouvrez un nouveau fichier vierge dans l'éditeur et copiez-collez les lignes de code suivantes.

 
 
Bienvenue sur mon site web!

Créez un nouveau dossier à la racine de votre thème appelé vues et enregistrez ce fichier avec le  .brindille extension. Par exemple, j'ai enregistré le fichier sous bienvenue.twig.

Rendre le modèle de brindille

Le bois nous fournit quelques fonctions utiles, dont la fonction de rendu. Vous pouvez l'appeler comme ça:

Bois :: render ();

Cette fonction peut prendre jusqu'à quatre arguments. Étant donné que cela sort du cadre de cet article, vous pouvez en apprendre davantage à ce sujet dans la documentation Timber. Nous pouvons passer le nom de n'importe quel fichier Twig présent dans le vues dossier de votre thème à cette fonction.

Rendons le message de bienvenue dans le index.php fichier.

Le bois rend la bienvenue.twig fichier, charge le code HTML et affiche la nouvelle couche de vue modifiée au niveau du système, comme suit: 
le rendre() fonction prend bienvenue.twig comme argument, mais il lit automatiquement ce fichier tant que les modèles de brindille résident dans le dossier nommé vues. 
Si vous souhaitez utiliser un nom / chemin personnalisé pour le dossier, vous devez fournir le chemin de ce dossier. Par exemple, j'ai créé un dossier twig à la racine de mon thème et l'a ajouté à l'argument de la fonction de rendu..
L'ordre de chargement officiel
Timber examinera d'abord le thème enfant, puis le thème parent (comme dans la logique WordPress). L'ordre de chargement officiel est:
     
  1. Emplacements définis par l'utilisateur
    2.  
  2. Répertoire d'appel de script PHP (mais pas de thème)
    3.  
  3. Thème enfant
    4.  
  4. Thème parent
    5.  
  5. Répertoire d'appel de script PHP (y compris le thème)
    6.  
L'élément 2 est inséré au-dessus des autres afin que si vous utilisez Timber dans un plugin, il utilise les fichiers twig du répertoire du plugin..
Donc, maintenant, le fichier index.php ne contient pas de HTML et rend un modèle Twig.
Maintenant envoyons des données dynamiques de index.php au bienvenue.twig déposer et le rendre avec Timber.
Envoi de données par le bois à des fichiers Twig
Pour envoyer des données du fichier PHP au fichier Twig, vous devez définir un tableau de contexte. La fonction de rendu utilise un tableau de données pour fournir aux modèles Twig un certain type de contexte. Appelons le tableau  $ contexte, qui est un tableau associatif, c’est-à-dire qu’il utilise les paires clé-valeur. 
Ajoutons une paire clé-valeur qui serait un message de bienvenue dynamique, que notre fichier PHP enverrait au fichier Twig.
Fichier de données
ma index.php le fichier ressemble à ceci maintenant.
Donc, à l'intérieur du index.php fichier, j'ai défini un vide $ contexte tableau à la ligne # 8. Puis à la ligne 11, j'ai créé une variable $ var avec la valeur 'Message dynamique'. À la ligne 14, j'ai créé une clé le message qui est égal à $ var.
A la ligne 17, j’ai appelé la fonction de rendu avec la commande bienvenue.twig fichier, mais cette fois, il faut un argument supplémentaire, c’est-à-dire le $ contexte tableau. Ce nouvel argument contient en fait les données que Timber enverra du fichier PHP au fichier Twig.
Nous avons donc défini le tableau de contexte et ajouté un message dynamique (vous pouvez afficher un message différent à différents utilisateurs en lui ajoutant une sorte de logique, comme l’affichage du prénom de l’utilisateur actuel).. 
Fichier de modèle
Maintenant, nous devons utiliser ces données, c'est-à-dire. le message, dans le fichier Twig. Nous pouvons reproduire une variable dans notre modèle Twig en y plaçant des doubles accolades. Par exemple, pour echo $ var dans un fichier twig, nous pouvons écrire var. C'est exactement ce que j'ai fait.
 
 
 le message 
 
 
La valeur de le message sera imprimé à l'intérieur des balises h2. Je sais, c'est aussi simple que cela, et le code a l'air assez propre. 
C'est tout! Enregistrez le code et affichez le message de bienvenue dynamique sur le serveur frontal. Voici la dernière capture d'écran.
Conclusion
Pour résumer, vous pouvez maintenant utiliser le fichier PHP pour coder la logique et fournir des données à un modèle Twig contenant du code HTML et affichant les variables ou fonctions Twig à l'intérieur des doubles accolades..
Cette approche modulaire peut conduire à un fichier de modèle séparé pour chaque composant de votre thème WordPress. Pensez à avoir un composant message.twig que vous pouvez utiliser n'importe où dans le thème pour afficher le message de votre choix, autant de fois que vous le souhaitez.. 
C'était une implémentation de base de Twig with Timber. Cependant, dans les deux prochains articles, j'écrirai au sujet de Timber WordPress Cheatsheet, de la gestion des images avec Timber et de la création de menus sans utiliser la fonction Crazy Walker..
Si vous avez des questions, postez-les dans les commentaires ci-dessous ou contactez-nous sur Twitter. Vous pouvez également consulter mon code de thème sur ce dépôt GitHub.





	
	
			
	   
	







Code
×