創建和自定義 WordPress 子主題的快速指南

已發表: 2018-10-09

雖然主題開發看起來勢不可擋,但子主題的設置很簡單,而且它是從頭開始開發主題的更快替代方案。

在這篇文章中,我將分享更多關於 WordPress 子主題的詳細信息,以及如何有效地創建和自定義主題。

什麼是 WordPress 兒童主題?

在定義什麼是 WordPress 子主題之前,首先要了解什麼是 WordPress 主題以及 WordPress 從何處獲取信息以顯示網站設計,這一點很重要。

根據 WordPress Codex,“主題是文件的集合,它們協同工作以生成圖形界面,並為博客提供底層統一設計。 主題可以修改數據的顯示方式,而無需更改底層軟件。”

如果您的 WordPress 網站有一個包含所有必需模板和資產的活動主題,則父主題或子主題之間沒有區別。

WordPress主題目錄頁面
您可以在 WordPress 主題目錄或第三方主題供應商中找到主題。

但是,如果您確定自己真的喜歡找到的主題,但又想對其進行一些更改而不從頭開始創建主題,則可以創建一個 WordPress 子主題來實現此目的。

子主題繼承原始主題的結構,並且僅包含您對其進行的自定義。 子主題不是完全替換主題,而是修改或添加到現有主題的文件中。

這樣,當您的網站為訪問者加載時,會加載原始主題設計,但會包含您對其所做的更改。

現實生活中的孩子——而不是網絡世界——至少依賴一個父母的形象來生活。 同樣,子主題依賴於原始主題才能發揮作用。

這就是為什麼當您使用子主題時,原始主題被稱為父主題。

與人類嬰兒不同,兒童主題本身並不是一個完整的主題。 這意味著需要先安裝父主題,然後才能激活其相應的子主題。

完美的兒童主題以及何時使用它

任何主題都可以是父主題,但有些主題更適合它。

選擇一個您喜歡的主題,該主題可以使用一些小的結構自定義來滿足您的需求,但這並沒有提供直接開箱即用的自定義選項。

例如,Perfect Magazine 主題被用作創建 Newsliner 子主題的父主題,不僅可以更改設計中的某些顏色,還可以刪除廣告橫幅,同時在頁面頂部添加博客文章輪播。

Perfect Magazine 的選項中無法進行此類自定義,但它們的規模不足以保證從頭開始創建全新的主題。

一個 WordPress 子主題的例子
Perfect Magazine(左圖)是 Newsliner(右)的父主題。

為什麼要創建兒童主題?

WordPress 子主題對於保存和保存您在網站中投入的所有工作非常重要。 如果您直接修改主題,然後使用新的軟件版本對其進行更新,您的所有修改和自定義都將丟失。

這就是為什麼許多網站所有者選擇根本不更新其父主題的原因。 但是,這是一個嚴重的安全問題,因為 54% 的被黑客攻擊的 WordPress 網站都有過時的軟件,黑客和惡意軟件經常會通過掃描來找到這些軟件。

此外,更新通常包含漏洞修復程序,因此忽略更新意味著您的網站容易受到攻擊。

或者,您可以創建一個子主題來避免這些陷阱。

如前所述,使用 WordPress 子主題也可以加快開發速度。

由於已經設置了站點的文件系統和基本元素,您不必從頭開始。 您可以在預先存在的主題上進行構建,並在自定義其設計的同時利用該功能。

開始使用 WordPress 子主題

創建子主題需要幾個關鍵元素:

  1. 一個主題目錄文件夾
  2. 一個style.css文件
  3. 一個functions.php文件

雖然子主題中唯一需要的文件是style.css ,但需要functions.php文件才能正確地將父主題樣式表排入隊列。

因此,強烈建議您在子主題中創建一個functions.php文件以避免錯誤。

創建 WordPress 子主題

創建 WordPress 子主題時,有四個步驟,下面將詳細介紹:創建目錄文件夾、製作樣式表、將新樣式表和父樣式表加入隊列以及激活主題。

創建目錄文件夾

所有主題都位於 WordPress 安裝的/wp-content/themes/文件夾中。

導航到該目錄並創建一個新文件夾作為子主題文件夾。

通常,主題使用父主題的名稱重新命名,但在末尾添加-child

例如,兩個文件路徑將是/wp-content/themes/yourtheme/ 和 /wp-content/themes/yourtheme-child/

子主題的名稱中也不應該有空格。

雖然這些不是命名文件夾的硬性規則,特別是如果您不分發主題以供公眾使用,但這是一種常見的 WordPress 開發實踐,因為它有助於組織。

創建樣式表

