使用 Twig 進行 WordPress 開發:簡介

前言:Timber 是一個已經行之有年(測試版本在 2013 年 7 月就發佈了)的 WordPress 外掛,但是中文的社區討論 Timber 與 Twig 的用戶並不多,但這是我目前使用過後認為學習曲線比較緩,沒有太多複雜的前置知識的工具。我希望可以有一個比較完整的介紹,讓大家在製作自己的佈景主題時可以有一個不錯的選擇。

使用 Twig 進行 WordPress 開發:簡介

大家已經談論了很多關於 WordPress 的未來發展,很多人都認為 WP 缺乏模板語言。這也難怪,因為其他 CMS 平台例如 Django、Ruby on Rails、Node.js、Laravel,甚至是 Drupal 都有模版語言。雖然 這顆星球上使用 WordPress 開發的網站,佔據了將近 30%,你也很難用有沒有模版語言來判斷 WP 的策略好壞。但是,由於代碼中的模組性仍然缺失,如果能有一個模組化的方式架設網站,還是比較方便。

但是有個好消息!Twig 模板引擎和一個叫做 Timber 的外掛可以幫助我們在 WordPress 中編寫超級乾淨和模塊化的程式碼。在本系列中,我們將討論它的實現和與 WordPress 的整合。首先我將介紹什麼是 Twig,以及為什麼需要它,在接下來的三篇文章中,我將通過 Timber 說明與 WordPress 結合的不同類型的 Twig 模板。

為什麼使用 Twig?

PHP 的確有很多優秀的模板引擎,但是 Twig 確實在以下能力上超過了所有這些引擎:

豐富的功能

Twig 是功能最豐富、也是功能最強大的 PHP 模板引擎之一。它支持多重繼承和自動輸出轉譯,並幫助將模板劃分為幾個區塊(Blocks)或組件(Compentents),以維護模組化設計。不僅如此,開發人員還可以添加更多的外掛來滿足任何前端需求。

快速和高效

與普通的 PHP 模板相比,通過 Twig 編譯的模板需要的時間少了很多。編碼例程得到了高度的優化,你可以節省大量的開發時間。當你計劃更改基本框架時,這也很有用,因為 Twig 幫助創建一個獨立的模板層,可以與任何後端框架連接,無論是 Laravel 還是 WordPress。

對設計師和開發人員友好

Twig 適合設計師和開發人員的需求。即使你不是一個代碼愛好者,也可以很容易的使用 Twig,並且感覺基於組件編寫模塊模板是正確的。它的語法很容易理解和避免在模板文件中實現動態 PHP 操作。它非常現代化,幾乎可以適應所有最新的編碼標準。在處理 Twig 時,輸出逸出的概念非常全面。

讓我們從一個簡單的例子開始。

在普通的 PHP 中,你會得到這樣的輸出:

<?php echo $foo;  // $foo is any random variable ?>
<?php echo htmlspecialchars( $foo, ENT_QUOTES, 'UTF-8' ) ?>

在 Twig 中,我們可以把上面的程式碼簡化為:

