Twig 入門: WordPress 開発をすぐに始めましょう-htmlチュートリアル-php.cn

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

WBOY

リリース： 2023-09-02 08:29:01

オリジナル

815 人が閲覧しました

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 は、最終的にロジックを取得したときに見栄えがよくありません。

Twig 入门：快速启动您的 WordPress 开发モジュール式アプローチ

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

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

リーリー

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

views

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

.twig

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

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

リーリー

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

views

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

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

リーリー

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

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

welcome.twig

を受け取りますが、twig テンプレートが次の場所にある限り、 Twig 入门：快速启动您的 WordPress 开发

views

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

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

ユーザー定義の場所

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

サブトピック

項目 2 は他の項目の上に挿入されるため、プラグインで Timber を使用する場合は、プラグインディレクトリ内の twig ファイルが使用されます。
つまり、index.php ファイルには HTML がなくなり、Twig テンプレートがレンダリングされます。
次に、動的データを

から

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 标签内。我知道，就是这么简单，而且代码看起来也很干净。

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

Twig 入门：快速启动您的 WordPress 开发

结论

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

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

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

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

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