建立一個外觀精美、效能完美的 WordPress 主題對任何開發人員來說都至關重要。無論您的經驗如何，在主題測試中實施強有力的策略都會讓您的產品從平庸走向成功。
在本指南中，我們將介紹 WordPress 主題測試，並探討可提升主題質量的工具、技術和最佳實踐。本指南可確保您的主題在效能、相容性和使用者體驗（UX）方面達到最高標準。
瞭解 WordPress 主題測試
開發任何產品都需要一個測試過程，這不僅僅是釋出前的最後檢查。它是開發過程中不可或缺的一部分，可以幫助您及早發現和糾正問題，從長遠來看可以節省時間和資源。
WordPress 主題測試可以確保您的主題在各種環境、瀏覽器和裝置上正常執行。它可以發現您需要在釋出前解決的問題：
雖然 WordPress 主題測試可能包括錯誤修復，但這一過程通常能幫助您製作出在市場上脫穎而出的產品。
WordPress主題標準概述
WordPress 有一套既定的編碼標準，以確保不同主題的一致性和質量。這些標準並不是隨意制定的，而是經過多年的社羣經驗和協作不斷完善的結果。
製作 WordPress 主題團隊會對 WordPress 主題目錄中可能包含的主題執行這些標準：
WordPress 主題目錄。
提交到該目錄的主題都要經過徹底審查，以確保它們符合平臺的質量和安全要求。
鑑於主題目錄是官方資源庫，也是許多人尋找新主題的第一站，因此確保每次下載都能按照您的期望執行，不出現安全問題或重大漏洞至關重要。這種高標準的質量只是使 WordPress 成為一個平臺的一個方面。
為什麼要根據WordPress標準進行測試
符合 WordPress 標準並不僅僅是為了獲得主題目錄的批准。更深層次的目標是為使用者建立一個可靠、安全的產品。
除了希望在眾多競爭者中找到自己的位置外，還有很多令人信服的理由需要根據 WordPress 標準測試您的主題：
- 面向未來。WordPress 在不斷髮展。因此，如果您遵守當前的標準，您就能在未來更輕鬆地維護和更新您的主題。
- 相容性。如果您的主題遵循 WordPress 標準，它就更有可能與各種外掛和 WordPress 核心功能配合使用。
- 效能。許多 WordPress 標準都注重效能。遵循這些標準有助於確保您的主題以更高的效率執行。
- 安全性。這些標準包括安全方面的最佳實踐，有助於保護您的主題及其使用者免受潛在漏洞的侵害。
針對這些方面的最終結果是：使用者信任。大多數使用者都希望獲得安全、穩定、無漏洞的優質產品。
對於那些熟悉 WordPress 的使用者來說，符合這些標準的主題將進一步提升該平臺的聲譽。對於初次使用 WordPress 的使用者來說，高質量的主題會給人一種可靠的感覺。因此，您的主題可能會成為使用者與該平臺終身聯絡的開端。
WordPress將根據哪些標準來評判您的主題
製作 WordPress 主題團隊是維護平臺生態系統中主題質量的核心和關鍵。他們根據一整套標準對主題進行評估：
- 程式碼質量。必須沒有 JavaScript 或 PHP 錯誤、警告或通知。您的主題也不能使用過時的常量或函式。WordPress 也有一套單獨的編碼標準需要遵守。
- 功能性。您不能“操縱”編輯預覽螢幕、將典型的 WordPress 功能置於付費牆之後或在啟用時進行重定向。此外，還有關於顯示管理通知和包含“非展示”功能的指導原則。
- 可訪問性。主題必須包含跳過連結和鍵盤導航選項。連結也必須使用下劃線。
- 許可。當然，主題必須與 GNU 通用公共許可證 (GPL) 相容。不過，您不必使用與 WordPress 相同的許可證，任何相容的 GPL 許可證都有效。
還有一些與推廣和展示有關的指導原則。例如，Make WordPress Themes 團隊可能會根據主題的名稱決定拒絕您的主題。如果出現商標侵權或您選擇了不恰當的名稱，就會出現這種情況。
此外，對信用位置也有限制，即便如此，您也只能將其新增到 style.css 中：
一個 style.css 檔案。
此外，還有一些作者賬戶指導，例如可以擁有多少個賬戶以及主題提交頻率。大部分所需元素都集中在技術開發方面。
WordPress技術標準
在向 WordPress 提交主題的 14 項要求中，與主題設定、檔案以及主題是否使用塊相關的要求佔了很大一部分。
在經典主題和塊主題方面，前者有更多的指導：
- 經典主題。你必須在程式碼中的特定位置加入許多函式。呼叫模板時也是如此。
- 區塊主題 遵守塊主題的標準比較簡單，因為只需包含四個檔案。如果你的區塊模板也很完整，那麼你的主題就能滿足一些技術標準的要求。
在設定方面有許多要求。例如，您必須使用特定的鉤子來顯示通知，並根據稽覈流程指南來設定通知的永久性。
WordPress 儀表盤內的管理通知。
在資料庫中儲存選項有嚴格的控制。即使是多個設定，也必須使用一個陣列，並使用正確的命名規則。在WordPress儀表板上，您只能使用核心使用者介面（UI）元素，任何樣式設計都必須在主題管理頁面的範圍內進行。
FakerPress 評論設定介面。
您還必須監控主題中包含的檔案。例如，每個主題都必須包含 readme.txt 檔案。準備檔案（如刪除高階程式碼或多餘目錄）是另一項要求，包括主題的所有指令碼和媒體而不是使用遠端資源也是如此。這也適用於經過精簡的指令碼：您還必須包含完整的原始檔案。
滿足 WordPress 對主題的所有要求似乎很麻煩，尤其是如果您不打算提交到官方目錄的話。即便如此，這些標準還是提供了一個很好的框架，可以幫助您提供高質量的產品。
為什麼符合WordPress標準有助於提高主題質量？
要將您的主題提交到官方目錄，您必須滿足製作 WordPress 主題指南的要求。不過，可以考慮為客戶建立定製主題的機構。通常情況下，這些主題不需要提交到主題目錄，因為不會有大規模的傳播。但遵循指南和要求仍能為所有 WordPress 主題帶來好處，包括
- 一致性。標準提供了一個共同的框架，使團隊更容易共同完成一個專案。
- 效率。遵循既定標準可以加快開發時間。這還可以減少後續大量定製的需要。
- 可維護性。標準化程式碼更易於維護和更新。從長遠來看，這是另一種節省時間和資源的方法。
- 客戶滿意度。符合 WordPress 標準的主題更有可能為您的客戶提供流暢、無錯誤的體驗。
除此之外，您還可以為您的主題提供未來的靈活性。考慮一下客戶拒絕接受專案主題或終止協議的情況。一個符合 WordPress 標準和要求的主題，您可以將其重新用於產品中，而無需做大量的額外工作。
簡而言之，即使您不想以 WordPress 主題目錄為目標，滿足該平臺的要求也能提高您的主題的質量和適銷性。至少，您可以展示出專業性和對細節的關注，這對潛在客戶來說是一個強有力的賣點。
WordPress主題測試所需的基本工具
與其他行業的從業人員一樣，WordPress 開發人員也需要一個強大且適應性強的工具包，涵蓋建立主題並使其效能良好的各個方面。
將 WordPress 編碼標準和製作 WordPress 主題團隊的要求視為您的指導手冊。您也不需要逐一手動檢查。相反，Theme Check 和 Theme Sniffer 外掛可以自動完成這項工作。
Theme Check 外掛
它們都會對您的主題進行測試，並顯示可能不符合當前要求的任何區域。主題嗅探器有一些更全面的測試，並使用 PHP_CodeSniffer 指令碼的自定義“sniffs”功能來幫助檢測違反標準的情況。
您還需要藉助瀏覽器的開發工具來檢查和除錯 HTML、CSS 和 JavaScript。對於 WordPress 的特定除錯，沒有平臺自己的除錯模式幾乎是不可能的。Debug Bar 外掛為 WordPress 面板新增了一個除錯選單，可從該模式中呼叫。
Debug Bar 外掛
在測試主題時，還有一些其他外掛也很有價值：
- 查詢監控器。這個工具面板可以深入瞭解資料庫查詢、鉤子、條件等。
- 記錄過時通知。如果你的主題使用了過時的檔案、函式和函式引數，這個外掛就會捕捉到它們。這是讓你的主題與 WordPress 最新版本保持同步的好方法。
- 怪物小部件外掛。經典主題使用小部件，這個外掛會在你的網站上新增一個小部件，其中包含所有可用的核心小部件。其目的是讓你高效地測試小工具區域。
在 WordPress 主題測試工作流程中，你可能不會用到所有這些外掛和工具。這正是工具箱的意義所在：每個元件都有其作用，並能幫助您在問題出現之前加以解決。
WordPress主題測試：設定測試環境
工具箱準備就緒後，您就可以設定工作區域了。對於 WordPress 主題測試來說，這意味著要建立一個合適的測試和開發環境。這樣做的目的是確保您可以重複進行任何測試並獲得準確的結果。
您可能已經準備好了這一過程中的大部分工作，無需任何進一步的設定。當然，正規的 WordPress 開發人員會不費吹灰之力就擁有以下其中之一：
- 本地開發環境。本地機器上的 WordPress 設定可以讓您在不影響實時網站的情況下執行測試。
- 多個 WordPress 版本。您應該針對多個較舊的 WordPress 版本進行測試，以獲得最大的相容性。
- 各種 PHP 版本。推而廣之，這些測試應針對不同版本的 PHP 或您的主題所需的任何其他重要技術進行。
- 流行外掛。為確保測試符合現實世界的實際設定，最好安裝並啟用一些最流行的 WordPress 外掛。這可以是為了測試相容性問題，也可以是為了瞭解主題在典型負載下的表現。
- 多種裝置和瀏覽器。在各種裝置和瀏覽器上測試您的主題，可以確保它看起來很棒，並能在不同平臺上一致執行。
環境元件就位後，您需要配置 WordPress 以進行除錯。為此，請使用您喜歡的方法開啟 wp-config.php 檔案。理想的方法是使用安全檔案傳輸協議（SFTP）或安全外殼（SSH）。
開啟 wp-config.php 後，新增以下幾行：
define( 'WP_DEBUG', true ); define( 'WP_DEBUG_LOG', true ); define( 'WP_DEBUG_DISPLAY', false );
這將啟用 WordPress 除錯模式，將錯誤記錄到檔案中，並防止在前端顯示這些錯誤。你也可以在將測試網站上傳到實時伺服器時再次關閉該功能。
主題單元測試資料： 幫助你達到主題標準的WordPress輔助內容
在 WordPress 主題測試中，還有一個元素對於根除邊緣錯誤或問題至關重要：主題單元測試資料。這是一個 XML 檔案，包含各種內容型別和邊緣案例，您可以通過 WordPress 面板將其上傳到您的網站。
WordPress Posts 螢幕顯示與主題單元測試資料相關的內容。
這就是它如此有價值的原因：
- 它包括各種內容型別，如文章、頁面、評論和媒體。這可以讓你測試主題如何處理不同的內容場景。
- 這些資料包括超長標題、無標題文章和巢狀評論等元素。測試所有這些邊緣情況都很重要，因為你希望使用者能夠進行任何與之相關的自定義。
- 各種格式化選項可確保您的主題按照您的預期對內容進行格式化。XML 檔案中包含的內容和媒體可以測試這一點。
- 您還有不同語言的內容，其中包括可能導致格式錯誤的字母。
你可以在 WordPress 官方 GitHub 程式碼庫或《製作 WordPress 主題手冊》中找到主題單元測試資料 XML 檔案。下載後，前往 WordPress 中的“工具”>“匯入”頁面：
WordPress 儀表盤中的匯入頁面。
這將顯示平臺的匯入選項列表，您要選擇立即為 WordPress 安裝。或者，您也可以安裝 WordPress Importer 外掛。安裝連結將變為執行匯入程式。單擊該連結，開啟上傳對話方塊。然後選擇 XML 檔案，點選上傳檔案和匯入按鈕：
匯入 WordPress 螢幕顯示等待匯入的檔案。
要匯入的內容包含其他使用者配置檔案。在“匯入 WordPress”頁面，您可以選擇是否將它們與內容一起匯入。或者，你也可以建立自己的使用者，或將內容分配給網站上已有的使用者：
匯入 WordPress 對話方塊顯示為內容指定作者的選項。
建議您選中下載和匯入檔案附件覈取方塊。這反映了典型的 WordPress 體驗。點選提交按鈕後，WordPress 會花一些時間匯入內容、使用者和媒體。在這裡，您可以測試主題如何處理各種內容型別和場景，以確保它符合內容顯示和格式要求。
主題測試的基本要素
擁有正確的工作流程是獲得流暢、無故障體驗的關鍵。尤其是在需要管理一長串額外工具和外掛的情況下，更是如此。一旦有了穩定的測試環境，就可以評估測試所需的步驟。
WordPress 主題測試的關鍵在於它的迭代性和流動性。沒有固定的、按部就班的線性工作流程。相反，你可以按照自己選擇的順序完成許多工。
例如，你的工作流程可能至少包括以下一個或全部步驟：
- 啟用除錯模式。
- 執行主題檢查或主題嗅探器外掛。
- 使用主題單元測試資料進行測試。
- 使用瀏覽器開發工具排除故障。
測試主題選項和自定義功能可能會在不同的階段進行。在整個過程中，我們都會重新審視這一領域。檢查外掛相容性也是如此。這兩個方面將不斷進行評估。您進行的其他測試通常也會圍繞這些方面展開。
除錯階段通常會在測試之後進行，但也會有一些交叉。最終，WordPress 主題測試將關注與功能、效能、安全性、可訪問性和程式碼“適用性”相關的領域。
一旦您的主題通過了測試，符合 WordPress 的官方要求，並且沒有任何錯誤，那麼提交它就很簡單了。
WordPress主題技術測試的核心領域
有了基礎知識，你就可以看看主題測試的核心內容了。與基礎知識一樣，這些核心領域也是不斷變化和迭代的。不過，從確認主題是否能處理基本功能開始，不失為一個好主意。
功能測試
一般來說，功能測試可以確保您的主題在所有方面都能按預期執行。不能支援 WordPress 預設功能的主題是不可行的。主題單元測試資料對此至關重要，因為您可以檢查主題如何處理典型情況和邊緣情況。
例如，您已經有了包含典型和非典型內容的帖子和頁面，因此沒有必要再建立更多的帖子和頁面。測試這些內容是很主觀的，將取決於您的目標、設計概要、客戶需求等。
對於大多數使用案例，測試以下內容是有價值的：
- 對於所有典型的、最常用的區塊–例如段落、列表、圖片、標題–測試它們在前端的外觀。檢查對齊方式、間距和總體表現形式是否有任何不一致。
- 多個選項需要進行相容性測試。這可能與 WordPress 核心設定、各種可用塊，甚至其他外掛的第三方設定有關。
- 如果您的主題將執行部落格，請檢查評論區是否能顯示所有內容。在這裡測試巢狀評論也很重要，這樣設計和功能才能達到預期效果。
- 此時，請查詢與主題整合的任何區塊並對其進行測試。例如，評論區塊可能需要進一步調整。第三方區塊集外掛可能需要進行相容性測試。
對於經典主題，應測試小部件區域、簡碼功能、導航和其他與區塊主題不同的元素。不過，鑑於區塊編輯器是 WordPress 的未來，大多數主題都應將其作為標準配置。
區塊編輯器測試
您的主題需要與區塊編輯器和網站編輯器完全相容。您可以從模板開始，在網站編輯器的“設計”>“模板”介面中找到它們：
WordPress 網站編輯器模板螢幕。
在此，您需要確認模板是否顯示，以及是否可以無差錯地編輯模板。使用者可能希望自定義主題模板，甚至建立自己的模板。
樣式介面是網站編輯器中另一個關鍵的自定義工具，這意味著它也是決定主題質量的一個重要因素。
WordPress 網站編輯器的樣式介面。
你可能會在設定中玩一玩，看看能否完成典型的自定義設定。在其他情況下，你可能會使用佈局設定來使所有內容完美地結合在一起。
Block Themes 的其他元素也需要考慮：
- Theme.json。徹底測試你的
theme.json檔案，確保它能正確配置全域性樣式和設定。 - 區塊變化。如果你的主題使用了自定義區塊變化，那麼以不同的方式測試這些變化是很重要的。
- 自定義區塊模板： 對於這部分和任何相關的模板部分，都要邊做邊反覆檢查，以免引入更多錯誤或錯誤。
除技術功能（如確保所有操作和過濾鉤子都能正常工作）外，還需要進行此項測試。如果相關，使用 WooCommerce 或其他電子商務外掛測試主題。最後，許多客戶網站還希望與社交媒體整合。請測試任何分享按鈕或資訊源，確保其功能符合客戶的要求。
外掛相容性
WordPress 網站在其生命週期內可能會使用多個外掛。由於外掛和組合非常多，很難考慮到每一種使用情況。
這可能是一個令人頭疼的問題。儘管很明顯您必須使用某些外掛來測試主題，但要知道是哪些外掛卻很難。我們的建議是什麼都用一點進行測試：
- 最流行的頁面生成器外掛，如 Elementor、Beaver Builder、Bricks、Brizy 和 Divi。
- 大多數網站都有搜尋引擎優化（SEO）外掛，如 Yoast SEO。我們還推薦使用我們自主研發的 Smart SEO Tool 以及其他許多 SEO 外掛。
- 快取外掛也很常見。WP Super Cache、W3 Total Cache 和 WP Rocket 都是該領域的佼佼者。
- 你可以找到許多不同的表單外掛，但 Ninja Forms、Contact Form 7、WPForms 和 Gravity Forms 都經常出現。
- Automattic 和 Make WordPress Core 團隊的外掛應該在你的測試解決方案列表中。Akismet 、Jetpack 甚至經典編輯器外掛都應進行全面測試。
你要尋找明顯的衝突，然後解決小問題。許多主題都會在營銷材料中使用外掛相容性，因此在這方面投入時間可以提高你的可信度。
無障礙測試
並不是每個使用者都有完美的視力或正常的肢體。這不應該成為使用主題的障礙，這意味著您需要在釋出前進行無障礙測試。
WordPress有自己的可訪問性指南，這是 Make WordPress Accessible 團隊提供的。自己測試的一個合理方法是研究最有益的無障礙性實踐。要考慮的因素有很多，它們分為幾個類別：
- 開發。這包括使用分頁而非無限滾動、正確標註網路表單、使用語義 HTML、實施正確的標題層次結構等方面。
- 內容。這些做法簡單明瞭，例如在同一標籤頁中開啟連結、新增 ALT 文字描述以及應用可讀性。
- 設計。字型大小和顏色對比度是無障礙閱讀方面的大問題，因此在開發過程中應重點關注。測試階段更多的是為了完善。
這些實踐中有很多都與《網頁內容無障礙導則》（WCAG）2.0 相容和一致。您可以找到核對表，幫助您捕捉和測試與網路無障礙相關的元素。通過開發、內容和設計檢查將為您的主題打下堅實的基礎。您甚至可以通過完整的課程來學習如何將網路無障礙性測試應用到您的專案中。
無障礙測試工具
說到合適的工具，有兩款值得推薦：
- axe。Deque 的 axe 作為瀏覽器 DevTools 的一部分執行，可在數秒內自動執行一系列測試（取決於您的賬戶）。
- WAVE。WebAIMs WAVE是一款可在瀏覽器中使用或通過擴充套件使用的工具。
同時使用這兩種工具是測試可訪問性的絕佳方法。例如，您可以先快速進行 axe 測試：
在瀏覽器的“開發人員”檢查面板中使用 axe 工具。
這就像點選開始全頁面掃描一樣簡單。掃描結果會突出顯示需要考慮的地方和潛在的修復方法。
WAVE 看起來會讓人不知所措，尤其是在有大量問題需要解決的情況下。不過，它對內容順序和結構的總結對於評估主題如何與螢幕閱讀器配合使用非常有價值：
WAVE 輔助工具顯示在左側邊欄中。
先用 axe 解決廣泛的問題，如一般的顏色對比度警告，然後再用 WAVE 解決更深層次的無障礙問題，這是一種很好的方法。這樣一來，你的內容就有了正確的標題層次和結構、無障礙表單輸入和標籤。
您甚至可能需要測試鍵盤導航，並使用螢幕閱讀器使用您的主題，以瞭解使用者的體驗。無論如何，測試主題的可訪問性都不是簡單的 “錦上添花”，而是建立包容性網路的關鍵。
效能測試
測試主題的效能可確保為使用者提供良好的執行體驗。這也是您營銷的一個關鍵角度。許多主題都在宣傳其卓越的效能，這證明了效能測試的重要性。
測試網頁效能的方法同樣適用於 WordPress 主題測試。有一種徹底的方法可以做到這一點，儘管你的工具可能有所不同。
例如，谷歌的 PageSpeedInsights 或 Lighthouse 就是理想的工具。如果你想聽聽別人的意見，WebPageTest 這樣的工具可能是個不錯的選擇。無論如何，有很多效能測試工具可以滿足您的具體需求。
說到測試內容，有幾個關鍵領域需要重點關注：
- 您的 Core Web Vitals 應始終保持健康，因為這是主題效能的基礎。
- 儘量減少 HTTP 請求和優化資產載入可以幫助你更好地管理資源。
- 查詢監控器將幫助你識別並優化任何資料庫查詢。
- 如果您的主題包含捆綁圖片，請確保它們具有最佳尺寸，並在打包前對它們進行壓縮。
您應該在主題開發初期就選擇響應式或自適應設計。無論您選擇哪種方式，都必須進行測試，以確認它能按照您的意圖執行。您不希望引入水平滾動、內容縮放需求、小觸控目標或無法根據螢幕尺寸進行調整的顯示佈局。
此時，您可以進行跨瀏覽器測試。BrowserStack 就是一個很好的工具：
BrowserStack 網站。
最後，雖然伺服器響應時間與主題測試沒有直接關係，但它們對終端使用者卻很重要。
安全測試
WordPress 安全測試應該是您的重中之重。WordPress 團隊提供了大量文件，確保您的主題使用安全。
請牢記以下原則：
- 對通過主題接受的所有資料進行驗證和消毒。當涉及到使用者輸入時，最好採取謹慎的態度，驗證比消毒更重要。
- 對於不受信任的資料來源，應儘可能晚地刪除所有資料–通常是在輸出階段。
- 依賴 WordPress API，因為它們是處理主題中任何資料的安全方法。
- WordPress nonces 是一種雜湊值，有助於保護、驗證和認證請求。它們並不是第一線的保護方法，但可以幫助加強已有的安全性。
跨站指令碼（XSS）、跨站請求偽造（CSRF）和 SQL 注入是 WordPress 網站最常見的漏洞。您的主題應嚴密防範這些漏洞。遵循這些主題安全的核心原則，您就能儘可能地接近這一目標。
讓主題開發工作流程更順暢的典型做法
在機構環境中開發主題需要一種不同於個人或小型專案的方法。您需要更多的結構、一致性和效率。這可以通過制定自己的內部編碼標準來實現，以補充 WordPress 的編碼標準。可以使用 Jira 或 Trello協作工作流來跟蹤問題和錯誤。
Jira 介面。
在確保團隊符合整體質量要求方面，有一些做法可以提供幫助：
- 實施同行評審流程。這可以很簡單，比如讓團隊成員在合併前互相審查程式碼。在其他情況下，也可以考慮結對程式設計。
- 開發可重複使用的元件。建立一個可重複使用的程式碼片段和元件庫可以大大縮短開發時間。在某些情況下，您甚至可以為建立未來的主題建立一個完整的框架。
- 實施全面的測試程式。您可能需要制定一份標準化的測試清單，或在工作流程中加入使用者驗收測試（UAT）。
其中一些實施方法涵蓋了典型的 DevOps 實踐，可以提高機構的工作質量。例如，持續整合和持續部署（CI/CD）就是最好的實施方法之一。有了正確的工具，這可以幫助您以多種方式實現測試流程自動化。CI/CD 還可以直接融入現有的工作流程，節省寶貴的測試時間。
小結
WordPress 主題測試對於確保產品的穩健性、可靠性和為使用者服務是必不可少的。如果您想在 WordPress 主題目錄中釋出您的產品，遵守 WordPress 官方標準和要求是必不可少的。這些準則也適用於機構和其他非公開發布的主題開發。
無論如何，全面的 WordPress 主題測試都是一項需要時間和精力的投資。如果您的測試涵蓋了重要的核心領域–功能性、可訪問性、效能、安全性和程式碼質量，那麼您就能為客戶提供滿意的服務。符合 WordPress 標準可能會讓您在將來與客戶關係結束後更容易重新使用主題。
根據自己的經驗，您對 WordPress 主題測試有什麼建議嗎？請在下面的評論區分享！
評論留言