如何開發一款WordPress子主題

如何開發一款WordPress子主題

您已經執行WordPress網站一段時間了,它一直在做您需要做的事情。但是現在,您決定需要對其進行自定義。

或者,您可能正在使用從主題目錄下載的主題或已購買的主題建立站點,但您意識到它不能完全按照您的需要執行。

那你怎麼辦呢?

您可以找到一個外掛來提供您需要的自定義或切換到新主題。但是,如果您對當前的主題感到滿意並且找不到可以新增您需要的功能的外掛怎麼辦?

答:您需要自定義您的主題。最佳實踐說:您通過(WordPress)子主題來做到這一點。

在本教程中,我們將更多地討論子主題是什麼以及它是如何工作的。我們還將帶您完成從頭開始建立主題的過程,並向您展示如何將修改後的主題變成子主題。

修改現有主題是開始WordPress開發的好方法。更改的結果將很容易看到和理解。但是,直接對活動主題進行編輯可能會導致問題,因為即使是一個小錯誤也可能導致主題無法使用。每當主題更新時,您所做的所有更改也將丟失。

然而,有一種方法可以避免這些問題,那就是建立“子主題”。子主題的工作方式與任何其他WordPress主題大致相同,不同之處在於它使用現有主題作為基礎(或“父”)。您對子主題所做的更改將反映在您的站點上,而無需直接更改父主題。

  1. 自定義WordPress的方法
  2. 什麼是WordPress子主題?
  3. 何時在WordPress中使用子主題(優點)
  4. 何時不使用WordPress子主題(缺點)
  5. 如何建立WordPress子主題
  6. 如何啟用WordPress子主題
  7. 如何在WordPress中自定義您的子主題
  8. 如何對子主題和父主題進行故障排除
  9. 使用WordPress子主題時的有用提示

自定義WordPress的方法

自定義主題有風險。如果您在第三方主題(例如您從市場上購買的主題)中編輯程式碼,那麼當您下次更新主題時,您所做的所有更改都將丟失。這意味著您的網站不僅會恢復原狀,而且您的所有工作都被浪費了。

可以通過三種方式自定義您的WordPress網站:

  • 直接編輯您的主題。
  • 安裝外掛。
  • 建立當前主題的子主題。

讓我們依次來看看其中的每一個。

編輯您的主題

如果您的網站執行自定義WordPress主題,這意味著它是專門為您的網站開發的,您可以選擇安全地編輯它,因為下次更新主題時不會丟失您的自定義設定。

相反,如果您或您的開發人員將來對主題進行更改,您將編輯的是主題的自定義版本,而不是更改之前的原始版本。

這並不意味著編輯您的主題並非沒有風險。如果您沒有編寫主題的經驗,建立子主題可能仍然更安全(我們稍後會看到如何)。這是我做的事情:我有一個基本主題,我在我所有的網站上使用,具有標準佈局、鉤子和函式,然後我在每個網站上使用子主題對其進行自定義。

如果您直接編輯主題,請確保保留原始主題的備份,不要在實時站點中編輯主題(改用開發或臨時站點),並使用版本控制來跟蹤您的更改。

如果您使用的是第三方主題,則永遠不要直接編輯它。相反,使用外掛或建立子主題。

新增外掛

自定義WordPress主題的第二個選項是安裝或編寫外掛。

如果您要進行的自定義是功能性的而不是與設計相關的,那麼外掛是一種更合適的方法。所以如果你想新增額外的程式碼,最好還是建立一個外掛。

外掛不必很大或很複雜:如果您需要向主題中的functions.php檔案新增額外的程式碼,請建立一個簡單的外掛來向您的站點新增幾行程式碼。一個很好的例子是註冊自定義文章型別

將程式碼新增到主題的functions.php可能很誘人,但新增帖子型別是對網站的功能更改,而不是設計更改。如果您以後要切換主題,您不會希望丟失這些帖子型別以及您使用它們建立的所有帖子。這就是為什麼您應該安裝或建立外掛的原因。

有時您可以找到一個現有的外掛來滿足您的需求,但有時您可能需要自己編寫外掛程式碼。

WordPress外掛庫

WordPress外掛庫

如果對是否應該建立外掛或自定義主題(或子主題)有疑問,請問自己:如果我想在將來更改網站的設計並安裝新的WordPress主題,我是否希望保留此更改? 如果答案是肯定的,這意味著更改是功能性的而不是美學的,它應該包含在外掛中。

建立子主題

自定義WordPress主題的第三個選項是建立子主題

