WordPress 子主題的終極指南

已發表: 2016-03-08

您是否曾經為您的網站找到一個接近完美的 WordPress 主題,但由於一個您無法忽視的微小、令人傷腦筋的設計元素而決定不使用它? 可能是字體樣式、調色板或設計元素的位置?

WordPress 主題市場充斥著許多免費和高級主題,但如果沒有聘請開發人員為您的網站創建量身定制的主題,您幾乎不可能找到一個完美到最後一個像素的主題。

WordPress 子主題使網站管理員能夠一直修改主題文件,同時保持其核心功能到位,而不會在每次更新主題時丟失修改的風險。 它們使您能夠修改主題的外觀,從按鈕上的號召性用語到完全改變每一個設計元素。

在本文中,我們將涵蓋您需要了解的有關兒童主題的所有信息,從它們是什麼到它們為何如此重要。 我們將總結一個關於如何在您自己的 WordPress 網站上使用子主題的教程——正確的方法。

聽起來不錯? 讓我們開始吧!

WordPress 子主題:基礎知識

子主題是獨立的主題,它們主動繼承父主題的功能。 激活子主題後,WordPress 將檢查它是否編碼了某些特定功能。 子主題的功能會覆蓋父主題的功能,這意味著子主題的功能將應用於您的網站。 但是,如果該功能不存在,它會查看父文件並使用在那裡編碼的文件。

在簡單的英語中,子主題是重複的主題文件,每次您覺得需要修改設計方面或某些功能時,您都可以將其編輯到子主題的文件中。 這是一個很棒的功能,因為它使網站管理員可以更改主題,而不必擔心弄亂原始文件。

現在大多數 WordPress 主題都帶有開箱即用的子主題(或子主題的變體)。

為什麼要使用子主題?

通過子主題對您的主題進行修改和更改是一種被廣泛接受(並推薦)的最佳實踐。 這樣想:如果你第一次搞砸了,你可以再試一次。 除了這個突出的好處之外,子主題對您的 WordPress 網站的維護和開發非常重要。

消除丟​​失修改的風險

更改您的父主題(原始主題文件)意味著當您更新主題時,更改將丟失。 這讓你處於某種死胡同狀態; 如果您更新主題,您將丟失所有修改,但如果您不更新主題,您的站點上將存在可能對其產生負面影響的錯誤。

有爭議的是,一旦完成更新,您可以簡單地將與修改相關的代碼複製粘貼到您的父主題中。 儘管這是完全可能的,但為什麼每次更新主題時都要花時間查找所做的修改並將它們複製粘貼到更新的主題文件中? 這是一個簡單但容易出錯的過程。

這是兒童主題的重要性首先被意識到的地方。 通過使用子主題,您可以保留所有修改安全地更新您網站的主題。

維護代碼組織

一個 WordPress 主題通常由幾千行代碼和幾個不同的文件組成——HTML、CSS、PHP、JavaScript 等。 正因為如此,這里和那裡的任何細微變化都變得難以追踪。 當需要返回並編輯主題或修復意外錯誤時,這將被證明是非常昂貴的(時間和預算方面)。

維護代碼組織
子主題幫助 Web 開發人員維護有組織的代碼。

正如我們上面討論的,子主題積極地從他們的父主題繼承。 您對子主題所做的任何更改都保留在那裡(在子主題中發生的事情會保留在子主題中!)並且更容易跟踪,因為它只有幾百行代碼(在最激進的情況下)而不是幾千。

正如您現在很可能知道的那樣,使用子主題沒有任何缺點。 實際上,它們可以保護您的網站免受意外錯誤的影響。

如何在 WordPress 中創建子主題

大多數主題都帶有兒童主題,但如果您找到一個自己喜歡的主題,那麼自己創建一個兒童主題並不困難。 我將通過為我們的 Sparkling 主題創建一個子主題來演示本教程。

Colorlib 的 Sparkling 主題
Colorlib 的閃亮主題

第 1 步:在 WordPress 安裝中為子主題創建一個目錄。

  1. 導航到您的 WordPress 網站的主題目錄 ( /wp-content/themes )。
  2. 創建一個新文件夾並將其命名為sparkling-child 。 最佳做法是為您的子主題提供與父主題相同的名稱,並在末尾附加-child
父主題目錄,子主題目錄
父主題 – 子主題

我們會將所有子主題的文件添加到此文件夾中。 也就是說,子主題正常運行所需的唯一文件是style.css文件。

第 2 步:為您的新子主題創建一個 style.css 文件。

  1. 導航到在步驟 1 中創建的子主題目錄,即/wp-content/themes/sparkling-child
  2. 在目錄中創建一個新的.css文件並將其命名為style.css
  3. 將以下代碼複製並粘貼到新的style.css文件中:

https://gist.github.com/rafaysansari/59ab402cffc540d050ed

在上面給出的代碼中,最重要的幾行是以Theme NameTemplate@import開頭的。 如果您要為另一個父主題創建子主題,那麼正確填寫這些行非常重要。 @import行確保您不必從頭開始重寫父主題的 CSS 規則。 如果沒有@import行,新站點將只加載內容,沒有樣式。

如果您的父主題有多個樣式表,則跳過此步驟。 我們將在以下步驟中向您展示如何使用原生 WordPress 功能導入多個樣式表。

第 3 步:創建functions.php文件(可選)。

functions.php文件使 Web 開發人員能夠使用本機 WordPress 函數和 PHP 代碼向其 WordPress 網站添加功能。

  1. 導航到您的子主題文件夾,即sparkling-child
  2. 創建一個.php文件並將其命名為functions.php
  3. 將以下代碼添加到functions.php文件中:

https://gist.github.com/rafaysansari/6c3cc1606823d56388f4

需要注意的是,子主題不需要functions.php文件即可運行。 事實上,如果您打算修改父主題的功能,您應該只添加此文件。 在大多數情況下,一個樣式表就足夠了,但是如果您的父主題有多個樣式表,那麼您必須創建一個functions.php文件。

第 4 步:導入多個樣式表(可選)。

例如,如果您選擇的父主題帶有多個樣式表,則使用@import將它們導入您的子主題會使您的網站速度慢幾秒鐘——這並不好。 如果可以通過幾行代碼避免增加站點的頁面加載時間,則您不希望增加它。

  1. 導航到您的子主題目錄並在文本編輯器中打開functions.php文件。
  2. 將以下代碼行添加到打開<?php標記下的functions.php文件中:

https://gist.github.com/rafaysansari/9535343506d670226f4e

上面代碼中使用的wp_enqueue_style()函數會將多個樣式表導入您的子主題,而不會減慢您的網站速度。

注意:創建子主題的最佳實踐建議無論您的父主題有多少樣式表,您都應該始終使用上面給出的代碼導入它們。

第 5 步:上傳子主題。

現在您已經成功創建了子主題,是時候將它上傳到您的 WordPress 網站並激活它了。

  1. 將子主題目錄壓縮為.zip文件。
  2. 登錄到您的 WordPress 管理面板並導航到外觀>主題
  3. 單擊以下屏幕上的添加新按鈕。
    上傳主題按鈕
    單擊上傳主題按鈕。
  4. 單擊上傳主題按鈕繼續。
    上傳子主題
    在您的驅動器中找到子主題的 .zip 文件並上傳。
  5. 瀏覽您的子主題的.zip文件並上傳。
  6. 上傳子主題後,單擊激活

您還可以通過 FTP 客戶端直接將.zip文件複製粘貼到主題目錄中來上傳子主題。 如果您要為另一個主題創建子主題,請務必對上面給出的代碼進行必要的更改。

本教程僅用於演示如何創建子主題。 我們為 Sparkling 創建了一個子主題,如果您不想花時間創建自己的主題,可以直接下載。

自定義您的孩子主題

假設一切都按計劃進行,當您激活子主題時,您的網站看起來應該與激活父主題時完全相同。 但是堅持住! 創建子主題以使您的網站看起來與眾不同難道不是重點嗎?

在本節中,我們將向您展示如何開始自定義子主題以進行修改。

應用自定義樣式

由於我們創建的第一個文件(和強製文件)是 , style.css因此只有通過使用它向子主題添加自定義樣式開始才有意義。 通過向樣式表添加自定義 CSS 代碼,您將能夠覆蓋父主題的樣式表。

使用 CSS,您可以修改激活主題的幾乎每個設計和样式方面,從顏色和按鈕到尺寸和字體樣式。 具有 CSS 真正訣竅的 Web 開發人員會修改子主題的整個佈局,使其獨一無二。

導航到外觀 > 編輯器並直接從那裡添加 CSS 代碼。
導航到外觀 > 編輯器並直接從那裡添加 CSS 代碼。

您所要做的就是將自定義 CSS 代碼添加到您的子主題的style.css文件的底部,您就可以開始了。 那些不想在每次需要進行簡單更改時訪問其站點的 FTP 客戶端的人可以導航到 WordPress 的默認編輯器(外觀>編輯器)並直接從那裡添加 CSS 代碼。

替代主題修改技術

將 CSS 代碼添加到style.css文件是修改子主題的最簡單方法。 但是,如果您想將事情提升到一個新的水平,並且可能為子主題添加一些新的自定義功能,那麼這就是事情變得嚴重的地方。 您可以進行不同類型的修改(除了更改設計元素),例如:

  • functions.php文件中添加新函數。 我們已經為您的子主題創建了functions.php文件,所以您現在要做的就是根據您想要實現的功能向其中添加一些自定義函數。 您可以使用 PHP 編寫代碼或使用本機 WordPress 功能。
  • 編輯模板文件。 如果style.cssfunctions.php只是沒有剪下來,你仍然需要修改主題,你可以從父主題複製粘貼模板文件,並進行相應的編輯。
  • 添加新的模板文件。 如果您在其他地方(不在父主題的目錄中)找到了您喜歡的模板,或者如果您想創建自己的模板,您可以將它們直接添加到子主題並從那裡開始。

您可以放心,無論您採用何種方法來修改激活的主題,您的 WordPress 網站都不會出現有害的、意外的錯誤。 如果代碼出現問題,您將確切知道錯誤發生的位置並能夠糾正它。 (提示:它通常在您添加的最後幾行中!)

關於子主題的最好的事情之一是它們使用戶能夠完全自定義父主題以匹配他們網站的品牌,這對新老企業都特別有用。 如果您以後想根據相同的父主題或新的父主題完全重新設計您的網站,您可以隨時創建一個新的子主題並從那裡開始!

包裝它

子主題是修改 WordPress 主題的推薦方式。 它們使用戶免於對其原始主題文件犯下潛在的有害錯誤,並且每次主題更新時都有丟失修改的風險。

我們涵蓋了您需要了解的有關 WordPress 中子主題的所有信息,討論了它們為何如此重要,並引導您完成了有關如何從頭開始創建您自己的子主題的深入教程。 為幫助您開始進行修改,我們最後簡要介紹瞭如何開始自定義子主題。

您是否同意所有設計和功能修改都應通過子主題進行? 您是否能夠創建子主題並在您的 WordPress 網站上成功激活它? 我們很想听聽您的經歷,所以請在下面發表評論讓我們知道!