具有根堆棧的現代 WordPress 開發工作流程

WordPress 已經存在了很長時間，至少按照互聯網標準來說，它的理念一直是保持向後兼容性。 鑑於當今在線 WordPress 網站的數量龐大，這種對兼容性的關注是可以理解的。 然而，雖然這可以幫助那些仍然使用舊版 PHP 和 MySQL 的遺留環境（這本身就是一個安全風險，但這不是今天文章的主題），但它也導致新的 WordPress 版本沒有充分利用最新的 PHP 功能。

這也導致許多 WordPress 開發人員生活在 WordPress 泡沫中，沒有動力去學習新的和現代的前端開發技術，有時會陷入“好方法”的做事中。

您可以為 WordPress 採用現代開發工作流程嗎？

您當然可以，WordPress Roots 堆棧可以幫助您像 2019 年一樣進行開發，其中包含三個令人驚嘆的工具：

• 鼠尾草作為您的入門主題，
• 作為現代 WordPress 樣板的基岩，
• 格狀結構來管理不同環境的部署和供應。

Roots 團隊還有兩個額外的工具正在開發中：Acorn，一個插件構建框架，和 Clover，一個插件樣板。 由於兩者都處於 alpha 階段，因此本文不包含它們，但您絕對應該關注它們。

究竟什麼是根堆棧

最初被稱為 Roots 主題，它是一個堅如磐石的 HTML5 入門主題，旨在為新的 WordPress 網站提供一個更乾淨的起點。 隨著時間的推移，它演變成一整套工具，貫穿所有主要的現代 Web 技術和標準（從 Grunt 到 Gulp 和 Webpack、LESS 和 SCSS、NPM 和 Yarn、Bootstrap、PSR-2 編碼標準和 DRY 原則），從而迫使採用它的 WordPress 開發人員不斷學習並了解現代前端開發技術所提供的最新技術。

今天，Roots 成長為一整套不斷擴展的工具，旨在幫助您構建更好的 WordPress 網站，遵循從開發到登台和生產的整個週期，並通過迫使您走出舒適，讓您成為更好的開發人員由所謂的 WordPress 泡泡提供的區域。

但是讓我們看看它們提供的三個主要工具，它們是什麼，以及為什麼你應該考慮使用它們。

根賢者 9

Roots Sage 9 是專業維護的WordPress 入門主題的最後一次迭代，最初於 2011 年作為 Roots 發布。在其生命週期中，它經歷了許多變化、改進和重新考慮最佳實踐，最終成為今天是介紹 WordPress 開發的現代前端開發工作流程的一個很好的起點。

Sage試圖做的是採用MVC模式（Model-View-Controller），Views和Controller完全分離； 這使我們能夠重用視圖，它們不一定需要“知道”數據來自哪裡，但它們只是等待控制器提供一些數據來顯示。

Sage 9 包含的控制器並不是您在其他框架（如 Laravel）中可能已經熟悉的實際控制器，主要區別在於 Sage 9 控制器使用基於模板的路由而不是基於 URL 的路由。 基本上，您讓 WordPress 處理 URL 路由並為模板文件編寫控制器。

通過在整個開發過程中增加一些程度的複雜性，Sage 9 可能不是初學者的最佳選擇，因為您將需要大量學習才能最終掌握它並能夠在生產中使用：正確依賴和資產管理、代碼版本控制、新的項目結構、從 Laravel 派生的新模板引擎、DRY（不要重複自己）原則，你必須堅持嚴格的編碼標準，這與什麼有點不同WordPress 推薦； 但如果您是一位經驗豐富的開發人員，這可能是一個很好的開端。

如果您想全力以赴，請記住 Roots 團隊的開發人員之一 Ben Word 的以下建議：

Sage 不是一個主題框架，它是一個入門主題。 您應該很少需要更新它，並且通常您不應該從中創建子主題。 作為入門主題，Sage 旨在用作新項目的起點。

但是也：

如果 Underscores 是 1,000 小時的領先優勢，Sage 就是 10,000 小時的領先優勢。

Sage 的文件和文件夾結構

Sage 的文件和文件夾結構與我們習慣於在下劃線等其他入門主題中看到的有點不同，甚至在 Sage 8 的先前主要版本中也有所不同。

