WordPress主題剖析

已發表: 2015-06-04

這是“啟動並運行：WordPress 開發實用指南”中的一章，這是 6 月 16 日推出的 WordPress 開發多媒體指南。完整的軟件包包括一本完整的電子書、50 多個主題和插件開發教程視頻，以及對 13 位世界上最好的 WordPress 開發人員的代碼演練訪談。 立即在 upandrunningwp.com 預訂可享受 20% 的折扣！

關鍵要點：

  • WordPress 主題由一組一致的部分組成。 非子主題的關鍵部分包括style.css 、 functions.php和幾種 PHP 模板文件（例如header.php 、 footer.php和index.php ）。
  • 作為主題的主要 CSS 樣式來源， style.css決定了主題的視覺外觀。 style.css頂部的註釋部分也是註冊主題名稱、作者等的地方。
  • functions.php是您向主題添加演示功能的地方。 通過functions.php ，您將添加 CSS 樣式表、JavaScript 文件、導航菜單、小部件區域和其他功能。
  • 模板文件可以非正式地分為：“總是使用”的模板文件（ header.php和footer.php ，如果適用，還有sidebar.php ）； WordPress 模板層次結構中的文件（例如index.php 、 single.php和page.php ）； 和“模板部分”（從其他模板文件中提取的不完整片段以減少重複）。
  • 主題可以任意大而復雜； 但這些是那裡最重要和可預測的部分。

這個簡短的章節圍繞著一個大圖展開。 為什麼要等？ 這裡是：

WordPress 主題剖析

不要恐慌！ 你很快就會明白這一點。 在本章的其餘部分，我們將更深入地解釋圖表的每個部分。

名字裡有什麼？

WordPress 根據名稱決定如何處理主題文件。

首先要注意的是圖中的每個文件都有一個特殊的名稱。 functions.php , style.css , index.php ——這些文件都不是偶然命名的，它們的名字也不是隨意命名的。

WordPress 根據名稱決定如何處理主題文件。 它對functions.php有特殊處理，但對functionz.php根本沒有。 因此，如果您將一組指令上傳為functions.php ，WordPress 將對其進行解釋； 但如果您上傳與functionz.php相同的指令，WordPress 將默認完全忽略該文件及其指令。

樣式.css

style.css是主題視覺外觀的主要來源。

style.css是主題的主要 CSS 樣式來源。 因此，它是主題視覺外觀的主要來源——從字體和顏色的選擇到主題是否在響應式網格上運行。

因此，例如，如果您在主題的style.css中輸入以下 CSS：

p {
color: blue;
}

…然後，在運行主題時，段落中的任何內容，站點上的任何位置都會變成藍色。 真的很酷，對吧？

style.css是您完成大部分工作以使您的主題看起來像您想要的方式的地方。

這種視覺控制意味著style.css中有很多工作要做——您將在其中完成大部分工作以使您的主題看起來像您想要的那樣。

style.css 也是您註冊主題的方式

style.css還在其標題中包含一個註釋部分，這是註冊主題數據（主題名稱、作者、父主題（如果有）等）的地方。 看起來如下：

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress 閱讀這些評論以獲取有關您的主題的信息。 所以上面的小評論塊 - 沒有什麼更花哨或更技術性的 - 是導致您的主題出現在您網站的主題列表中的原因 WordPress 管理區域的外觀>主題：

主題解剖1

您可以在style.css的第 1 行到第 6 行中看到一個主題真實註冊數據的示例，在該大圖“WordPress 主題剖析”中。

函數.php

functions.php是您向主題添加自定義功能的地方。 這可能很多，包括：

  • 添加 CSS 樣式表（包括style.css本身）和 JavaScript 文件
  • 註冊導航菜單區域和小部件區域
  • 定義您希望在您的網站上可用的自定義圖像尺寸
  • 過濾您的頁面內容

functions.php主要通過 WordPress 鉤子（也稱為操作和過濾器鉤子）與 WordPress 的其餘部分“對話”，這讓它可以在正確的位置添加功能。 我們在 WordPress 主題的核心概念中更深入地了解了functions.php的工作原理： 3. 使用functions.php添加功能，我們更深入地了解了 WordPress 鉤子（操作和過濾器）中的鉤子：它們的作用和工作方式。

PHP 模板文件

WordPress 站點的模板文件決定了站點的標記。 沒有它們，頁面上實際上什麼都沒有。

主題文件的主要部分是其 PHP 模板文件。 如果functions.php是一個主題的大腦， style.css是它的衣服，模板文件是它的實體。

模板文件是 ,code>.php 文件，其中包含 HTML 標記和 PHP 代碼的混合。 （檢查該圖形，您會看到它們的外觀。）

模板文件以兩種方式創建標記