{{ foo }}
{{ foo|escape }}
{{ foo|e }} {# shortcut to escape a variable #}

在 Twig 中逸出就是這麼簡單。只要添加雙括號,輸入變數的名稱,就會得到一個相對的輸出。在它旁邊加上 | e,我們就可以開始轉義了。在本系列接下來的三篇文章中,我們將對此進行更多的討論。

安全

Twig 自己對數據進行清理和保護。它的專用沙箱模式智能地監視整個代碼並過濾可能的最佳結果。這意味著用戶生成的模板可以輕鬆、安全地實現。沙箱環境只能在全局或局部上為這樣的特定模板啓用:

{{ include( 'post.html', sandboxed = true ) }}

在任何語法錯誤的情況下,Twig 通過生成一條消息來調試你的文件,該消息包含你的文件名和帶有問題代碼的行號等細節。

靈活

我剛剛提到 Twig 是一個現代模板引擎,這也意味著你可以擴展它的功能,因為它非常靈活。它完全支持高效的 lexer 和解析器,開發人員可以通過它定義自定義標記、過濾器、函數等。

其他

除了上面提到的所有特性之外,Twig 有很好的文檔記錄和完整的單元測試。它的 API 和模板庫是完全穩定的,可以處理所有複雜的任務。也有專門的在線書籍和完整的 API 文檔。

Twig 是 Drupal 8 的新模板語言,這是我使用這個模板引擎的主要動機。XWP 的優秀員工,尤其是韋斯頓·魯特,正在研究一項建議,讓 WordPress.com 的 VIP 用戶可以使用 Twig。

Timber:將 Twig 和 WordPress 結合在一起

到目前為止,整個討論圍繞著兩件事展開。首先,我們應該採用模組化的方法,在設計自己的 WordPress 佈景主題時將模版與數據分開;其次,Twig 可以幫助我們做到這一點。但是如何把這兩者結合在一起呢?

為了實現 Twig 和 WordPress 之間最好的整合,開發者們做出了各自的努力,其中一個大膽的嘗試是由一家名為 Upstatement 的網站創建的 Timber。它使用了 Twig 模板引擎,這使得在 WordPress 中編寫模組化並且乾淨的程式碼成為可能。

Timber 與 Twig 可以幫助你建立快速和模塊化的 WordPress 主題。這樣,你就可以將 HTML 代碼與普通的 PHP 文件分開,從而確保更持久的代碼模式。保持 HTML 和 PHP 獨立的概念使 PHP 文件能夠嚴格地專注於提供數據和邏輯,而 HTML 文件 (Twig 文件) 則專注於 web 應用程序的視圖層。

總的來說,Timber 有三個主要任務:

1. 它將 Twig 結合到 WordPress 中。
2. 它將呈現 Twig 模板。
3. 它添加了一個基礎 WordPress 數據集。

我認為他們的使命宣言說明瞭一切:

對於希望通過直觀、一致和完全可訪問的界面將 HTML 翻譯成高質量 WordPress 主題的開發人員來說,Timber 是一個工具。

1. 直觀:API 是圍繞程序員的期望編寫的,以用戶為中心。
2. 一致:所有的 WordPress 對象都可以通過像 slug、ID 和 name 這樣的多態屬性訪問。
3. 訪問:沒有黑盒子。所有的努力都是由開發人員獲得 100% 的 HTML。

Timber 是如何運作的呢?

對於一般的 WordPress 主題,PHP 和 HTML 代碼的所有片段都集成在相同的 PHP 模板文件中並進行修改。但是,對於 Timber,我們將模板分為兩個不同的檔案:PHP 文件和視圖/模板文件(View),即 .twig 文件。

因此,第一個副檔名是 .php 文件,第二個是 .twig。因此,如果你正在為 single.php 創建模板文件,你的文件將被命名為 single.php 和 single.twig。

前者文件對數據進行排序,而後者是使用 HTML 中的數據的模板。通過這種方式,你就能以模組化的方式在 WordPress 主題中添加 Actions。

讓我們總結一下:

木材在 PHP 和 HTML (Twig) 文件中處理 WordPress 主題的模板文件。這樣可以將邏輯與顯示分開。它為你提供了創建、樣式和顯示主題的新方法。

結論

Twig 有很多值得喜愛的地方。這篇文章只是介紹了使用模板引擎和 WordPress 的優點。模塊化代碼是更好的代碼,易於維護。現在是開發人員進行工作流轉移的時候了,我相信 Twig 可以幫助他們做到這一點。

在接下來的文章中,我將用 Twig 展示模板文件的實際實現。我們將通過代碼示例研究如何實現用於呈現 WP 圖像、注釋和菜單的 Twig。在那之前,如果你發現任何問題,請儘管問。