這是您在安裝 Sage 後會發現的內容：

 ├── app/ # it contains all the PHP code of your theme │ ├── controllers/ # your Controllers, it already contains a few │ │ # examples to use as a starting point │ ├── admin.php # setup for the WordPress theme customizer │ ├── filters.php # a good place to group all your theme │ │ # filter hooks │ ├── helpers.php # for various helper functions you want │ │ # to reuse in your theme │ └── setup.php # the main theme setup file ├── config/ # theme configuration files ├── dist/ # all built theme assets, never edit this! ├── resources/ # original theme assets, edit this instead! │ ├── assets/ # all front-end assets │ │ ├── build/ # Webpack and ESLint config │ │ ├── fonts/ # theme fonts │ │ ├── images/ # theme images │ │ ├── scripts/ # theme JS scripts │ │ ├── styles/ # theme SCSS stylesheets │ │ └── config.json # settings for compiled assets │ ├── views/ # all theme Blade templates │ │ ├── layouts/ # base Blade templates │ │ └── partials/ # partial Blade templates │ ├── functions.php # Composer autoloader and theme includes, │ │ # normally you should not edit this unless │ │ # you know what you're doing │ ├── index.php # required by WordPress but left blank │ │ # intentionally, never edit this! │ ├── screenshot.png # the screenshot used in the WordPress admin │ └── style.css # required by WordPress, it should contain │ # only the theme meta information ├── vendor/ # Composer packages, never edit this! ├── composer.json # autoloading for `app/` files ├── composer.lock # Composer lock file, never edit this └── package.json # Node.js dependencies and scripts

另外，代碼編輯器和 IDE 使用的其他一些文件，例如 .editorconfig、.eslintrc.js、.stylelintrc.js、phpcs.xml 等。

以下是 Sage 9 基本要求的快速概覽：

• WordPress >= 4.7
• PHP >= 7.1.3（啟用 php-mbstring）
• 作曲家
• Node.js >= 8.0.0
• 紗

基岩

基岩就像類固醇上的 WordPress！

如果 Sage 改進了您的主題開發，Bedrock 改進了整個 WordPress 安裝。 它通過提供現代項目樣板、改進的文件夾結構和安全性（例如，通過在網站根目錄中不包含您的配置文件）、配置和 ENV 文件以及適當的依賴管理（是的，包括 WordPress 插件和主題）來做到這一點.

用一句話來描述它，我們可以說 Bedrock 是一個獨立的 WordPress 項目，它可以自動安裝核心文件和所需的插件。

文件和文件夾結構

如果您查看基本的基岩安裝，您可能會在開始時感到迷茫。 Bedrock 將 web、配置和依賴文件分離到它們自己的文件夾中。 這是裸骨結構的樣子：

 ├── config/ # WordPress configuration files │ ├── environments/ # configuration files for other │ │ │ # environments, they will override │ │ │ # production configuration │ │ ├── development.php # overrides for WP_ENV === 'development' │ │ └── staging.php # overrides for WP_ENV === 'staging' │ └── application.php # main configuration for production │ # environment, it's the equivalent of │ # the wp-config.php file ├── vendor/ # Composer packages, never edit this! ├── web/ # the new root folder of the webserver │ ├── app/ # your new wp-content folder │ ├── wp/ # WordPress core files, never edit this! │ ├── index.php # WordPress view bootstrapper │ └── wp-config.php # required by WordPress, never edit this! ├── .env # all environment variables: db name, │ # user and password, salts, current │ # environment, site urls, and others ├── composer.json # here you can manage versions of │ # WordPress, plugins and other │ # dependencies └── composer.lock # Composer lock file, never edit this

加上其他一些不太重要的文件。

基岩要求是：

• PHP >= 7.1
• 作曲家

格子

Trellis 是一個現代 LEMP 堆棧，可以無縫地管理您的開發、登台和生產服務器，旨在使它們盡可能地相似（“開發和生產平價”）。 這意味著，如果您的自定義 WordPress 站點在您的開發環境中工作，那麼可以安全地假設它也可以在生產環境中工作，並且您可以放心地進行部署。

