Premiers pas avec Twig : démarrez votre développement WordPress

Nous savons désormais que Twig, avec le plugin WordPress Timber, peut aider les développeurs à écrire du code modulaire lors du développement de thèmes WordPress. Cette approche modulaire vous permet de gérer séparément les couches logique et d'affichage de votre application Web. Passons à quelque chose d'un peu plus technique : créer des modèles Twig, convertir du HTML en fichiers Twig et comment utiliser les modèles Twig pour restituer la logique ou les données.

Installation du bois

Tout d’abord, je vais installer Timber, un plugin WordPress qui permet d’intégrer le moteur de modèles Twig avec WP. Alors commençons.

• Connectez-vous à votre tableau de bord WordPress.
• Allez dans Plugins > Ajouter un nouveau plugin.
• Recherchez le plugin Timber.
• Installez et activez le plugin.

Une fois Timber installé, vous pouvez maintenant commencer à diviser vos fichiers de modèle en fichiers data et view.

Créer un modèle de branche

Avant de commencer à créer le modèle Twig, je vais supposer que vous disposez déjà d'une sorte de configuration WordPress locale. Pour ce tutoriel particulier, ma configuration est :

• Installation Localhost WP (j'utilise DesktopServer de ServerPress).
• Plugin Timber installé et activé.
• Facultatif : n'importe quel thème de base/starter (j'utilise le mien, Neat).

UpStatement a également créé un thème Timber Starter.

Commençons. Je souhaite afficher un message de bienvenue en haut de la page d'accueil. Que ferais-je sans Twig ? Peut-être que j'inclurais le code HTML dans le fichier PHP et que je ferais écho au message de bienvenue, comme je l'ai fait dans l'exemple de code ci-dessous. Mon fichier index.php ressemble à ceci.

<?php
/**
 * Homepage
 */
get_header(); ?>

    <div> <?php echo "Welcome to my blog!"; ?> </div>

<?php get_footer(); ?>

La page d'accueil de mon installation WordPress locale affiche désormais un message de bienvenue en haut. Voici une capture d'écran.

Question

Le problème avec cette approche est que nous mélangeons des données/logiques avec des vues. Plus le fichier est complexe, plus il sera difficile à maintenir, et encore moins à comprendre, par exemple, si vous ajoutez une boucle WordPress derrière ce code avec quelques paramètres puis du filtrage et de la pagination. En plus de cela, PHP en HTML n'a pas l'air bien quand vous obtenez enfin un peu de logique.

Approche modulaire

Pour le rendre plus modulaire, nous pouvons considérer le contenu de la page d'accueil comme des blocs ou des composants. Par défaut, il peut y en avoir deux complets, les publications et la pagination de The_Loop. Maintenant, nous voulons ajouter un autre composant en haut, 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.

<!-- Welcome Template -->
<section class="welcome_message">
        <h2>Welcome to my website!</h2>
</section>

Créez un nouveau dossier appelé views dans le répertoire racine de votre thème et utilisez .twig 扩展名保存此文件。例如，我将文件保存为 welcome.twig.

Modèle de rendu de branche d'arbre

Timber nous offre quelques fonctions utiles, dont la fonction de rendu. Vous pouvez l'appeler ainsi :

Timber::render();

Cette fonction peut accepter jusqu'à quatre paramètres. Comme cela dépasse le cadre de cet article, vous pouvez en savoir plus dans la documentation Timber. Nous pouvons transmettre le nom de n’importe quel fichier Twig existant dans le dossier views du thème à cette fonction.

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

<?php
/**
 * Homepage
 */
get_header();

    // Timber Render.
	Timber::render( 'welcome.twig' );

get_footer();

Timber restitue le fichier welcome.twig, charge le code HTML et affiche la couche de vue nouvellement modifiée sur le frontend comme ceci :

La fonction

render() prend render() 函数将 welcome.twig comme argument, mais elle sera lue automatiquement tant que le modèle de brindille se trouve dans un dossier nommé views le déposer.