WordPress 子主題通常用於相當廣泛的設計編輯,因此需要單獨的style.css

該文件將包含影響主題外觀的所有 CSS 規則和聲明。

在新的子主題文件夾的根目錄中創建一個style.css文件。 然後,在頁面頂部輸入此標題:

 /*
 主題名稱:二十七歲的孩子
 主題 URI:http://example.com/twenty-seventeen-child/
 說明: 二十七兒童主題
 作者:簡多
 作者 URI:http://example.com
 模板:二十七
 版本:1.0.0
 許可證:GNU 通用公共許可證 v2 或更高版本
 許可證 URI:http://www.gnu.org/licenses/gpl-2.0.html
 標籤:淺色、深色、兩欄、右側邊欄、響應式佈局、可訪問性就緒
 文字領域:二十七
*/

標題是文件的重要組成部分,因為它告訴 WordPress 有關主題的基本詳細信息。 它還表明它是具有特定父主題的子主題,如模板部分所示。

標題的唯一要求是Theme NameTemplate 。 但是,最好填寫其餘部分。

請務必更改所有必需的詳細信息,以確保它們準確無誤。 例如,如果您使用的父主題是不同的主題,則作者作者 URI以及對 27 的引用。

標籤部分與 WordPress 主題目錄相關。 如果您想在那裡上傳您的主題,請確保選擇與您的主題相關的標籤。

將父主題樣式表和子主題樣式表排隊

接下來,確保每個主題的樣式表在稱為入隊的過程中正確加載很重要。

入隊意味著將項目或項目列表添加到隊列中以進行數據處理。 在這種情況下,隊列是您的網站在瀏覽器請求時需要加載的文件。

如果您要跳過排隊,您的網站只會從您的子主題樣式表中提取,並且不會使用父主題提供的任何樣式。

還需要注意的是,可以使用@import方法將父style.css加入隊列。 但是,由於性能問題,不再建議這樣做。

要將樣式表排入隊列,您需要創建一個functions.php文件(如果您還沒有的話)。

這可以通過創建一個新文件並將其命名為functions.php來完成。 然後。 將此代碼放在最頂部:

 <?php

確保在上面的行之前不要包含任何空格,否則會導致錯誤。

functions.php文件中,添加以下代碼以確保您的站點以正確的順序正確加載父style.css以及子主題的style.css

 add_action('wp_enqueue_scripts','my_theme_enqueue_styles');

功能 my_theme_enqueue_styles() {

    $父母_; // 這是 27 歲主題的 'twentyseventeen-style'。

    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style('兒童風格',
        get_stylesheet_directory_uri() 。 '/style.css',
        數組($parent_style),
        wp_get_theme()->get('版本')
    );
}
?&gt;

確保更改存儲在$parent-style變量中的父樣式以包含主題的名稱。

根據 WordPress Codex 的建議,此代碼將確保父style.css作為依賴項加載,這意味著子主題的style.css需要加載。

激活子主題

保存所有文件後,轉到外觀 > 主題以找到您的子主題,然後單擊激活按鈕。

您不需要同時激活您的父主題。 雖然,它仍應安裝並保留在/wp-content/themes/文件夾中。

您的子主題style.css中的標題文本會將兩者連接在一起,並闡明您的 WordPress 安裝的關係。

WordPress 網站上的主題管理頁面
當您激活子主題時,父主題仍應保留在主題文件夾中。

激活子主題後,如果您遇到設計問題,您可能需要重新保存外觀 > 菜單中的菜單以及定制器的主題選項中的一些其他內容。

快速定制提示

在開始開發過程之前,以下是一些關於自定義 WordPress 子主題的提示。

主題形象

外觀 > 主題頁面上,您必須包含您自己的主題圖像。

如果您想插入一些東西來代替方格框,您可以上傳一個名為screenshot.png的 880 x 660 PNG 圖像文件。

將圖像放在子主題文件夾的根目錄中。 這樣,WordPress 安裝就會知道將其用作主題的圖像。

覆蓋父主題文件

如果您想在 WordPress 子主題中插入新文件以覆蓋舊組件,請將父文件複製到子主題中,然後您可以對其進行自定義。

加載站點時,WordPress 會檢查子主題是否有任何與父主題對應的文件。 如果找到,它們將覆蓋原始父主題的文件。

它不需要一個村莊

WordPress 子主題創建不必像聽起來那麼複雜。 請按照上述步驟操作,請放心,您的編輯將保持不變。 它還將幫助您的網站更加安全。

你想做什麼樣的兒童主題? 你能成功創建它嗎? 你在這個過程中遇到過麻煩嗎? 隨時在下面的評論中分享您的經驗。