對於本地開發，Trellis 使用 Vagrant，通過一個簡單的vagrant up您將擁有一個運行適當現代環境的虛擬機。

使用 Ansible playbook 管理對暫存和生產環境的配置和部署，這些 playbook 是告訴 Ansible 做什麼的 YAML 文件。

格狀結構建議的文件夾結構

Trellis 有一個建議的文件夾結構，僅由兩個子文件夾組成：

 ├── trellis/ # the clone of the Trellis repository └── site/ # the Bedrock-based WordPress website

我建議保持原樣，但可以根據您的喜好和需求進行定制。

格子要求

• 作曲家
• 虛擬機 >= 4.3.10
• 流浪者 >= 2.1.0

為什麼你應該使用它

如果 WordPress 已經按原樣工作，為什麼要切換到更複雜的堆棧並花費大量時間來掌握它？ 因為有明顯的優勢，也有一些不太明顯的優勢。 讓我們試著看看它們是什麼。

與框架無關的入門主題

太多的 WordPress 入門主題迫使您使用特定的 CSS 框架，您可能喜歡也可能不喜歡甚至知道，但 Sage 完全與框架無關。 在安裝過程中，如果你想從頭開始或使用其他東西，你可以選擇自動包含 Bootstrap 4、Bulma、Foundation、Tachyons、Tachyons、Tachyons，或者根本不包含任何框架（提示：最近我開始喜歡 Tailwind CSS 很多）。

專業提示：在 Windows 機器上，您可能會在安裝過程中收到“Windows 平台不支持 TTY 模式”消息，並且您將無法選擇框架或配置 Sage。 如果您想利用自動配置，則必須從主題文件夾中手動運行這三個命令：

 $ vendor\bin\sage meta # to specify the metadata for your # theme (the name, etc., that goes # in style.css). $ vendor\bin\sage config # to specify your theme's dev URL and # theme directory. $ vendor\bin\sage preset # to set up the theme with one of the # supported frameworks or no # framework at all.

現代構建過程

使用 Sage 中包含的 Webpack，您無需再考慮編譯資產、連接和縮小 JavaScript 和 CSS 代碼、優化圖像、檢查 JavaScript 和样式錯誤以及管理外部庫。 構建過程將通過簡單的yarn build （或yarn build:production ，如果您希望您的資產針對生產使用進行優化）來處理所有這些，在您的主題/dist/文件夾中生成所有靜態文件。

現代 PHP 和要求

您可以運行 WordPress 的最低 PHP 版本是 PHP 5.2.4，這將確保所有在舊環境中運行其網站的用戶向後兼容，但舊版本的 PHP (<= 7.0) 已正式結束生命，因此它們不再受支持，它們可能會使您的站點面臨安全漏洞和性能問題。

Sage 和 Bedrock 都需要 PHP 7.1 的健全版本（儘管如果您可以選擇 7.3，請這樣做）。

Sage 9 還完全採用 PSR-2 編碼標準（最廣泛使用和接受的編碼

PHP 社區使用的標準），這與 WordPress 編碼標準有點不同，但它們允許您擁有更清潔和更易於維護的代碼，特別是如果您在團隊中工作或必須與他人共享您的代碼。

更好的依賴和包管理

Roots 堆棧大量使用 Composer 來管理所有依賴項和包，包括 WordPress 核心、插件和主題。 如果您使用第三方工具來管理 WordPress 更新（如 ManageWP、MainWP 或 InfiniteWP），這可能是一個問題，但有人可能會爭辯說，將所有內容置於版本控制之下可以讓您獲得更多控制權，並且更容易回滾到以前的工作如果出現問題，版本。

此外，Sage 使用 Yarn 作為應用程序代碼的包和依賴管理器並啟動構建過程。

更好的模板文件

WordPress 缺乏真正的模板引擎，因此 Sage 採用了 Laravel 的 Blade 並遵循 DRY 原則來彌補這一不足：不要重複自己。

這是默認的 single.blade.php 模板文件的樣子，只有 6 行代碼：

 @extend('layouts.app') @section('content') @while(have_posts()) @php the_post() @endphp @include('partials.content-single-'.get_post_type()) @endwhile @endsection