以下是您使用子主題的一些場景:

  • 您希望更改網站的設計,而不是功能。
  • 您的網站正在執行第三方主題或您想在當前狀態下再次使用的主題。
  • 您不想直接編輯現有主題,以防它引起問題(可能您不是經驗豐富的主題開發人員)。
  • 您的站點正在執行一個設計為父主題的主題,例如框架主題。這些主題具有許多自定義選項,例如hooks,專為您新增到您自己的子主題而設計。

因此,子主題是一種向您的網站新增自定義內容的有效且安全的方式。因此,讓我們更深入地瞭解它們。

什麼是WordPress子主題?

WordPress主題目錄

那麼,WordPress中的子主題究竟是什麼?它是如何工作的?

子主題是與另一個主題協同工作的主題,稱為父主題

它包含一些特定的說明來告訴WordPress這是一個子主題以及父主題是什麼。WordPress 然後在大多數情況下使用來自父主題的程式碼,但會使用來自子主題的程式碼(如有必要)覆蓋它。

在許多方面,子主題的功能就像一個“正常”的WordPress主題。它以相同的方式安裝、啟用和配置。子主題的獨特之處在於它依賴於另一個主題來確定其大部分內容。另一個主題被稱為“父主題”。

WordPress將始終優先考慮子主題的設定。因此,你能想到的子主題為坐在前面的家長。如果子主題中的設定覆蓋了父主題中的匹配設定,則子主題優先。這使您可以僅更改要更改的主題部分,其他所有內容都由現有父級處理。

例如,大多數父主題包含定義不同標題文字級別的樣式,例如h1、h2、h3、h4等。假設父主題將h1字型大小定義為20px,但子主題指定與32px相同的標題。在這種情況下,WordPress會將後一種樣式應用於所有h1文字。但是,如果同一個子主題不包含h2、h3 和 h4 的特殊樣式說明,則仍將應用父主題定義的樣式。

如果您可以直接編輯主題,您可能想知道為什麼子主題值得麻煩。使用子主題實際上有很多優點,因為它:

  • 使您能夠更新父主題。您應該始終保持網站的各個方面都是最新的。但是,如果您編輯了父主題,則更新後所有更改都將丟失。
  • 可以輕鬆找到您所做的更改。發現您進行更改的每個例項可能很困難。使用子主題使您的新增內容更加清晰。
  • 避免直接編輯父主題的風險。如果您在處理主題時出錯,或者您對所做的修改不滿意,您可以輕鬆回滾到原始主題。

WordPress子主題中的檔案

每個WordPress子主題必須至少有兩個檔案:樣式表和函式檔案。樣式表將在頂部包含註釋掉的文字,告訴WordPress這是一個子主題以及父主題是什麼。函式檔案將包含一個函式,該函式將來自父主題的樣式表排入佇列

注意:您可能會遇到一些指南,告訴您從子主題的樣式表呼叫父主題樣式表。這不再是正確的方法,您應該在函式檔案中使用排隊。我很快就會告訴你如何做到這一點。

你的子主題並不必須 包含的任何其他檔案。與父主題不同,如果主題中沒有更多特定檔案,它不需要index.php檔案作為後備。這是因為如果子主題中不存在模板檔案,WordPress將使用父主題中的檔案。

因此,根據您希望子主題執行的操作,您可以向樣式表、函式檔案中新增額外的程式碼,或者在子主題中建立額外的檔案以覆蓋父主題。這些可能包括以下一項或多項:

  • 模板檔案覆蓋父主題中的相同檔案,例如page.php當您要自定義靜態頁面的顯示時。
  • 當您想要自定義站點設計的這些部分時,模板部分例如header.php或footer.php。
  • 您從子主題中的模板檔案呼叫的額外模板部分。因此,如果您想在顯示靜態頁面時自定義頁首,您可以在子主題中建立一個名為header-page.php的檔案和一個名為page.php的模板檔案,該檔案將覆蓋父主題中的page.php . 這個模板檔案將與父主題中的模板檔案相同,除了標頭檔案的呼叫,它會呼叫header-page.php 而不是header.php。
  • 用於功能的額外包含檔案。如果您想新增大量函式程式碼並對其進行組織,您可以為每組函式建立包含檔案,然後在您的子主題的functions.php檔案中呼叫它們。因此,例如,如果您想新增額外的定製器選項,您可以在您的子主題中新增一個名為customr.php的包含檔案,然後從您的子主題中的函式檔案中呼叫該檔案。

