終極 WordPress 開發環境

在過去的幾年裡，我在 WPMU DEV 博客上寫了很多教程，我在其中分享了關於我使用的開發環境的花絮。

所以今天，我認為是時候分享一個完整的環境了，我將把它放在一起並用於更大規模的開發。

捲起袖子，準備好弄髒你的手吧！ 因為下面是我建立的那種開發環境的完整演練，以及你是如何做到的。

注意：本教程不適合初學者。 如果您是 WordPress 開發新手，則不需要如此復雜的環境，因為它可能會引入不必要的複雜性。 另請注意，本文專門針對 WordPress。 非 WordPress 項目的想法和目標可能相同，但使用的方法和工具會有所不同。

目錄

1. 1. 什麼是良好的開發環境
   2. 不斷發展的環境
   3. 本地服務器
   4. 命令行工具
   5. Bash 腳本
   6. WordPress 插件
   7. 雜項工具

什麼是良好的開發環境？

在我看來，一個好的開發環境具有以下三個屬性：

1. 高度便攜
2. 高度可配置
3. 高度自動化

可移植性

可移植性是一個重要因素，因為除了共享我正在開發的主題/插件之外，我還希望能夠共享開發環境。

我希望其他開發人員能夠從 GitHub 上查看源代碼並立即開始使用，包括使用 Gulp 或 Grunt 等任何工具。 這使得項目很容易進入，如果你支持更好的協作，你就有更高的機會成功。

如果您需要在另一台計算機上工作，或者您想向您的同事展示您一直在做什麼，便攜性也可以為您提供幫助。 能夠在幾分鐘內在任何地方進行設置的能力對我的幫助比我想像的要多。

可配置性

配置環境的能力至關重要。 在服務器端，WordPress 非常寬容，但能夠微調您的構建設置、Grunt 任務和其他選項是一個巨大的好處。

配置選項和可移植性意味著您可以在不同情況下輕鬆測試您的工作。 切換 PHP 版本或什至 HHVM 以確保如何？ 也許您可以檢查與舊版本 WordPress 和流行插件的兼容性？ 這些是你應該能夠測試的東西。

自動化

自動化是為 WordPress 工作創建開發環境的主要驅動力之一。 我不想擔心我的腳本、樣式表、保存我的工作、部署等等。

命令行工具構成了我的自動化套件的支柱，它可以完成從使用一個命令設置 WordPress 到打包我的產品的所有工作。

正在進行的工作

在我們深入探討細節之前，我想我會先談談開發環境是如何由使用它們的人構想出來的。

如果您是命令行、構建工具、版本控制系統等領域的新手，那麼我似乎是一名專業人士，他什麼都知道，並且為每項任務使用完美的工具。

這與事實相去甚遠！ 我精通 WordPress 的所有東西，但其他一切都只是我附加的或需要/想要學習讓我的生活更快的一些額外內容。 我複制了其他人，自己找出了一些東西，並根據需要修改了一些東西（有時失敗得很慘！）。

我的開發環境（和許多其他環境）混合了以下內容：

• 豐富的個人知識
• 其他人的好建議
• 我發現一些隨機的東西有效
• 可以做得更好但我懶得弄清楚的步驟

換句話說：它並不完美，但它可以完成工作。 有很多改進的空間和使用其他工具的地方，您可能更喜歡這些工具。 如果您知道更多有用的工具或工作流程，請隨時使用它們並在評論中告訴我！

本地服務器

WordPress 運行在 PHP 上，這是一種服務器端編碼語言，因此我們需要一台服務器來運行 WordPress。 最受歡迎的選項是：

• 流浪漢
• WAMP
• XAMPP
• MAMP

多年前，我開始使用 XAMPP。 然後，當我成為 Mac 用戶時，我轉向了 MAMP，然後在大約兩年前最終切換到 Vagrant。 網絡和使用的工具一直在發展，現在我也傾向於使用 Vagrant 和 MAMP。 我將在下面解釋原因。