Blade 模板引擎將 Views 和 Controllers 完全分離，其語法比 PHP 標籤更優雅、簡潔、易讀、更易編寫。 這裡的經驗法則是將所有 PHP 代碼留在模板文件之外（或至少嘗試這樣做）。

使用 Blade 的另一個好處是模板繼承：基本佈局模板（默認為/resources/views/layouts/app.blade.php ）定義包含公共網站元素的塊，然後由其子模板繼承。 模板繼承非常適合從單個模板中刪除重複標記並保持內容乾燥。

瀏覽器同步

通過運行yarn start ，您將啟動 Browsersync 會話。 Browsersync 是一個用於在開發時同步瀏覽器測試的模塊。 它將監視對您的前端資產所做的更改，並與 Webpack 一起工作，它會自動將更改注入您的瀏覽器會話。

快速、簡單、安全的 WordPress 部署

Trellis 提供零停機時間的 WordPress 部署。 當您啟動部署時，Trellis 將 git clone 您的存儲庫，運行 composer install 然後將符號鏈接更新到當前版本，因此它永遠不會直接編輯當前在生產中提供的文件。

使用 Bedrock 時，Trellis 也需要很少的配置。

缺點

使用完整的 Roots 堆棧的唯一缺點（除了學習新東西，這根本不應該被視為問題）是您必須使用對網格友好的託管服務提供商，如 Kinsta、DigitalOcean droplet 或任何其他主機至少支持 SSH、Composer 和 WP-CLI，以及更新 Web 根路徑的選項。

這使得大部分廉價（ish）共享主機退出遊戲，這是您和/或您的客戶在開始新項目之前必須考慮的事情。

如何開始

這可以被認為是對著名的“WordPress 5 分鐘安裝”的新嘗試，但對於現代前端開發人員而言。 它為以後的開發增加了幾度複雜性，但最終，您可以獲得的好處絕對值得。

我們將專注於採用全棧（Sage、Bedrock 和 Trellis），但您可以只使用它們中的一個或任意組合。 Sage 可以用作任何 WordPress 安裝中獨立主題的起點； Bedrock 可以與您喜歡的任何 WordPress 主題一起使用； 和 Trellis 部署是為基於基岩的站點配置的，並負責處理所需的一切，但只要稍加修改，它就可以根據幾乎任何需求進行定制。

如何創建新項目

使用 Trellis、Bedrock 和 Sage 設置一個新的 WordPress 項目非常簡單，只需幾個命令行即可。

在您想要的文件夾中安裝格子（例如example.com ）：

 $ mkdir example.com && cd example.com $ git clone --depth=1 [email protected]:roots/trellis.git $ rm -rf trellis/.git

在/site/子文件夾中安裝 Bedrock：

 $ composer create-project roots/bedrock site $ cd site/web/app/themes/

安裝和構建 Sage：

 $ composer create-project roots/sage your-theme-name $ cd your-theme-name/ $ yarn && yarn build

部署

如果您根據官方文檔正確配置了所有內容，則部署到登台或生產會更加容易。 只需一個命令行即可（從example.com/trellis/文件夾運行）：

 $ ansible-playbook deploy.yml -e "site=<domain> env=<environment>"

您還可以輕鬆回滾您的部署，只需運行：

 $ ansible-playbook rollback.yml -e "site=<domain> env=<environment>

關於在 Windows 上設置開發環境的提示

如果你在 google 上搜索如何安裝和使用 Roots 堆棧，尤其是 Trellis，你會發現很多教程都集中在 Linux 或 MacOS 上，但在 Windows 上可用的信息很少，你會發現兩個主要問題： Ansible 不可用對於 Windows，Vagrant 在 Windows 機器上通常非常慢。

當我最初想到這篇文章時，Windows 的官方 Trellis 文檔建議在 Vagrant 虛擬機內運行 Ansible，但這是一種很老套的做事方式，而且不是很可靠。

從那時起，他們更新了文檔，添加了有關使用 WSL（Linux 的 Windows 子系統）設置所有內容的正確說明，因此無需重新發​​明輪子並編寫有關它的教程。 很高興知道在安裝 Trellis 之前可以遵循三頁詳細的分步說明：Windows 安裝程序、Windows 安裝程序：Sage 和 Windows 安裝程序：Trellis。

快樂編碼！