但是,如果您確實新增了額外的檔案和功能,WordPress怎麼知道該使用哪個呢?來自父主題的那些還是來自子主題的那些?這就是我們接下來要講的。

WordPress如何選擇模板檔案

WordPress在您的站點上顯示內容時從您的主題中選擇模板檔案的方式是參考模板層次結構

WordPress模板層次結構

WordPress模板層次結構

WordPress使用此層次結構來處理主題中的模板檔案,並在顯示給定型別的內容時找到要使用的正確模板檔案。它將從頂部開始(在上圖中的左側)並依次查詢給定內容型別的每個檔案。當它找到將顯示該內容的檔案時,它將使用它。

假設您的主題有一個archive.php檔案和一個category.php檔案,但沒有tag.php檔案。顯示類別檔案時,WordPress將使用category.php,因為它更特定於內容型別。當顯示標籤檔案時,它將使用archive.php代替。

如果WordPress沒有為給定的內容型別找到模板檔案,它會預設為包羅永珍的index.php檔案,這就是為什麼每個獨立主題(即不是子主題)都必須有一個index.php檔案的原因.

這同樣適用於單個文章和頁面。假設您的主題有一個single.php檔案,它是任何文章型別(包括頁面和自定義帖子型別)的單個帖子的統稱。它還有一個page.php檔案。當顯示單個頁面時,它將使用page.php。顯示文章時,它將使用singular.php。如果您註冊自定義文章型別並且不為該帖子型別新增模板檔案,它將再次使用singular.php。

當您使用子主題時,WordPress仍然使用模板層次結構來決定在您的站點上輸出內容時使用哪個檔案。它檢視父主題和子主題中的檔案並使用它遇到的第一個檔案。

所以想象你的子主題有singular.php和post.php,你的父主題有page.php和index.php。輸出單個文章時,WordPress將使用子主題中的post.php。輸出頁面時,它將使用父主題中的page.php。當輸出自定義帖子型別的單個帖子時,它將使用來自子主題的single.php。

但是,如果您的子主題和父主題都有相同檔案的例項怎麼辦?

假設您將page.php檔案新增到上一個示例中的子主題。因為該主題位於子主題中,所以它會覆蓋父主題中的相同檔案。因此,當顯示單個頁面時,WordPress將使用來自子主題的新page.php檔案。

這就是為什麼建立子主題可以讓您自定義父主題。如果您將父主題中的模板檔案副本新增到子主題,然後對其進行編輯以包含您要進行的自定義,WordPress將使用這個新模板檔案,而不是來自父主題的模板檔案。這意味著您的自定義將在顯示內容時使用,而無需您編輯父主題。好的!

WordPress如何從父主題和子主題執行函式

如果您不想對主題中的模板檔案進行自定義,而是對功能進行自定義,該怎麼辦?

你也可以這樣做。首先,您需要讓自己滿意,這樣做的正確方法是通過子主題而不是外掛。一個示例可能是您想要編輯父主題中已有的函式,例如,在頁尾中輸出版權頁的函式。

然後將新函式新增到子主題中的函式檔案,或新增到從函式檔案呼叫的包含檔案。

為確保您的新函式覆蓋父主題的功能,您需要了解如何覆蓋函式。有三種方法可以做到這一點:

  • 通過在父主題中編寫一個與可插入函式同名的新函式。
  • 通過將父主題中的函式從它所附加的鉤子中解開,然後編寫一個新函式來替換它。
  • 通過編寫一個比原始函式具有更高優先順序的新函式並通過相同的鉤子呼叫它,這意味著它在原始函式之後被呼叫,因此可以覆蓋或增加它。

我們將在本文稍後介紹您如何執行所有這些操作。但首先,讓我們看一下您何時會使用和不會使用子主題的場景。

何時在WordPress中使用子主題(優點)

您現在知道什麼是子主題以及如何使用它們來覆蓋父主題中的模板檔案或函式。

簡要回顧一下,如果您在網站上執行主題並且想要執行以下一項或多項操作,則應使用子主題:

  • 編輯一個或多個模板檔案。
  • 新增與顯示而非功能相關的額外功能。
  • 覆蓋父主題中的一個或多個函式。
  • 新增額外的模板檔案。

