創建您自己的 WordPress 主題

已發表: 2021-12-21

在之前的文章中，我們研究瞭如何自定義 WordPress 網站、創建自己的子主題或模板。

今天，我們將看看如何構建自己的 WordPress 主題。我們走吧！

為什麼要建立自己的 WordPress 主題？

WordPress 提供了多種方式來自定義您的網站。那麼，為什麼您會覺得有必要創建自己的主題？在某些情況下，現成的主題可能不適合您的品牌設計或具有您需要的功能。自定義主題可以解決此問題，並為您提供所需的站點樣式以及所需的所有功能，而無需依賴第三方主題。

創建主題之前的要求

為了能夠在下面的示例中復制以下步驟，我們需要在本地或您管理的服務器空間上進行 WordPress 安裝設置並準備就緒。不要在實時站點上嘗試此操作。而是創建一個測試環境。

還需要具備 CSS、PHP 和 HTML 的工作知識和理解。

創建主題

我們將主題命名為“我的第一個主題”。第一步是為在管理區域中可見的主題創建必要的文件。為此，我們將創建一個 style.css 和 index.php 文件。

我們為我們的主題創建一個子文件夾，在我們命名為“my-first-theme”的 wp-content/themes/ 文件夾下，並將這兩個文件添加到該文件夾中。

此時，主題應該在管理區域中作為選項可見。

如果其中任何一個文件丟失，您將收到一條消息，警告主題已損壞。例如，如果 index.php 丟失，您將看到如下內容：

在 style.css 文件中，我們將添加一些註釋，告訴 WordPress 我們的主題。最重要的信息是將其列在下面的名稱。除此之外，您可以說出作者是誰或提供作者 URI，以便用戶可以訪問網站以了解有關您的主題的更多信息。給出要在管理主題模式彈出窗口中顯示的描述和安裝版本。

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

注意：您也可以定義您的許可證。如果您希望您的主題在 WordPress 上發布，您的主題必須與 GPL 兼容。

如果您需要顯示徽標圖像，請在 style.css 和 index.php 文件所在的同一空間中插入 screenshot.png 文件。

現在，如果您在主題的管理屏幕中激活您的主題，您應該會看到如下內容：

如果您單擊“主題詳細信息”，您應該會看到：

主題文件

現在是時候在 index.php 文件中編寫一些代碼了。作為測試，使用您喜歡的編輯器打開文件並插入任何類型的 HTML 元素，例如

<h1>My First Theme's Content</h1>

保存文件並訪問前端。您應該只看到標題“我的第一個主題的內容”

此時，您必須決定您的主題將採用何種佈局。

主題佈局

從這裡出發的路線是無限的。我們強烈建議您花時間研究 WordPress 主題的工作原理。更重要的是，在繼續構建自己的主題之前，請確保您完全了解模板層次結構。

簡而言之，WordPress 所做的就是提供一種根據內容類型調用不同 php 文件的方法。這是通過查詢完成的。查詢檢查當前查看的頁面是否有帖子或者是搜索結果頁面或任何其他類型的內容，並輸出相應的代碼。

一個經典的例子是通過為每個文件創建單獨的文件來分隔頁眉和頁腳。要查看如何自己執行此操作的非常簡化的示例，請將這段代碼插入 index.php 文件中。

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

此代碼使用 wp_head() 和 wp_footer() 構建的 WordPress 函數，提供默認內容佈局，其中包括帶有徽標、標題和菜單的標題、查詢將顯示正確內容的主體和包含站點信息的頁腳。

如果我們想拆分此代碼並使用單獨的 header.php 和 footer.php 文件，那麼您應該在主題文件夾下創建文件。

並像這樣拆分代碼：

索引.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

頭文件.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

頁腳.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

就是這樣！您已經創建了您的第一個主題！

入門主題

我們在上面查看瞭如何手動創建主題......應該創建哪些文件以及您可以包含哪些代碼。如果您已經熟悉這一點，則可以通過在幾秒鐘內下載 WordPress 入門主題來節省一些時間。例如嘗試下劃線，您可以在其中提供名稱並立即下載主題 zip 文件。

太棒了，對吧？

結論

當您作為開發人員需要更大的靈活性時，自定義 WordPress 主題是一個很好的解決方案。創建主題似乎是一個令人生畏的過程。希望正如本文所表明的那樣，它實際上很容易做到。關鍵是在開始編碼之前不要著急。退後一步，研究滿足您要求的主題結構，然後繼續努力。