在本教程中，我們將討論如何開始主題開發。然後，我們將帶您逐步完成建立全新自定義主題的過程。
如果你想把某件事做對，你可能必須自己做。雖然有很多WordPress主題可用，但要找到一個具有您需要的外觀和功能的主題可能很困難。事實上，您可能會嘗試建立自己的主題。然而，主題開發的入門似乎勢不可擋——尤其是對於初學者而言。
幸運的是，為WordPress建立自定義主題是一個相對簡單的過程。它也不需要太多的技術知識或Web開發經驗。此外，構建您自己的主題非常值得付出努力，因為您可以讓您的網站看起來和執行得恰到好處。
WordPress主題開發簡介
您希望您的網站看起來很棒並擁有您需要的所有功能，因此您可以檢視WordPress主題目錄或者我們提供的WordPress原創主題。不幸的是，您看到的任何東西都不能滿足您的所有要求，而且您不想在您的願景上妥協。也許您想要一些獨特的東西來讓您的網站脫穎而出，或者您只是不想將錢花在高階主題上。
此時，您可能會開始考慮建立自己的主題。幸運的是，為WordPress開發主題並不是您想象的那麼複雜。由於該平臺固有的使用者友好性和眾多可用工具，幾乎任何人都可以建立自定義主題。
我們將帶您完成建立第一個主題的過程。要開始，您需要做兩件事：
- 您自己的WordPress 網站
- 一個優質的伺服器
您還將受益於擁有本地臨時環境的經驗，因為您將使用一個環境來建立您的主題。對CSS和PHP有一些瞭解也會有所幫助（如果沒有必要）。
最後，您需要擁有一個重要的工具，它可以使建立主題的過程變得更加容易：入門主題。
什麼是入門主題
入門主題是一個基本的WordPress主題，您可以使用它來建立自己的主題。使用starter使您能夠建立在一個可靠的框架上，而不必擔心從頭開始編寫主題所涉及的複雜性。它還將通過向您展示主題的基本結構及其所有部分如何協同工作，幫助您瞭解WordPress的工作原理。
有很多優秀的入門主題在那裡，其中包括下劃線，UnderStrap和Bones（僅舉幾例）。
我們將在下面的示例中使用下劃線。對於初學者來說，這是一個不錯的選擇，因為它只包含基礎知識。另外，這個入門主題是由Automattic開發的，從長遠來看，這使得它更有可能是安全的、相容的並且得到很好的支援。
如何開發您的第一個WordPress主題
隨著準備工作的進行，您終於可以開始建立您的第一個主題了。正如我們提到的，我們將在本演練中使用入門主題。
但是，如果您想嘗試在沒有模板的情況下自己建立所有內容，您應該隨意這樣做。請記住，這將需要更多的編碼能力和對Web開發的理解。
Step 1：設定本地環境
您需要做的第一件事是建立本地開發環境。這實際上是您安裝在計算機上的伺服器，您可以使用它來開發和管理本地WordPress站點。本地站點是開發主題的安全方式，而不會以任何方式影響您的實時站點。
有很多方法可以建立本地環境，但本次示例我們將使用DesktopServer。這是一種免費安裝本地版本WordPress的快速、簡單的方法，並且與Mac和Windows相容。要開始使用，請選擇DesktopServer的免費版本，完成註冊過程，然後下載安裝程式。
下載安裝程式後，您可以執行它。
安裝完成後，您可以開啟該程式，系統會要求您配置新的本地環境。這是一個簡單的過程，您將在幾分鐘內準備好您的本地WordPress站點。安裝後，您的新網站的外觀和工作方式將與實時WordPress網站完全相同。
Step 2：下載並安裝您的入門主題
與大多數入門主題一樣，Underscores非常容易上手。事實上，您需要做的就是訪問網站並命名您的主題。
如果需要，您還可以單擊Advanced Options以進一步自定義基本主題。在這裡您可以填寫更多資訊，例如作者姓名，並提供主題描述。
還有_sassify！選項，這會將Syntactically Awesome StyleSheets (SASS)檔案新增到您的主題。SASS是一種CSS預處理語言，它使您能夠使用變數、巢狀、數學運算子等。
當您做出選擇後，您可以單擊Generate，這將下載一個包含您的入門主題的.zip檔案。這是您將圍繞它開發自己的主題的核心，因此請將其安裝在您的本地站點上。安裝主題後，您可以預覽站點以檢視其外觀。注：這只是一套最最最基礎的主題，還需要您對其深加工！
Step 3：瞭解WordPress在幕後的工作原理
在自定義主題之前，您需要了解其元件的用途以及它們如何組合在一起。首先，讓我們討論模板檔案，它們是 WordPress 主題的主要構建塊。這些檔案決定了您網站上內容的佈局和外觀。例如，header.php用於建立標題，而comments.php允許您顯示評論。
WordPress通過瀏覽模板層次結構來確定在每個頁面上使用哪些模板檔案。這是每次載入您網站上的頁面時WordPress查詢匹配模板檔案的順序。例如，如果您訪問URL地址http://example.com/post/this-post，WordPress將按以下順序查詢以下模板檔案：
- 與slug匹配的檔案，例如this-post。
- 與文章ID匹配的檔案。
- 通用的單個文章檔案，例如single.php。
- 存檔檔案，例如archive.php。
- index.php檔案。
由於所有主題都需要index.php檔案，因此如果找不到其他檔案，則預設使用該檔案。Underscores已經包含了最常見的模板檔案，它們開箱即用。但是，如果您想了解它們如何協同工作，您可以嘗試編輯它們。
您需要掌握的另一個重要元素是Loop。這是WordPress用來顯示內容的程式碼，因此在許多方面，它是您網站的跳動心臟。它出現在所有顯示文章內容的模板檔案中，例如index.php或sidebar.php。
迴圈是一個複雜的主題，如果您想更好地掌握WordPress如何顯示文章內容，我們建議您閱讀更多相關內容。幸運的是，由於Underscores，Loop已經整合到您的主題中，因此現在無需擔心。
Step 4：配置您的主題
很容易認為主題純粹是為了裝飾目的，但它們實際上對您網站的功能產生了巨大的影響。讓我們看看如何進行一些基本的自定義。
使用“鉤子”新增功能
鉤子是插入到模板檔案中的程式碼片段，它使您能夠在站點的不同區域執行PHP操作、插入樣式並顯示其他資訊。大多數鉤子直接在WordPress核心中實現，但有些鉤子對主題開發人員也很有用。
讓我們來看看一些最常見的鉤子以及它們的用途：
- wp_head() — 新增到header.php中的
<head>元素，並啟用網站載入後立即執行的樣式、指令碼和其他資訊。 - wp_footer() — 在
</body>標籤之前新增到footer.php。這通常用於插入Google Analytics程式碼。 - wp_meta() — 這通常出現在sidebar.php中，以包含其他指令碼（例如標籤雲）。
- comment_form() — 在檔案結束
</div>標籤之前直接新增到comments.php 以顯示評論資料。
這些將已包含在您的Underscores主題中。但是，我們仍然建議您訪問Hooks資料庫以檢視所有可用的鉤子並瞭解有關它們的更多資訊。
使用CSS新增樣式
層疊樣式表 (CSS)定義了您網站上所有內容的外觀。在WordPress中，這是使用style.css檔案完成的。您已經將這個檔案包含在您的主題中，但目前它只包含基本的預設樣式。
如果您想快速瞭解CSS的工作原理，可以在此處編輯任何樣式並儲存檔案以檢視效果。例如，您可以找到以下程式碼（通常在第 485 行）：
a {color: royalblue;}
這控制未訪問的超連結的顏色，預設情況下顯示為寶藍色：
讓我們看看如果我們嘗試通過用以下程式碼替換它來改變它會發生什麼：
a {color: red;}
儲存檔案，然後立即檢視您的本地站點。正如您所料，所有未訪問的連結現在將顯示為鮮紅色：
您可能會注意到頂部的訪問連結沒有改變顏色。那是因為它實際上由樣式表中的下一部分控制：
a:visited {color: purple;}
這是一個非常基本的示例，說明編輯style.css將如何影響您網站的外觀。CSS 是一個龐大的主題，如果您想了解有關建立網頁設計的更多資訊，我們建議您進一步探索。有很多關於CSS主題的資源供初學者使用。
Step 5：匯出主題並將其上傳到您的網站
當您完成對主題的修改後，是時候確保它正常工作了。您可以通過測試主題來確保這一點。為了快速確保您的主題在大多數情況下都能正常執行，您可以使用Theme Unit Test資料。這是一組您可以上傳到您的網站的虛擬資料，其中包含許多不同的樣式和內容變體。它將使您能夠了解您的主題如何處理不可預測的資料。
當您徹底測試了您的主題並確信它符合要求的標準時，現在剩下的就是匯出它。最簡單的方法就是找到網站在本地計算機上的安裝位置，最有可能在預設文件目錄中名為網站的資料夾中。開啟網站的資料夾並訪問/wp-content/themes/，您將在其中找到您的主題。
您現在可以使用壓縮工具（例如WinRAR）來建立基於資料夾的.zip檔案。只需右鍵單擊資料夾，然後選擇可以壓縮它的選項，例如壓縮“資料夾”。
當資料夾被壓縮後，它就可以上傳並安裝在任何WordPress站點上，就像您在開始時安裝Underscores主題一樣。如果您對結果感到特別滿意，您甚至可以將您的主題提交到WordPress主題目錄。
小結
從頭開始建立自定義WordPress主題是一項不小的壯舉。然而，這個過程可能並不像您之前想象的那麼困難。通過將過程分解為多個階段並使用Codex文件站點上的資訊，幾乎任何人都可以建立新主題。
當然，上述的主題開發教程只是一個基礎、入門教程，要開發一個功能完善、前端互動一流的WordPress主題，並不是一蹴而就的事情。你可能需要對PHP、WordPress、CSS、JavaScript等程式碼知識有非常深入的瞭解和學習。
評論留言