放大器

MAMP、XAMPP 和 WAMP 中的“AMP”代表 Apache、MySQL 和 PHP。 這些工具都安裝服務和 GUI 來幫助您管理服務器使用的進程。 您下載並安裝應用程序，按下“開啟”按鈕，一切都會按預期工作。

優點：
它快速、簡單、直觀，並且始終適用於所有系統。 它有一個很棒的用戶界面，您可以使用它來調整 PHP 設置、切換到 Nginx、配置 Memcached、Postfix、設置虛擬服務器等等。

缺點：
雖然您可以調整很多東西，但控制是有限的。 您無法更改操作系統或進行完全 SSH 訪問允許您進行的其他更改。

出於同樣的原因，所有 AMP 都失去了可移植性。 它們很受歡迎，任何人都可以安裝它們，但它們不像 Vagrant 配置那樣獨立且極簡。

流浪漢

流浪者有點不同。 它不是為您預先包裝和環境，而是讓您完全控制。 它建立在 VirtualBox（或其他 VM 應用程序）之上，允許您抓取一個“盒子”，它本質上是一個操作系統。 然後，您可以使用腳本自己配置這些。

優點：
配置自包含在兩個非常小的文件中。 如果您習慣使用命令行設置環境，可以像vagrant up一樣簡單——該系統非常便攜。

您可以根據自己的喜好對其進行配置。 任何操作系統，任何軟件，從不同的緩存方法到編譯自己的 PHP。 您可以完全複製實際主機的環境，以確保您的站點在本地計算機上以完全相同的方式運行。

缺點：
如果你不熟悉命令行使用，Vagrant 的學習曲線可能會很陡峭。 當一切順利時，您需要做的就是發出一個命令。 如果有什麼東西不管用，無論出於什麼原因，你都會發現自己陷入了困境。

存在創建虛擬主機和執行其他常見任務的工具，MAMP 的 UI 更方便，至少對我來說是這樣。 如果我需要一個帶有 WP 的快速新虛擬主機來安裝，我可以使用 MAMP + WP-CLI 比使用 Vagrant + WP-CLI 快得多。

使用哪一個？

如果您只使用 WordPress，則 MAMP 之類的工具可以提供足夠的靈活性和功能。 當然，它允許您使用非 WordPress 網站，因此，如果您有一份不屬於 WP 領域的零工，MAMP 仍然可以很好地為您服務。

如果你在非 WP 項目上與大型團隊合作，我建議你選擇 Vagrant 並試一試。 它將教你很多關於服務器如何在內部工作的知識，並允許你準確地共享環境。

我的偏好是兩者都用。 當我需要（或有時間）時，我可以使用 Vagrant 將我的環境配置到最後一個細節。 當我需要一些簡單的東西或 WordPress 項目時，MAMP 是我的首選。

WPMU DEV 的另一位作家 Rachel McCollin 寫了一篇關於如何設置 MAMP 的精彩指南，我貢獻了一份使用 Vagrant 進行 WordPress 開發的指南，您可以使用它來設置這些環境。

命令行工具

我不使用大量的 CLI 工具，但我使用的工具是我工作流程的很大一部分。 最突出的是 WP-CLI、Gulp、ngrok 和 Ultrahook，讓我們詳細介紹一下。

命令行界面

WP-CLI 是一個非常強大的命令行工具，它可以讓你自動化關於 WordPress 的一切。 我已經寫了一篇關於使用 WP-CLI 進行高級 WordPress 開發的教程，所以我將向您展示它的一些魔力。

設置新站點

您可以通過幾個簡單的命令（例如wp core download和wp core config ）下載、配置和安裝 WordPress。 文檔豐富且易於理解。

我使用 WP-CLI 和 bash 腳本來創建用於創建新站點的小模板。 您可以使用命令刪除默認插件和主題，並下載和激活您經常使用的插件。

搜索和替換

