如何創建WordPress兒童主題(視頻)


您是否要在WordPress中創建子主題? 學習完WordPress基礎知識之後,您可能想學習如何自定義WordPress網站。 我們認為,對於希望自定義WordPress主題的任何人來說,兒童主題都是一個很好的起點。 在本文中,我們將向您展示如何在WordPress中創建子主題。

一個基於二十三個十三的簡單WordPress子主題

視頻教程:

訂閱WPBeginner

對於那些不想觀看視頻的人,您可以繼續閱讀下面的文章。

為什麼需要創建兒童主題?

子主題被認為是自定義WordPress主題的最佳方法。 子主題繼承了其父主題的所有功能和外觀。 您可以自定義它而不影響父主題。 這使您可以輕鬆更新父主題,而不必擔心丟失更改。

您可以在我們的文章“什麼是WordPress兒童主題”中了解有關兒童主題的更多信息。 優點,缺點等。

要求

需要對CSS / HTML有基本的了解,以便您可以進行自己的更改。 PHP的一些知識肯定會有所幫助。 如果您擅長從其他來源複製和粘貼代碼段,那麼也可以使用。

我們建議您在本地開發環境上進行練習。 您可以將實時WordPress網站移至本地服務器以進行測試,也可以將虛擬內容用於主題開發。

入門

任何好的WordPress主題都可以用作父主題。 但是,有許多不同種類的主題,有些可能不是最容易使用的主題。 為了本教程的緣故,我們將使用 20 13,這是默認的WordPress主題之一。

創建您的第一個孩子主題

首先你需要打開 /wp-content/themes/ 在您的WordPress安裝文件夾中,並為您的孩子thme創建一個新文件夾。 您可以根據需要為該文件夾命名。 在本教程中,我們將其命名 wpbdemo

創建一個新的WordPress兒童主題

打開一個文本編輯器(如記事本)並粘貼以下代碼:

/*
 Theme Name:   WPB Child Theme
 Theme URI:    https://www.wpbeginner.com/
 Description:  A Twenty Thirteen child theme 
 Author:       WPBeginner
 Author URI:   https://www.wpbeginner.com
 Template:     twentythirteen
 Version:      1.0.0
*/

@import url("../twentythirteen/style.css");

現在將此文件另存為 style.css 在剛剛創建的子主題文件夾中。

該文件中的大多數內容都是不言自明的。 您真正要注意的是 模板:二十十三

這告訴WordPress我們的主題是一個子主題,而我們的父主題目錄名稱是二十三個。 父文件夾名稱區分大小寫。 如果我們為WordPress提供模板:TwentyThirteen,則它將無法正常工作。

此代碼的最後一行將我們父主題的樣式表導入子主題。

這是創建子主題的最低要求。 你現在可以去 外觀»主題 您將在其中看到WPB兒童主題。 您需要單擊激活按鈕才能開始在您的網站上使用子主題。

激活您的WordPress子主題

由於您尚未更改子主題的任何內容,因此您的網站將使用其父主題的所有功能和外觀。

自定義您的孩子主題

每個WordPress主題在其主目錄中都有一個style.css文件。 通常,這是您的主題的主要樣式表,所有CSS都在其中。 但是,某些主題可能只包含主題的標題信息。 此類主題通常具有位於單獨目錄中的CSS文件。

在本節中,您將需要一些CSS專門知識。

Google Chrome和Firefox帶有內置的檢查器工具。 這些工具使您可以查看網頁任何元素後面的HTML和CSS。

如果要查看用於導航菜單的CSS,則只需將鼠標移到導航菜單上,然後右鍵單擊以選擇“檢查元素”。

在Google Chrome中使用Inspect Element工具

這會將瀏覽器屏幕分為兩個部分。 在屏幕的底部,您將看到該頁面的HTML和CSS。

Chrome檢查器顯示呈現的HTML和CSS樣式規則

在不同的HTML行上移動鼠標時,Chrome瀏覽器檢查器會在上方窗口中突出顯示它們。 如您所見,我們在上面的屏幕快照中選擇了導航菜單。

它還將在右側窗口中向您顯示與突出顯示的元素相關的CSS規則。

您可以嘗試在此處編輯CSS,以查看外觀。 讓我們嘗試更改 .navbar#e8e5ce

在Chrome Inspector中玩CSS

您會看到導航欄的背景顏色將改變。 如果您喜歡這樣,則可以復制此CSS規則並將其粘貼到您的子主題的style.css文件中。

.navbar {
background-color: #e8e5ce;
}

保存對style.css文件所做的更改,然後預覽您的站點。

對您要在主題樣式表中更改的所有內容重複該過程。 這是我們為子主題創建的完整樣式表。 隨時嘗試和修改它。