這些文件共同決定了站點的標記：瀏覽器在訪問您的站點時顯示的實際 HTML。 他們通過兩種方式做到這一點。

1. HTML

首先，模板文件會直接將 HTML 打印到瀏覽器，就像普通的.html文件一樣。 <!--?php?-->中沒有的任何東西都不是 PHP：它只是直接進入頁面的純 HTML。 因此，如果主題的header.php包含一些 HTML，如下所示： 

<body class="site-body">

這正是瀏覽器在每個包含header.php的 WordPress 網頁上看到的內容，應該是所有這些。

2.PHP

模板文件使用 PHP 真正發揮了它們的魔力，PHP 可以編譯為或轉換為 HTML。 舉個簡單的例子，我們同樣的header.php文件可以包含以下代碼： 

<body class="<?php echo 'site-body'; ?>">

添加的 PHP 只是將字符串site-body直接回顯（打印）到頁面上。 因此，服務器在其端進行了額外的 PHP 處理，但瀏覽器仍然看到相同的舊 HTML。

正如您可以想像的那樣，主題的模板文件非常重要：沒有它們，頁面上幾乎什麼都沒有。

“經常使用”的模板文件

header.php和footer.php通常在主題中隨處使用，因為大多數網站都希望在不同頁面之間使用一致的頁眉和頁腳。

網站上的每個網頁都使用一些模板文件。 主要的例子是header.php和footer.php 。

這些文件經常使用，以至於 WordPress 具有將它們包含在其他模板文件中的特殊功能： get_header()和get_footer() 。 以這種方式調用，不帶參數，這些函數只需抓取header.php和footer.php ，並將它們放在調用函數的位置。

為什麼這些文件無處不在？ 這是因為大多數網站都希望在不同頁面上使用一致的頁眉和頁腳。 如果一個頁面有您公司的徽標和主要導航菜單，那麼您肯定希望其他頁面也這樣做。 頁面底部的頁腳也是如此。

需要注意的是， sidebar.php也屬於這種文件，因為通常情況下，網站上的大多數類型的網頁都會共享一個側邊欄——可能除了專門用於顯示頁麵類型的全寬頁面帖子。 sidebar.php也有自己的函數get_sidebar() 。

WordPress 模板層次結構中的文件

真正令人興奮的是index.php 、 single.php和page.php等文件。 這些文件規定了不同類型的帖子數據將出現什麼標記。

換句話說， WordPress知道哪個頁面用於哪種帖子數據。 例如：

  • 如果所請求的網頁涉及頁麵類型的帖子（例如，您的關於頁面），WordPress 可能會使用page.php來構建該網頁。
  • 如果請求的網頁是單獨的帖子類型的帖子（例如，您正在查看特定的博客帖子），WordPress 可能會使用single.php來構建它。
  • 如果您正在查看您在 2014 年撰寫的所有帖子類型的帖子，WordPress 可能會使用archive.php來構建該網頁。

這就是WordPress 模板層次結構的魔力，我們在 WordPress 主題的核心概念中深入介紹： 1. 模板層次結構。

這些模板文件基於循環

這些“in-the-template-hierarchy”模板文件都共享一些非常重要的東西：它們是圍繞 The Loop 構建的，這是 WordPress 開發的絕對核心原則之一。

我們深入了解 WordPress 主題核心概念中的循環：2. 使用循環處理帖子。 Loop真的很酷，所以如果你是新手，請抓住你的襪子，這樣 Loop 就不會把它們吹掉！

模板零件

假設index.php和page.php的一部分完全相同。 我們是否應該在這兩個文件中重複該代碼？

實際上，DRY——“不要重複自己！”——是優秀程序員的戰斗口號。 重複會導致各種問題。 如果您想更改重複部分的內容怎麼辦？ 現在你必須在兩個地方改變它。 如果您忘記在一個地方更改它，或者在一個文件中出錯而在另一個文件中沒有出錯怎麼辦？ 現在您的代碼不同步並且您的網站有問題。 （現在：如果你重複相同的代碼二十次怎麼辦？你必須重複你所做的每一個更改二十次，並希望你“全部抓住它們。”）

模板部分獲取模板文件中可能重複的部分，並將它們移出到新文件中。 這樣， index.php和page.php都可以簡單地引用同一個模板部分，而不是單獨寫兩次； 如果您想更改該部分，您只需更改一次。

現在你知道了你的主題解剖

這些是真正了解 WordPress 主題的事情。 即使是一個太大的 ThemeForest 主題也將圍繞這個核心骨架構建，因此了解這些部分如何相互關聯，您將有很大的能力來理解 WordPress 主題。

解剖課結束後，接下來的三章將深入探討解釋主題如何工作的四個關鍵編程原則：

  1. WordPress 模板層次結構
  2. 循環
  3. 函數.php
  4. WordPress 鉤子

向前！