有時需要數據庫搜索和替換，但可能會很痛苦。 更改為 https、遷移到新域、重命名 url 和其他都可以帶來一些大規模的變化。

由於數據庫包含許多序列化數組，因此您不能只對 SQL 進行搜索和替換（除非新舊值的長度相同）。 wp search-replace oldval newvalue將為您解決所有問題，反序列化然後重新序列化您的數組。

遠程管理

WP-CLI 具有內置的 SSH 來幫助您通過 SSH 管理站點。 這有可能允許您使用單個命令管理數百個站點（即：跨多個站點更新主題或插件）。

這麼多…

使用 WP-CLI 可以做的事情幾乎沒有盡頭。 從大約 35 個內置命令類別（其中包含一堆子命令到第三方包），您可以輕鬆地自動執行任何任務。

吞嚥

Gulp 是我的自動化主力。 我用它來管理我的腳本、樣式、圖像，甚至是移動測試和瀏覽器刷新機制。 我寫了一篇關於在 WordPress 中使用 Gulp 的詳細文章，請查看那裡的詳細說明。

由於語法差異，我更喜歡 Gulp 而不是另一個流行的選擇 - Grunt。 看看我的 Grunt For WordPress Development 文章，然後自己決定吧！

由於社區驅動的擴展，Gulp 使用 Node 和 Node 包來實現其功能，使其非常便攜和強大。 我在 Gulp 的工作流程通常包括以下內容：

1. 找到適合我需要的擴展程序
2. 使用 npm 安裝節點包
3. 需要 Gulpfile 中的包
4. 編寫一個簡短的自動化任務

唯一需要思考的部分是第四部分。 即使這樣，大多數擴展都有復制粘貼示例，可能只需要稍微修改一下。

以下是我最常用的擴展：

• gulp-sass 用於將 Sass 編譯為 CSS
• gulp-clean-css 用於縮小 CSS
• gulp-autoprefixer 用於自動添加供應商前綴
• gulp-include 用於連接 JS 文件
• gulp-uglify 用於壓縮 JS 文件
• gulp-imagemin 用於優化圖像
• Browsersync 用於創建有助於移動測試的開發服務器
• gulp-sourcemaps 用於為縮小文件創建源映射

恩格羅克

ngrok 是一個小型服務和命令行工具，我用來通過 Internet 共享我的本地工作。 ngrok 創建到本地環境的安全隧道，將您的應用程序暴露在一個特殊的 URL 上，例如http://7bbc49aa.ngrok.io 。

超鉤

Ultrahook 是 ngrok 的反面。 ngrok 將您的 localhost 路由到網絡，ultrahook 將網絡路由到您的 localhost。 這對於測試像 Stripe 這樣的第三方 API 非常有用。

您可以將 Stripe 設置為發送測試 webhook http://stripe.danielpataki.ultrahook.com ，它將安全地傳遞到您的本地服務器。

WordPress 插件

對於我們大多數人來說，WordPress 開發是插件和主題開發的代名詞。 該存儲庫充滿了插件，可幫助開發人員更快地創建更好的工作。 以下是我使用或經常使用的一些。

主題檢查

主題創建者的必備插件。 主題檢查將分析您的主題並找出不符合 WordPress 標準的原因。 它著眼於不推薦使用的代碼、無關文件、不良做法、常見錯誤以及大量其他潛在問題。

高級自定義字段

高級自定義字段或 ACF 是我一直以來最喜歡的插件。 它允許開發人員在直觀和快速的 UI 中為他們的主題和插件創建漂亮的自定義字段。 完成後，您可以完全隱藏 ACF 並將生成的 PHP 代碼粘貼到您的工作中以保持字段完整。 一個執行良好且非常有用的插件！

查詢監視器

查詢監視器允許您從數據庫訪問的角度準確查看 WordPress 環境中正在發生的事情。 您可以在它們進入實時產品之前捕獲潛在的緩慢或冗餘查詢，並優化現有查詢以使您的代碼更快。