/*
 Theme Name:   WPB Child Theme
 Theme URI:    https://www.wpbeginner.com
 Description:  A Twenty Thirteen child theme 
 Author:       WPBeginner
 Author URI:   https://www.wpbeginner.com
 Template:     twentythirteen
 Version:      1.0.0
*/

@import url("../twentythirteen/style.css");

.site-title {
padding: 30px 0 30px;
}

.site-header .home-link {
min-height: 0px;
}

.navbar {
background-color: #e8e5ce;
}

.widget { 
background-color: #e8e5ce;
}
.site-footer {
background-color: #d8cdc1;
} 
.site-footer .sidebar-container { 
background-color:#533F2A
}

編輯模板文件

二十十三佈局

每個WordPress主題都有不同的佈局。 讓我們看一下“二十三個十三”主題的佈局。 您具有頁眉,導航菜單,內容循環,頁腳小部件區域,輔助小部件區域和頁腳。

這些部分中的每一個都由第二十三個文件夾中的不同文件處理。 這些文件稱為模板。

大多數情況下,這些模板是根據其使用區域命名的。 例如,頁腳部分通常由footer.php文件處理,頁眉和導航區域由header.php文件處理。 某些區域(如內容區域)由稱為內容模板的多個文件處理。

首先,您需要選擇要修改的主題文件,然後將其複製到子主題中。

例如,您要從頁腳區域中刪除“由WordPress提供支持”鏈接,並在此處添加版權聲明。 只需複制子主題中的footer.php文件,然後在純文本編輯器(如記事本)中將其打開。 找出要刪除的行,然後用自己的行替換。 像這樣:


		

© Copyright All rights reserved.

在此代碼中,我們已用版權聲明替換了二十三學分。

創建子主題時,故障排除要容易得多。 例如,如果您不小心刪除了父主題所需的內容,則可以簡單地從子主題中刪除文件並重新開始。

為兒童主題添加新功能

您會發現許多WordPress教程,要求您將代碼段複製並粘貼到主題的functions.php文件中。

在父主題的functions.php文件中添加代碼段意味著,只要父主題有新更新,您的更改就會被覆蓋。 這就是為什麼始終建議使用子主題並將所有自定義代碼段添加到子主題的functions.php文件中的原因。

讓我們在子主題文件夾中創建一個新文件,並將其命名為functions.php。 在這個例子中,我們將添加一些代碼片段,它將默認的標題圖像更改為我們自己定制的圖像。

我們已經通過編輯二十三十三的默認標題圖像創建了標題圖像和縮略圖。 接下來,我們將其上傳到/ images / headers /文件夾中的子主題。

之後,我們需要告訴WordPress使用此圖像作為主題的默認標題圖像。 我們可以通過將以下代碼片段添加到子主題的functions.php文件中來做到這一點:

 '%s/images/headers/circle-wpb.png' ) );

	register_default_headers( array(
	    'caramel' => array(
	        'url'           => '%2$s/images/headers/circle-wpb.png',
	        'thumbnail_url' => '%2$s/images/headers/circle-wpb-thumbnail.png',
	        'description'   => __( 'Caramel', 'Caramel header', 'twentythirteen' )
	    ),
	) );

} 
add_action( 'after_setup_theme', 'wpbdemo_custom_header_setup' );
?>

現在,如果您訪問 外觀»頁眉,您將可以看到我們添加為默認圖像的圖像。

更改WordPress子主題中的主題標題

您可以在子主題的functions.php文件中添加所需的任何自定義代碼段。 查看WordPress函數文件的這25個極其有用的技巧。

故障排除

作為初學者,在處理第一個孩子主題時,您會犯錯。 只是不要太快放棄。 查看我們最常見的WordPress錯誤列表,以找到修復程序。

您將看到的最常見的錯誤可能是語法錯誤,通常會在您錯過代碼中的某些內容時發生。 這是一個快速指南,解釋瞭如何在WordPress中查找和修復語法錯誤。

最後結果

一個基於二十三個十三的簡單WordPress子主題

下載演示主題

您可以通過單擊此處下載我們的WordPress子主題教程的最終結果。 請記住,這是一個非常基本的基於二十三歲的兒童主題。

其他基於二十三歲的兒童主題

這是基於二十三個十三的其他一些WordPress子主題。 看看它們,看看這些主題開發人員如何定制“二十三個十三”。

灑紅節

Holi-基於二十十三歲的WordPress子主題

櫻花盛開

櫻花-二十十三兒童主題

2013藍色

2013藍色

固定投資組合

固定投資組合

我們希望本文能幫助您學習如何創建WordPress子主題。 請記住,有很多支持可以提供給需要的人。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Google+。