一些優點包括:

  • 易於擴充套件和定製:很明顯,子主題擴充套件了其父主題的功能。您已經有一個父主題形式的現成模板,您需要做的就是為您的子主題建立一個單獨的style.css檔案,並根據您的需要新增自定義調整。
  • 輕鬆更新:隨著 WordPress 的發展,主題和外掛需要經常更新。如果您對主要主題進行自定義調整和更改,如果您更新主題,最終可能會丟失所有更改。因此,建議對子主題進行此類更改,這樣即使您需要更新父主題,也不必擔心丟失更改。

當您不使用子主題時呢?

何時不使用WordPress子主題(缺點)

有時您不會使用子主題,而應該使用不同的方法來自定義您的網站。這些是:

  • 如果您的主題是您自己開發的(或其他人為您編寫的)並且不需要在其他任何地方使用它。只需編輯主題,確保使用版本控制。
  • 如果您要進行的自定義具有功能性,例如新增自定義帖子型別,並且您希望在將來更改主題時保留它們。改用外掛。

一些缺點包括:

  • 選擇理想的父主題:並非所有主題都可以作為好父主題!例如,某些WordPress主題可能不會定期更新,因此往往缺乏最新的功能。同樣,並非所有WordPress主題都是在考慮子主題的情況下建立的,因此可能不適合父主題。您需要選擇完美的父主題,以便正確擴充套件它並使其成為您子主題的基礎。
  • 定製工作:子主題基本上尋求擴充套件和定製現有模板設計。因此,如果您已經圍繞父主題建立了一個網站,則在移動到子主題時,您可能需要重新考慮自定義元素,例如選單、主題選項、側邊欄、標題等。

現在您知道何時(以及何時不)使用子主題,是時候開始工作並學習如何在WordPress中建立子主題了。

現在您知道為什麼應該使用子主題,現在是建立一個的時候了。這個過程有點複雜,但我們將引導您完成每一步。

如何建立WordPress子主題

在建立子主題之前,您需要做一些準備工作。首先,在執行任何其他操作之前建立站點備份非常重要。這樣,您就可以處理您的主題,而不必擔心破壞您的網站或丟失其任何內容。事實上,最好使用臨時站點來編輯和測試您的主題,而不是您的實時站點。

我們還建議您在開始之前熟悉CSS和PHP。雖然您不需要任何使用這些語言建立子主題的經驗,但它肯定有助於編輯主題的過程。花時間瞭解這些關鍵語言的基礎知識將使您有一個良好的開端。

在WordPress中設定一個基本的子主題涉及建立兩個檔案:樣式表函式檔案

Step 1:為您的子主題建立一個資料夾

您需要的第一件事是為您的孩子主題生活的地方。但是,在此之前,您需要一種直接處理站點檔案的方法。這通常意味著使用像FileZilla這樣的SFTP解決方案來訪問您的站點。

FileZilla介面

一旦你安裝和設定FileZilla中,您可以使用登入你的虛擬主機提供的憑據。完成後,您將看到整個站點組織成一系列資料夾和檔案。從這裡,您需要導航到/wp-content/themes/,這是所有主題所在的位置。

WordPress主題目錄

右鍵單擊此資料夾內的任意位置,然後選擇建立目錄。此資料夾將儲存您的子主題,因此我們建議您以其父主題命名。例如,一個二〇一七的子主題可能被稱為twentyseventeen-child。

WordPress子主題目錄

儲存資料夾後,就可以開始向子主題新增內容了。

Step 2:建立樣式表

層疊樣式表 (CSS)是一種定義HTML內容外觀的語言。主題的CSS檔案控制您網站上的文字、影象、超連結和大多數其他內容的外觀。當我們談論更改主題的外觀時,我們通常談論的是編輯其CSS。

這聽起來可能很複雜,而且CSS確實為您提供了很多自定義選項。但是,現在您無需擔心具體細節。您需要做的就是建立CSS檔案本身。您將在剛剛建立的子主題資料夾中執行此操作。只需開啟資料夾,右鍵單擊其中的任意位置,然後選擇建立新檔案。

主題CSS樣式

當您被要求命名檔案時,將其命名為style.css,注意使用確切的大小寫和拼寫(因為WordPress否則將無法識別該檔案)。

建立子主題CSS樣式檔案

該檔案自然是空的,因此您需要為其提供一些內容。要開始編輯檔案,請右鍵單擊它並選擇檢視/編輯。這將在您的預設文字編輯程式中開啟檔案,例如TextEdit或記事本。

空白CSS檔案

在建立檔案之前,您需要建立一個資料夾來儲存您的主題。這在WordPress安裝的wp-content/themes檔案中。