Bash 腳本

Bash 腳本包含一堆命令，這些命令一個接一個地運行，可用於進一步自動化任務。 例如，使用 WP-CLI 安裝 WordPress 已經很容易了。 只需要以下內容：

這些命令必須一個接一個地發出，這需要一點時間。 通過將它放在一個文件中，我們稱之為install.sh ，您可以創建一個用於創建 WP 安裝的模板。

將文件放在要創建安裝的文件夾中，然後鍵入bash install.sh 。 將發出所有命令，並且在幾秒鐘內您將啟動並運行一個站點。

通過添加參數，您可以使其更加有用。 如果您發出這樣的命令： bash install.sh newsite ，您可以使用該參數填寫數據庫名稱、URL 和站點標題。

Bash 文件對於創建最終構建（刪除無關文件夾和文件、移動目錄等）和其他類似任務也很有用。 它們甚至可以從 Gulp 任務中運行，這為您的工作流程提供了很大的靈活性。

雜項工具

瀏覽器擴展在測試網站時有很大幫助。 以下是我在工作流程中使用的一些內容。

郵差

Postman 是一個用於構建、測試和記錄 API 的 chrome 擴展。 我發現每當我需要發送一個快速請求以查看 API 的工作原理時，Postman 比任何其他工具都快得多。

保存和管理請求的能力特別有用。 API 測試是我不太經常做的事情，但是當我開始做這件事時，它會佔用我一天的大部分時間，使用像 Postman 這樣的東西讓我的生活變得更加輕鬆。

EditThisCookie

EditThisCookie 是 Chrome 擴展程序的另一個示例，我不經常使用它，但是當我使用它時，它可以為我節省數小時的時間。 它使您可以查看/清除/編輯單個站點的 cookie。 僅此而已，但是哦，天哪，它可以多麼方便！

頁面加載時間

頁面加載時間會按照您的想法進行，它會分析頁面加載。 它可以進入重要的細節，如 DNS/請求和響應時間，但我喜歡的是它在工具欄中顯示整體加載時間。 超級方便快速比較。

JSON 格式化程序

我在雜項工具類別中的最後一個瀏覽器擴展條目是 JSON Formatter，它可以檢測響應何時只是一個 JSON 字符串，並將其格式化，而不是僅僅彈出一個文本塊。

弗朗茨

這個其實和發展一點關係都沒有！ Franz 是一種可以在一個屋簷下聚合多個 Web 服務的工具。 我的 Messenger、Slack、Skype、Inbox by Gmail、Trello、Google 日曆和 Todoist 應用程序都在一個窗口中運行，而不是它們的本地應用程序。

這一切看起來就像我在他們通常的環境中運行它們一樣，但我不需要擁有所有這些圖標，我可以更輕鬆地在它們之間切換。 我提到弗朗茨是因為它幫助我更加專注，同時也更好地溝通。

VVV

Varying Vagrant Vagrants 或簡稱 VVV 是一種開源 Vagrant 配置，用於為 WordPress 和 WordPress 本身開發。 它包含您入門所需的所有工具，包括 WordPress 的開發版本。

這麼多！

有很多工具我沒有提到，主要是因為我根本不使用它們。 它們是很棒的工具，但我只是沒有使用它們，不需要它們，或者它們不適合我的工作流程。 以下是您應該看看的一些偉大的候選名單：

• 由 WordPress 主題部門製作的出色主題樣板的下劃線
• 整個 WordPress 堆棧的根源，包括服務器、應用程序管理和入門主題。 我覺得這對我的口味來說太複雜了，但它可能是你的拿手好戲。
• WordPress Plugin Boilerplate 用於標準化的面向對象的插件開發。

讓您的開發環境成為您自己的

總之，這些是我使用的工具——它們不一定最適合你，也不一定最適合每種情況。 此設置對我的需求足夠靈活，因此請務必花時間研究選項並創建適合您的工作流程。

祝你好運！

• 發展