Si vous souhaitez utiliser un nom/chemin personnalisé pour un dossier, vous devez fournir le chemin d'accès au dossier. Par exemple, j'ai créé un dossier twig à la racine du thème et je l'ai ajouté aux paramètres de la fonction de rendu.

<?php Timber::render('twig/welcome.twig'); ?>

Ordre de chargement officiel

Timber examinera d'abord le thème enfant puis reviendra au thème parent (même logique que WordPress). L'ordre officiel de chargement est le suivant :

1. Emplacement défini par l'utilisateur
2. Répertoire pour appeler le script PHP (mais pas le thème)
3. Sous-thème
4. Sujet parent
5. Répertoire pour appeler des scripts PHP (y compris des thèmes)

L'élément 2 est inséré au-dessus des autres éléments afin que si vous utilisez Timber dans un plugin, il utilisera le fichier twig dans le répertoire du plugin.

Donc, maintenant il n'y a plus de HTML dans le fichier index.php, il affiche un modèle Twig.

Envoyons maintenant des données dynamiques de index.php 发送到 welcome.twig au fichier

et rendons-les à l'aide de Timber.

🎜

通过 Timber 将数据发送到 Twig 文件

要将数据从 PHP 文件发送到 Twig 文件，您需要定义一个上下文数组。渲染函数采用一组数据来为 Twig 模板提供某种上下文。我们将该数组称为 $context，它是一个关联数组，即它占用键值对。

让我们添加一个键值对，作为动态欢迎消息，我们的 PHP 文件会将其发送到 Twig 文件。

数据文件

我的 index.php 文件现在看起来像这样。

<?php
/**
 * Homepage
 */
get_header();

    // Context array.
	$context = array();

	// Dynamic message.
	$var = 'Dynamic Message';

	// Dynamic data.
	$context['the_message'] = $var;

	// Render twig file with the give $context array.
	Timber::render( 'welcome.twig', $context );

get_footer();

因此，在 index.php 文件中，我在第 8 行定义了一个空的 $context 数组。然后，在第 11 行，我创建了一个变量 $var，其值为 'Dynamic Message'。 在第 14 行，我创建了一个键 the_message ，它等于 $var。

在第 17 行，我使用 welcome.twig 文件调用了渲染函数，但这一次，它需要一个额外的参数，即 $context 数组。这个新参数实际上包含 Timber 将从 PHP 文件发送到 Twig 文件的数据。

因此，我们定义了上下文数组并添加了动态消息（您可以通过向其添加某种逻辑来向不同的用户显示不同的消息，例如显示当前用户的名字）。

模板文件

现在我们需要在 Twig 文件中使用此数据，即 the_message。我们可以通过在 Twig 模板中放置双括号来回显变量。例如，要在 twig 文件中回显 $var，我们可以编写 {{ var }}。这正是我所做的。

<!-- Message Template -->
<section class="message">
        <h2>{{ the_message }}</h2>
</section>

the_message 的值将打印在 h2 标签内。我知道，就是这么简单，而且代码看起来也很干净。

就是这样！保存代码，在前端查看动态欢迎信息。这是最终的屏幕截图。

结论

总而言之，现在您可以使用 PHP 文件来编码逻辑并向 Twig 模板提供数据，该模板包含 HTML 并在双括号内呈现 Twig 变量或函数。

这种模块化方法可以为 WordPress 主题中的每个组件生成单独的模板文件。考虑拥有一个 message.twig 组件，您可以在主题中的任何位置使用它来显示您想要的任何消息，任意次数。

这是 Twig 与 Timber 的基本实现。不过，在接下来的两篇文章中，我将介绍 Timber WordPress Cheatsheet、使用 Timber 管理图像以及在不使用疯狂步行器功能的情况下创建菜单。

如果您有任何疑问，请在下面的评论中发表或在 Twitter 上联系。您还可以在此 GitHub 存储库中查看我的主题代码。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!