使用Twig：塊和嵌套，快速啟動WordPress開發
在上一篇文章中，我介紹了透過 Timber 將 Twig 模板引擎與 WordPress 整合以及開發人員如何將 PHP 檔案中的資料傳送到 Twig 檔案。讓我們討論如何使用 Twig 創建基本模板、這種 DRY 技術的優點以及 Timber-Twig WordPress Cheatsheet。
在 Twig 中建立基本範本
Twig 遵循 DRY（不要重複自己）原則。 Twig 最重要的功能之一是具有巢狀和多重繼承的基本範本。雖然大多數人以線性方式使用 PHP 包含，但您可以建立無限層級的巢狀區塊來專門控制您的頁面模板。
將您的基本範本視為其中包含多組區塊的父範本。子模板可以擴展父模板並修改其中的任何一個或多個區塊，而無需重寫程式碼，這在兩個模板中都是相似的。
讓我們看一下父模板或基礎模板範例，即 base.twig 檔案。您可以將其與其他 Twig 範本一起放置在視圖資料夾中。您可以在任何 Twig 範本中呼叫此文件，並將其用作該特定 Twig 文件的父範本。鍵入以下程式碼行以建立 views 資料夾。此基本模板將為您的 WordPress 主題提供基本結構。這是一個簡單的 base.twig 檔案的程式碼。
{# Base Template: base.twig #}
{% block html_head_container %}
{% include 'header.twig' %}
{% endblock %}
<body class="{{body_class}}">
<div class="wrapper">
{% block content %}
<!-- Add your main content here. -->
<p>SORRY! No content found!</p>
{% endblock %}
</div>
<!-- /.wrapper -->
{% include "footer.twig" %}
</body>
</html>
Twig 中的註解：{# 基本範本：base.twig #}
您可以使用 {# comment here #} 語法在 Twig 中編寫註解。若要註解掉範本中的部分行，請使用註解語法 {# ... #}。這對於調試或為其他模板設計者或您自己添加資訊非常有用。您可以在第 1 行找到註解。
區塊： {% block html_head_container %} {% endblock %}
Twig 和 Timber 的整個理念都圍繞著 WordPress 中的模組化程式碼方法。我一直在反覆寫關於 Twig 中的資料以組件或區塊的形式處理的想法。
區塊用於繼承，同時充當佔位符和替換。它們詳細記錄在擴展標籤的文檔中。
{% block add_block_name_here %} 阻止此處的內容 { % endblock % }
在上面編寫的程式碼中，您可以找到一個名為 html_head_container 的區塊，它跨越第 3 行到第 7 行。擴展此 base.twig 基本模板的任何模板都可以繼承同一塊的內容或修改它以添加其他內容。還有另一個名為 content {% block content %} 的區塊，跨越第 13 行到第 18 行。
類似地，創建區塊的概念也得到了進一步擴展，您也可以建立無限層級的嵌套區塊。這才是真正的DRY原則。
包含語句：{% include "header.twig" %}
#Twig 模板可以包含其他 Twig 模板，就像我們在 PHP 中所做的那樣。這個 base.twig 文件將會是一個通用包裝器，如果沒有它的頁首和頁尾文件，它是不完整的。因此，語法 {% include "file.twig" %} 將幫助我們包含兩個不同的 Twig 模板：
- 標頭模板
{ % include "header.twig" %}第 5 行。 - 頁尾模板（
{% include "footer.twig" %}第 23 行。
擴充基本模板
我們建立了一個 base.twig 檔案作為父模板，並將內容區塊留空。該區塊可以在任何會修改它的自訂 Twig 檔案中使用，並且基本範本的其餘部分將按原樣繼承。例如，讓我們建立一個 single.twig 文件，該文件將擴展 base.twig 範本並修改 content 區塊。
{# Single Template: `single.twig` #}
{% extends "base.twig" %}
{% block content %}
<div class="single_content">
<h1 id="post-title">{{ post.title }}</h1>
<p>{{ post.get_content }}</p>
</div>
{% endblock %}
此程式碼顯示自訂 single.twig 檔案。在第 3 行，此範本擴展為 base.twig 作為其父模板或基本模板。 extends 標籤可用於從另一個範本擴充模板。
這裡，與header 和footer 相關的所有詳細資訊均繼承自base.twig 文件，該文件是父模板，而 content 區塊將替換為貼文標題和內容。這有多有趣？
木材的 WordPress 備忘單
Timber 的開發人員已確保它從核心到最終用戶以各種可能的方式補充 WordPress。儘管 Timber 中 WordPress 函數的轉換語法有些不同，但它有很好的文件記錄。在本文末尾，我將分享 WordPress 函數及其 Timber 等效函數的一些轉換清單。讓我們回顧一下。
简要回顾！
在我的上一篇文章中，我创建了一条欢迎消息，该消息仅通过演示网站主页上的 PHP 字符串填充。其代码可以在 GitHub 上的分支中找到。让我们再次重复此过程，但使用不同且更具技术性的方法。
现在，我将显示相同的欢迎消息，但这次是通过创建一个填充在主页上的新页面。
检索 Twig 中的 WordPress 函数
创建一个标题为“欢迎来到我的博客！”的新页面。并在点击发布按钮之前在其中添加一些内容。
现在让我们在主页上显示这个欢迎页面的内容。为此，请再次转到 index.php 文件并添加以下代码行。
<?php /** * Homepage */ // Context array. $context = array(); // Add the page ID which is 4 in my case. $context[ 'welcome_page' ] = Timber::get_post( 4 ); // Timber render(). Timber::render( 'welcome.twig', $context );
在这里，我添加了一个 $context 数组，在其中添加了一个元素 welcome_page 然后使用 get_post() 函数来获取我刚刚创建的页面。为此，我提交了页面 ID，在本例中为 4。
在 welcome.twig 文件中，让我们查看 print_r 元素 welcome_page 并看看我们得到了什么数据。我的welcome.twig 文件目前看起来像这样。
{# Message Template: `welcome.twig` #}
<section class="message">
<pre class="brush:php;toolbar:false">
<code>{{ welcome_page | print_r }}</code>
我可以确认 $context 数组中的这个元素现在有一个 ID 为 4 的特定页面的 TimberPost 对象。
从这里我们可以获得所有可以在前端显示的属性。例如，我只想显示页面标题和内容。所以现在我的 welcome.twig 文件如下所示：
{# Message Template: `welcome.twig` #}
<section class="message">
<h2 id="welcome-page-title">{{ welcome_page.title }}</h2>
<p>{{ welcome_page.content }}</p>
</section>
主页上有我们需要的信息。
WordPress 备忘单
正如我之前所说，Timber 为您提供了一些 WordPress 函数的便捷转换。这些功能可以帮助您获取与以下内容相关的信息：
- 博客
- 身体课程
- 页眉/页脚
get_context() 函数
有一个 Timber::get_context() 函数，用于检索开发人员希望在整个网站的前端显示的网站信息负载。文档是这样解释的：
这将返回一个对象，其中包含我们在整个站点中需要的许多常见内容。像你的 nav、wp_head 和 wp_footer 这样的东西你每次都会想要开始（即使你稍后覆盖它们）。您可以执行$context = Timber::get_context(); print_r( $context );查看内部内容或打开 timber.php 自行检查。
<?php $context = Timber::get_context(); ?>
不仅如此，您还可以通过方便的过滤器将您自己的自定义数据添加到此函数中。
<?php
/**
* Custom Context
*
* Context data for Timber::get_context() function.
*
* @since 1.0.0
*/
function add_to_context( $data ) {
$data['foo'] = 'bar';
$data['stuff'] = 'I am a value set in your functions.php file';
$data['notes'] = 'These values are available everytime you call Timber::get_context();';
$data['menu'] = new TimberMenu();
return $data;
}
add_filter( 'timber_context', 'add_to_context' );
您可以在下面找到更多与此类似的转换，这些转换可以与 Timber 一起使用。
博客信息
-
blog_info('charset')=>{{ site.charset }} -
blog_info('描述')=>{{ site.description }} -
blog_info('站点名称')=>{{ site.name }} -
blog_info('url')=>{{ site.url }}
身体等级
-
implode(' ', get_body_class())=><body class="{{ body_class }}">
主题
-
get_template_directory_uri()=>{{ theme.link }}（用于父主题） -
get_template_directory_uri()=>{{ theme.parent.link }}（用于子主题） -
get_stylesheet_directory_uri()=>{{ theme.link }} -
get_template_directory()=>{{ theme.parent.path }} -
get_stylesheet_directory()=>{{ theme.path }}
wp_函数
-
wp_head()=>{{ wp_head }} -
wp_footer()=>{{ wp_footer }}
让我们从博客信息开始尝试一些功能。将 foo 写入 {{ site.name }}。
前端将显示这样的站点标题：
Timber 还具有一些函数转换，可以通过 TimberPost( )。在解释这个函数的用法之前，我们先列出与其相关的函数转换。
发布
-
the_content()=>{{ post.content }} -
the_permalink()=>{{ post.permalink }} -
the_title()=>{{ post.title }} -
get_the_tags()=>{{ post.tags }}
用法
在 single.php 文件中使用此代码。
<?php $context = Timber::get_context(); $context[ 'post' ] = new TimberPost(); Timber::render( 'welcome.twig', $context ); ?>
现在让我们测试 Twig 文件中的 {{ post.title }} 函数。
<section class="single_post">
<h2 id="post-title">{{ post.title }}</h2>
</section>
保存，前端会显示这样的帖子标题：
轮到你了！
今天，您在构建 WordPress 主题时见证了 Timber 和 Twig 的 DRY 原则的实际实施。阅读本教程并尝试实现它，如果您有任何问题，请告诉我。您可以在此 GitHub 存储库的 WP Cheatsheet 分支中找到完整的代码。
在下一篇也是上一篇文章中，我将讨论如何在基于 Twig 的 WordPress 模板中处理图像和菜单。在此之前，请在 Twitter 上与我联系以获取您问题的答案，或在此处发布问题。
以上是使用Twig：塊和嵌套，快速啟動WordPress開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
Go語言中的泛型函數是否可以互相嵌套？
Apr 16, 2024 pm 12:09 PM
巢狀泛型函數Go1.18中的泛型函數允許建立適用於多種類型的函數，而嵌套泛型函數可以建立可重複使用的程式碼層級結構：泛型函數可以相互嵌套，建立一個嵌套的程式碼重用結構。透過將篩選器和映射函數組成管道，可以建立可重複使用的類型安全管道。巢狀泛型函數提供了創建可重複使用、類型安全的程式碼的強大工具，從而提高程式碼效率和維護性。
如何在CakePHP中使用Twig？
Jun 05, 2023 pm 07:51 PM
在CakePHP中使用Twig是一種將模板和視圖分開的方法，能夠使程式碼更加模組化和可維護，本文將介紹如何在CakePHP中使用Twig。一、安裝Twig先在專案中安裝Twig函式庫，可以使用Composer來完成這個任務。在控制台中執行以下指令：composerrequire"twig/twig:^2.0"這個指令會在專案的vendor
如何使用Vue表單處理實現表單的遞歸嵌套
Aug 11, 2023 pm 04:57 PM
如何使用Vue表單處理實作表單的遞歸巢狀引言:隨著前端資料處理和表單處理的複雜性不斷增加，我們需要透過一種靈活的方式來處理複雜的表單。 Vue作為一種流行的JavaScript框架，為我們提供了許多強大的工具和特性來處理表單的遞歸巢狀。本文將向大家介紹如何使用Vue來處理這種複雜的表單，並附上程式碼範例。一、表單的遞歸巢狀在某些場景下，我們可能需要處理遞迴巢狀的
如何在PHP中使用Twig模板引擎進行Web開發
Jun 25, 2023 pm 04:03 PM
隨著Web開發技術的不斷發展，越來越多的開發者開始尋找更靈活、更有效率的模板引擎來進行Web應用的開發。其中，Twig是一款十分優秀、流行的PHP模板引擎，它基於Symfony框架開發並支援無限擴展，非常適合用於建立複雜的Web應用程式。本篇文章將介紹如何在PHP中使用Twig模板引擎進行Web開發。一、Twig範本引擎簡介Twig是由FabienPoten
PHP8.0中的範本庫：Twig
May 14, 2023 am 08:40 AM
PHP8.0中的範本庫：TwigTwig是一款目前廣泛用於PHPWeb應用程式中的範本庫，具有可讀性高、易於使用和可擴充性強等特點。 Twig使用簡單易懂的語法，可以幫助Web開發人員以清晰、有序的方式組織和輸出HTML,XML,JSON等文字格式。本篇文章將為您介紹Twig的基本語法和特點以及它在PHP8.0中的使用。 Twig的基本語法Twig採用類似P
使用Twig和Timber圖像、選單和用戶，快速啟動WordPress開發
Sep 04, 2023 pm 03:37 PM
到目前為止，您已經了解了透過Timber使用Twig的基本概念，同時建立了模組化WordPress主題。我們也基於DRY原則，使用Twig研究了區塊嵌套和多重繼承。今天，我們將探討如何透過Timber外掛程式使用Twig在主題中顯示附件圖像、WordPress選單和使用者。木材中的圖像圖像是任何WordPress主題的重要元素之一。在常規的WordPress編碼實務中，影像與PHP整合在正常的HTML影像標籤內。但是，Timber提供了一種相當全面的方法來處理img（圖像）標籤，該方法是模組化且乾淨的。
如何在HTML中建立巢狀表格？
Sep 09, 2023 pm 10:05 PM
表格是網頁開發的基本和關鍵方面，用於以有序且清晰的格式呈現資訊。然而，在某些情況下可能需要呈現更複雜的數據，從而需要使用巢狀表。巢狀表是位於其他表格儲存格內的表。在本文中，我們將引導您完成在HTML中建立嵌套表格的過程，並透過細緻詳細的解釋並附有插圖來幫助您更有效地理解概念。無論您是新手還是經驗豐富的網頁設計師，本文都將為您提供熟練地使用HTML建立巢狀表格所需的知識和專業知識。在我們開始探索製作巢狀表格之前，有必要了解HTML表格的基本組成。 HTML表格是透過<table>元素的實
如何在C++中實現巢狀異常處理？
Jun 05, 2024 pm 09:15 PM
巢狀異常處理在C++中透過嵌套的try-catch塊實現，允許在異常處理程序中引發新異常。嵌套的try-catch步驟如下：1.外部try-catch區塊處理所有異常，包括內部異常處理程序拋出的異常。 2.內部try-catch區塊處理特定類型的異常，如果發生超出範圍的異常，則將控制權交給外部異常處理程序。
