現在我們了解到，Twig 與 WordPress 外掛 Timber 一起可以幫助開發人員在開發 WordPress 主題時編寫模組化程式碼。透過這種模組化方法，您可以分別處理 Web 應用程式的邏輯層和視圖層。讓我們跳到稍微更技術性的內容：建立 Twig 範本、將 HTML 轉換為 Twig 文件，以及如何使用 Twig 範本呈現邏輯或資料。
首先，我要安裝 Timber，這是一個 WordPress 插件，有助於將 Twig 模板引擎與 WP 整合。那麼，讓我們開始吧。
安裝 Timber 後，您現在可以開始將模板檔案拆分為資料和視圖檔案。
在我們開始建立 Twig 範本之前，我假設您已經進行了某種本機 WordPress 設定。對於這個特定的教程，我的設定是：
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>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 邏輯相同）。官方的載入順序是：
第 2 項插入到其他項目之上，這樣如果您在插件中使用 Timber，它將使用插件目錄中的 twig 檔案。
所以，現在index.php檔案裡面沒有HTML，它正在渲染一個Twig模板。
現在讓我們將一些動態資料從 index.php 發送到 welcome.twig 檔案並使用 Timber 進行渲染。
要将数据从 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中文網其他相關文章！
