Twig 入門：快速啟動您的 WordPress 開發

現在我們了解到，Twig 與 WordPress 外掛 Timber 一起可以幫助開發人員在開發 WordPress 主題時編寫模組化程式碼。透過這種模組化方法，您可以分別處理 Web 應用程式的邏輯層和視圖層。讓我們跳到稍微更技術性的內容：建立 Twig 範本、將 HTML 轉換為 Twig 文件，以及如何使用 Twig 範本呈現邏輯或資料。

安裝木材

首先，我要安裝 Timber，這是一個 WordPress 插件，有助於將 Twig 模板引擎與 WP 整合。那麼，讓我們開始吧。

• 登入您的 WordPress 資訊中心。
• 轉至外掛程式 > 新增外掛。
• 搜尋 Timber 外掛。
• 安裝並啟動外掛程式。

安裝 Timber 後，您現在可以開始將模板檔案拆分為資料和視圖檔案。

建立樹枝模板

在我們開始建立 Twig 範本之前，我假設您已經進行了某種本機 WordPress 設定。對於這個特定的教程，我的設定是：

• 本機主機 WP 安裝（我使用的是 ServerPress 的 DesktopServer）。
• 已安裝並啟用 Timber 外掛程式。
• 可選：任何基礎/入門主題（我使用自己的主題，即 Neat）。

UpStatement 也建構了一個 Timber Starter 主題。

讓我們開始吧。我想在主頁頂部顯示歡迎訊息。如果沒有 Twig，我該怎麼辦？也許，我會在 PHP 檔案中包含 HTML 程式碼並回顯歡迎訊息，就像我在下面的程式碼範例中所做的那樣。我的 index.php 檔案看起來像這樣。

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

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

<?php get_footer(); ?>

現在，我本地 WordPress 安裝的主頁在頂部顯示一條歡迎訊息。這是螢幕截圖。

問題

#這種方法的問題在於我們將資料/邏輯與視圖混合在一起。該文件越複雜，維護就越困難，更不用說理解了，例如，如果您在此程式碼後面添加帶有一些參數的 WordPress 循環，然後再進行過濾和分頁。除此之外，當您最終得到一些邏輯時，HTML 中的 PHP 看起來並不好。

模組化方法

為了使其更加模組化，我們可以將主頁上的內容視為區塊或元件的形式。預設可以有兩個完整的，即來自 The_Loop 的帖子和分頁。現在我們想在頂部添加另一個元件，即歡迎訊息，讓我們為該元件建立一個 Twig 檔案。

在編輯器中開啟一個新的空白文件，然後複製貼上以下程式碼行。

#

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

在主題的根目錄中建立一個名為 views 的新資料夾，並使用 .twig 副檔名儲存此檔案。例如，我將檔案儲存為 welcome.twig。

渲染樹枝模板

Timber 為我們提供了一些有用的函數，其中之一就是渲染函數。你可以這樣稱呼它：

Timber::render();

此函數最多可以接受四個參數。由於這超出了本文的範圍，您可以在 Timber 文件中閱讀相關內容。我們可以將主題的 views 資料夾中存在的任何 Twig 檔案的名稱傳遞給此函數。

讓我們在 index.php 檔案中渲染歡迎訊息。

#

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

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

get_footer();

Timber 渲染 welcome.twig 文件，載入 HTML 並在前端顯示新修改的視圖層，如下所示：

render() 函數將welcome.twig 作為它的參數，但只要樹枝模板位於名為 views 的資料夾內，它會自動讀取該檔案。

如果您想要對資料夾使用自訂名稱/路徑，則必須提供該資料夾的路徑。例如，我在主題的根目錄中建立了一個 twig 資料夾，並將其新增到渲染函數的參數中。

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

官方載入順序

Timber 將首先查看子主題，然後回退到父主題（與 WordPress 邏輯相同）。官方的載入順序是：

1. 使用者定義的位置
2. 呼叫PHP腳本的目錄（但不是主題）
3. 子主題
4. 父主題
5. 呼叫PHP腳本的目錄（包括主題）

第 2 項插入到其他項目之上，這樣如果您在插件中使用 Timber，它將使用插件目錄中的 twig 檔案。

所以，現在index.php檔案裡面沒有HTML，它正在渲染一個Twig模板。

現在讓我們將一些動態資料從 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 id="the-message">{{ 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中文網其他相關文章！