Twig 入門: WordPress 開発をすぐに始めましょう

Twig を WordPress プラグイン Timber と併用すると、開発者が WordPress テーマを開発するときにモジュール式コードを作成できることがわかりました。このモジュール式アプローチにより、ロジックを処理し、Web アプリケーションのレイヤーを個別に表示できるようになります。もう少し技術的な話に移りましょう。Twig テンプレートの作成、HTML から Twig ファイルへの変換、そして Twig テンプレートを使用してロジックやデータをレンダリングする方法です。

木材の取り付け

まず、Twig テンプレート エンジンと WP の統合に役立つ WordPress プラグインである Timber をインストールします。それでは、始めましょう。

• WordPress ダッシュボードにログインします。
• プラグイン > 新しいプラグインの追加に移動します。
• Timber プラグインを検索します。
• プラグインをインストールして有効化します。

Timber がインストールされたら、テンプレート ファイルを データ ファイルと ビュー ファイルに分割できるようになります。

ブランチテンプレートの作成

Twig テンプレートの作成を開始する前に、何らかのローカル WordPress セットアップがすでにあることを前提とします。この特定のチュートリアルの設定は次のとおりです:

• Localhost WP のインストール (ServerPress の DesktopServer を使用しています)。
• Timber プラグインがインストールされ、アクティブ化されました。
• オプション: 任意のベース/スターター テーマ (私は独自のニートを使用します)。

UpStatement は Timber Starter テーマも構築します。

＃＃＃はじめましょう。ホームページの上部にウェルカムメッセージを表示したいと考えています。小枝がなかったらどうするでしょうか？おそらく、以下のコード サンプルで行ったように、PHP ファイルに HTML コードを含めてウェルカム メッセージをエコーするでしょう。私の

index.php ファイルは次のようになります。 リーリー

現在、ローカル WordPress インストールのホームページの上部にウェルカム メッセージが表示されています。これがスクリーンショットです。

＃＃＃＃＃＃＃＃＃＃＃＃質問＃＃＃

このアプローチの問題は、データ/ロジックとビューが混在していることです。ファイルが複雑になるほど、理解することはおろか、メンテナンスも難しくなります。たとえば、このコードの後ろに WordPress ループをいくつかのパラメーターを付けて追加し、フィルター処理やページネーションを行う場合です。それに加えて、HTML での PHP は、最終的にロジックを取得したときに見栄えがよくありません。

モジュール式アプローチ

よりモジュール化するために、ホームページ上のコンテンツをブロックまたはコンポーネントとして考えることができます。デフォルトでは、The_Loop からの投稿とページネーションという 2 つの完全なものが存在します。次に、別のコンポーネントであるウェルカム メッセージを上部に追加したいので、このコンポーネント用の Twig ファイルを作成しましょう。

エディタで新しい空のファイルを開き、次のコード行をコピーして貼り付けます。

リーリー

テーマのルート ディレクトリに

views

という名前の新しいフォルダーを作成し、このファイルに

.twig

拡張子を付けて保存します。たとえば、ファイルを

welcome.twig として保存しました。 ブランチ テンプレートのレンダリング Timber はいくつかの便利な機能を提供しており、その 1 つがレンダリング機能です。次のように呼び出すことができます:

リーリー

この関数は最大 4 つのパラメーターを受け入れることができます。これについてはこの記事の範囲を超えているため、Timber のドキュメントを参照してください。テーマの

views

フォルダーに存在する任意の Twig ファイルの名前をこの関数に渡すことができます。

index.php ファイルにウェルカム メッセージを表示しましょう。

リーリー

Timber は、welcome.twig ファイルをレンダリングし、HTML をロードし、次に示すように、フロントエンドに新しく変更されたビュー レイヤーを表示します。

render() 関数は、引数として

welcome.twig

を受け取りますが、twig テンプレートが次の場所にある限り、

views

、ファイルが自動的に読み取られます。 フォルダーにカスタム名/パスを使用する場合は、フォルダーへのパスを指定する必要があります。たとえば、テーマのルートに小枝フォルダーを作成し、それをレンダリング関数のパラメーターに追加しました。 リーリー 正式なロード順序

Timber は最初に子テーマを確認してから、親テーマにフォールバックします (WordPress と同じロジック)。公式のロード順序は次のとおりです:

ユーザー定義の場所

PHP スクリプトが呼び出されるディレクトリ (テーマではありません)

サブトピック

親トピック
PHP スクリプト (テーマを含む) を呼び出すためのディレクトリ
3. 項目 2 は他の項目の上に挿入されるため、プラグインで Timber を使用する場合は、プラグイン ディレクトリ内の twig ファイルが使用されます。
4. つまり、index.php ファイルには HTML がなくなり、Twig テンプレートがレンダリングされます。
5. 次に、動的データを
index.php

から

welcome.twig

ファイルに送信し、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 存储库中查看我的主题代码。

以上がTwig 入門: WordPress 開発をすぐに始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。