在新主題的資料夾中,建立一個名為style.css的檔案。新增以下內容:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/*
Theme Name: My Child Theme. Child for Twenty Nineteen.
Theme URI: https://rachelmccollin.com
Description: Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author: Rachel McCollin
Textdomain: mccollin
Author URI: https://rachelmccollin.com/
Template: twentynineteen
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
/* Theme Name: My Child Theme. Child for Twenty Nineteen. Theme URI: https://rachelmccollin.com Description: Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme. Author: Rachel McCollin Textdomain: mccollin Author URI: https://rachelmccollin.com/ Template: twentynineteen Version: 1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html */
/*
Theme Name:  My Child Theme. Child for Twenty Nineteen.
Theme URI:  https://rachelmccollin.com
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author:  Rachel McCollin
Textdomain:  mccollin
Author URI:  https://rachelmccollin.com/
Template:  twentynineteen
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

這段文字被註釋掉了。它不是在您的網站上執行任何東西或提供任何功能的程式碼。相反,它會告訴WordPress主題。每個主題中都需要這樣的文字,否則WordPress無法將其識別為主題。

讓我們通過每一行來確定它們的作用:

  • Theme Name:主題的唯一名稱。
  • Theme URI:使用者可以在其中找到主題的程式碼或文件。
  • Description:幫助使用者理解主題的描述性文字。
  • Author:你的名字
  • Textdomain:用於國際化。在任何國際化函式中使用文字域作為第二個引數。
  • Author URI:作者的網站。
  • Template:儲存父主題的資料夾。使用資料夾名稱而不是主題名稱。沒有這一行,您的主題將無法作為子主題使用。
  • Version:版本號
  • License:許可證,必須是GNU。[關聯]
  • License URI:許可證資訊的連結。

子主題最重要的一行是Template: 行。沒有這個,主題將不能作為子主題工作。只有子主題將包含此行。

將此新增到您主題的樣式表中,對其進行編輯以新增您自己的詳細資訊而不是我的。您需要編輯Template: 行以新增儲存現有主題的資料夾,因為這將是您的父主題。

現在儲存檔案。如果您現在檢視站點中的主題詳細資訊螢幕,您會看到顯示的所有內容:

WordPress中沒有截圖的主題頁面

WordPress中沒有截圖的主題頁面

這看起來不太好,因為沒有截圖。這是一張影象,可以讓您瞭解主題的外觀。除非您的主題看起來與父主題非常不同,否則只需將screenshot.png檔案從您的父主題複製到您的子主題。

帶有螢幕截圖的WordPress中的主題頁面

帶有螢幕截圖的WordPress中的主題頁面

Step 3:引用父主題

到目前為止,您的主題已經有了一個主頁和一些基本資訊。現在,是時候給它一些功能了。您可以通過建立一個函式檔案來做到這一點。除其他外,此檔案決定了主題的獨特功能。這是一個功能強大的工具,用途廣泛,但現在,您只需要建立它。

下一步是將函式檔案新增到您的子主題。您需要它,以便您可以將來自父主題的樣式表排入佇列。沒有它,您的網站將根本沒有樣式,看起來像這樣:

我們的主頁沒有CSS

我們的主頁沒有CSS

不好,我相信你會同意的!因此,讓我們新增樣式以使其看起來應該如此。

在您的子主題資料夾中,新增一個名為functions.php的檔案。開啟它並新增以下程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
/* enqueue script for parent theme stylesheeet */
function childtheme_parent_styles() {
// enqueue style
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');
<?php /* enqueue script for parent theme stylesheeet */ function childtheme_parent_styles() { // enqueue style wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' ); } add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');
<?php
/* enqueue script for parent theme stylesheeet */        
function childtheme_parent_styles() {
// enqueue style
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

它使用wp_enqueue_style()函式將來自父主題的樣式表排入佇列,get_template_directory_uri()函式定位該檔案的儲存位置。該函式位於我建立的一個名為wbolt_parent_styles()的函式中,與wp_enqueue_scripts鉤子掛鉤。

您可能想知道為什麼它使用名為wp_enqueue_scripts而不是的函式wp_enqueue_styles。這是因為wp_enqueue_scripts用於指令碼和樣式,並且沒有像wp_enqueue_styles.

隨意編輯我的程式碼,將您自己的字首新增到您的函式名稱中。我使用“childtheme”作為字首,以確保我的函式不會與來自父主題或任何外掛的任何其他函式發生衝突。

現在儲存您的檔案。

Step 4:啟用子主題

您的子主題現在可以使用了,所以您需要做的就是啟用它。最簡單的方法是通過WordPress管理介面。只需登入,然後訪問外觀>主題。您應該已經在此處看到您的子主題:

啟用子主題

此時,您只需要單擊“啟用”即可啟用您的主題。當然,此時您可能不會注意到您的站點有任何差異。這是因為您實際上還沒有新增任何自定義。子主題仍然是一張白紙,等著你把它變成特別的東西。

正如我們之前提到的,您現在應該花一些時間來了解有關CSSPHP的更多資訊。這將使您能夠使用內建主題編輯器通過子主題向您的站點新增新樣式和功能。如果你想擴充套件您的主題的功能,它也是一個聰明的想法,詳細瞭解functions.php的檔案。只需稍加努力,您就可以使用全新的子主題對 WordPress 網站進行任何您想要的更改!

如何啟用WordPress子主題

一旦您的子主題準備就緒,您就需要啟用它。如果您擔心啟用子主題會關閉父主題,請不要擔心:WordPress會知道使用父主題中的檔案,除非您向子主題新增新檔案來覆蓋它們。到目前為止,您還沒有向子主題新增任何額外的檔案或功能,因此您的站點的工作方式與啟用父主題時完全相同。

請記住:首先在您的開發或臨時站點上執行此操作。在您測試之前,不要在您的實時站點上啟用您的子主題。

在WordPress管理中,轉到外觀 > 主題。您會發現您的子主題列在您網站上安裝的主題中。

將滑鼠懸停在主題上,然後單擊“啟用” 按鈕。這將啟用您的子主題。現在,當您訪問您的實時站點時,它看起來和以前一樣:

網站首頁

網站首頁

它看起來相同,因為您尚未新增任何自定義。但是你現在有一個工作子主題。做得好!

如何在WordPress中自定義子主題

現在您的WordPress網站有了一個可用的子主題,是時候新增您的自定義設定了。在這裡,我將向您展示如何新增模板檔案以覆蓋父主題上的模板檔案、如何為子主題新增樣式以及如何新增新功能。

讓我們從模板檔案開始。

如何將模板檔案新增到您的WordPress子主題

我們已經瞭解了WordPress在您的網站上顯示內容時如何選擇要使用的模板檔案。有兩件事要記住:

  • WordPress將使用層次結構中最先出現的檔案,無論是來自子主題還是父主題。
  • 如果父主題和子主題中都存在同名的模板檔案(或模板部分,例如header.php),WordPress將使用子主題中的一個。

要新增自定義,我發現首先從父主題製作相關檔案的副本,將其新增到子主題,然後編輯它更容易。

這適用於您的子主題中的檔案是否與父主題中的命名檔案相同,或者它是用於顯示不同內容型別的新檔案,還是層次結構中更高的檔案。

因此,如果我將新版本的page.php新增到我的子主題中,這將覆蓋我父主題中的page.php,我會將page.php從我的父主題複製到我的子主題,然後對其進行編輯。確保複製檔案:不要移動它,因為您不想對父主題進行任何更改。

例如,如果我想要在我的子主題中使用自定義頁面模板,我會將page.php複製到我的子主題,重新命名它,然後對其進行編輯。

這樣,您可以確保不需要自定義的檔案的所有方面仍然可以正常工作。這同樣適用於模板部件。

如何為您的WordPress子主題新增樣式

您還可以向子主題的style.css檔案新增樣式,這將增強或覆蓋父主題樣式表中的樣式。

WordPress將首先從父主題呼叫樣式表,然後從子主題呼叫樣式表。這意味著如果您將樣式新增到與父主題中的樣式相同的元素的子主題,只要您使用相同的選擇器,它就會覆蓋父主題的樣式。

因此,假設您想更改站點標題的顏色。在父主題中,這可能是這樣的:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
h1.site-title {
color: #000;
}
h1.site-title { color: #000; }
h1.site-title {
color: #000;
}

要在您的子主題中覆蓋它,您可以新增以下內容:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
h1.site-title {
color: #303030;
}
h1.site-title { color: #303030; }
h1.site-title {
color: #303030;
}

由於瀏覽器會在父主題中的樣式之後遇到這個,它將覆蓋它並被使用。

如何為WordPress子主題新增函式

因此,您在WordPress中建立了子主題並不是因為您想要編輯任何模板檔案,而是因為您想要新增額外的功能或覆蓋父主題中的一個或多個功能。

在子主題中編寫函式比新增模板檔案要複雜一些,但這是可能的。

如果您想新增一個不與父主題中的任何功能互動的新功能,您可以繼續這樣做。只需將該函式新增到子主題中的functions.php檔案中,將其掛接到相關的操作或過濾器掛鉤上,就可以了。

但是,如果您計劃覆蓋或編輯父主題中的函式,則需要了解可用於執行此操作的方法。您可以通過三種方式覆蓋子主題中的父主題功能:

  • 如果父主題中的主題是可插入的,您只需在子主題中編寫另一個具有相同名稱的函式,WordPress將執行該函式而不是父主題中的函式。
  • 如果你想完全停止父主題中的函式執行,你可以在你的子主題中編寫一個函式,將它從它所附加的鉤子中解開。
  • 如果您想擴充一個函式,您可以在您的子主題中新增另一個函式(具有不同的名稱),並確保它在父主題中的函式之後執行。

讓我們仔細看看你是如何做到的。

覆蓋可插入函式

可插拔函式由環繞在它周圍的條件檢查標識。這將檢查是否有另一個同名的函式已經被觸發。如果是這樣,它不會執行該功能。

WordPress將在來自父主題的函式之前觸發來自您的子主題的函式。如果它在父主題中遇到一個可插拔函式,並且您已向子主題新增了一個同名的函式,則該可插拔函式將不會執行。

一個示例是在WooCommerce站點的Storefront主題中輸出版權頁的函式。這是沒有內容的函式:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
if ( ! function_exists( 'storefront_credit' ) ) {
function storefront_credit() {
// contents for function here
}
}
if ( ! function_exists( 'storefront_credit' ) ) { function storefront_credit() { // contents for function here } }
if ( ! function_exists( 'storefront_credit' ) ) {
function storefront_credit() {
// contents for function here
}
}

如果您想覆蓋它,您可以編寫另一個具有相同名稱 ( storefront_credit()) 的函式並將其掛接到與父主題相同的鉤子上。

從父主題中解開函式

如果父主題的函式不可插入,您仍然可以阻止它執行。假設您的父主題有一個名為parent_function()的函式,函式init20的優先順序掛接到鉤子上。您想阻止它執行,以便您可以用自己的函式替換它。

下面是父主題函式的樣子:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function parent_function() {
//contents of function here
}
add_action( ‘init’, ‘parent_function’, 20 );
function parent_function() { //contents of function here } add_action( ‘init’, ‘parent_function’, 20 );
function parent_function() {
//contents of function here
}
add_action( ‘init’, ‘parent_function’, 20 );

要解開它,您可以在您的子主題中對此進行編碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function remove_parent_function() {
remove_action( ‘init’, ‘parent_function’, 20 );
}
add_action( ‘wp_head’, ‘remove_parent_function’ );
function remove_parent_function() { remove_action( ‘init’, ‘parent_function’, 20 ); } add_action( ‘wp_head’, ‘remove_parent_function’ );
function remove_parent_function() {
remove_action( ‘init’, ‘parent_function’, 20 );
}
add_action( ‘wp_head’, ‘remove_parent_function’ );

請注意,您將第二個函式掛接到在每個頁面頂部執行的wp_head掛鉤,並且您必須包含與原始函式中相同的優先順序引數值。如果原始add_action()函式沒有優先順序,您可以從子主題的remove_action()函式中省略它。

注意:如果原始函式被掛鉤到過濾器掛鉤而不是動作掛鉤,則您將以remove_filter()相同的方式使用。

用另一個函式擴充一個函式

有時您可能想要新增到它而不是覆蓋或刪除函式。在這種情況下,您將編寫一個具有不同名稱的新函式,並將其附加到同一個鉤子上。

假設您的父主題中的頁尾有一個名為parent_footer. 您附加到該鉤子的任何函式都將在該鉤子所在的位置執行。

在父主題中,已經有一個parent_footer_content()用於填充頁尾的函式。但是如果你想給它新增一些額外的程式碼怎麼辦?

以下是該parent_footer_content()函式在父主題中的樣子:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function parent_footer_content() {
// content of function here
}
add_action(parent_footer’, ‘parent_footer_content’ );
function parent_footer_content() { // content of function here } add_action( ‘parent_footer’, ‘parent_footer_content’ );
function parent_footer_content() {
// content of function here
}
add_action( ‘parent_footer’, ‘parent_footer_content’ );

現在,如果您想在那之後新增其他內容,您將在您的子主題中建立一個函式,掛鉤到同一個動作鉤子,優先順序意味著它在第一個函式之後執行。由於未為父主題的功能設定優先順序,因此預設為10。因此您需要使用更高的數字,以便在此之後觸發。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function child_footer_extra_content() {
// contents of function here
}
add_action(parent_footer’, ‘child_footer_extra_content’, 20 );
function child_footer_extra_content() { // contents of function here } add_action( ‘parent_footer’, ‘child_footer_extra_content’, 20 );
function child_footer_extra_content() {
// contents of function here
}
add_action( ‘parent_footer’, ‘child_footer_extra_content’, 20 );

這將在來自父主題函式的程式碼之後新增來自子主題函式的程式碼。

如何對子主題和父主題進行故障排除

所以現在您知道如何在WordPress中建立子主題以及如何使用它來覆蓋模板檔案、新增額外樣式以及為您的站點新增功能。

但是,如果您的子主題沒有按預期工作怎麼辦?如果內容沒有按照您預期的方式顯示,或者函式沒有觸發怎麼辦?

使用此清單對您的子主題進行故障排除:

  1. 檢查您是否已啟用您的子主題以及您的父主題是否仍在執行。這一步很容易忘記!
  2. 重新整理您的瀏覽器快取以及由您網站上的任何外掛建立的快取。
  3. 在您的子主題的wp-config.php檔案中將wp-debug設定為true。如果您正在檢視白屏,應該會顯示一條訊息,告訴您是什麼程式碼導致了問題以及它在哪個檔案中。這將幫助您識別錯誤以及正在使用哪個檔案。
  4. 檢查頁面、文章或存檔的輸出程式碼。找到body元素並檢視它有哪些類。這些將告訴您正在檢視的內容型別,這將幫助您識別正在使用的模板檔案。有時它不是你所期望的。例如,主部落格頁面從不使用archive.php,即使它顯示了您帖子的存檔。
  5. 檢查您是否正確命名了檔案。請參閱模板層次結構以確保您使用了正確的語法。
  6. 如果您從父主題複製了一個檔案並將其新增到您的子主題,請檢查您是否已儲存更改。
  7. 如果覆蓋可插入函式的函式不起作用,請檢查您是否給它提供了與可插入函式完全相同的名稱,並且父主題中的函式確實是可插入的。
  8. 如果您刪除的函式仍在觸發,請檢查您是否新增了正確的優先順序,以及您的拼寫是否與父主題中的函式和鉤子的拼寫相同。
  9. 如果您使用優先順序來覆蓋或增加一個函式,請嘗試增加優先順序值,這樣您就可以絕對確定它最後觸發。檢查是否有其他附加到該鉤子的函式會干擾您的程式碼。

希望這些步驟中的一個或多個步驟可以幫助您識別問題並在您的子主題中修復它。記住:不要直接編輯父主題

使用WordPress子主題時的有用提示

子主題是一個非常重要的話題,也是WordPress一個非常有價值的功能。我在我建立的每個網站上都使用它們。

為了幫助您找到最有效地利用子主題所需的方法,以下是我的提示,可幫助您解決這些問題:

  • 如果您需要編輯第三方主題,請始終使用子主題。這樣,當您更新主題時,您的更改不會丟失。
  • 每個子主題都需要一個樣式表和一個函式檔案。
  • WordPress將使用模板層次結構來確定在輸出內容時使用哪個模板檔案。如果它找到兩個同名的檔案,它將使用子主題中的一個。
  • 您可以通過在子主題中編寫具有相同名稱的函式來覆蓋父主題中的可插入函式。
  • 您可以使用子主題中的函式remove_action()remove_filter()從父主題中解開函式,然後編寫新函式。
  • 您可以通過在子主題中編寫一個函式並將其連線到相同的動作或過濾器鉤子來擴充父主題中的函式。
  • 上傳後不要忘記啟用您的子主題。並確保沒有人從您的WordPress安裝中刪除父主題:沒有它,子主題將無法工作。

小結

建立子主題是在不承擔任何相關風險的情況下修改主題的最佳方式。使用此過程,您幾乎可以更改網站外觀和佈局方面的任何內容。更重要的是,您將能夠立即建立您的子主題。

子主題是 WordPress 的一項有用功能,可讓您自定義主題而無需直接編輯其程式碼。您可以使用一個來向主題新增附加功能、自定義樣式或建立/編輯模板檔案。

如果您遵循上述建議,您將能夠按照最佳實踐在 WordPress 中建立子主題,並利用它們完成各種任務。當您更新父主題時,所有這些都不會丟失您的更改和自定義。

評論留言