從零開(kāi)始創(chuàng)建你的第一個(gè)WordPress子主題(附代碼示例)

很多初學(xué)者在使用WordPress建站時(shí),希望在不破壞原主題的基礎(chǔ)上,對(duì)網(wǎng)站進(jìn)行個(gè)性化修改。這時(shí),Child Theme 就是最安全、最靈活的解決方案。下面我們來(lái)一步步講解如何創(chuàng)建你的第一個(gè)子主題。

圖片[1]-從零開(kāi)始創(chuàng)建你的第一個(gè)WordPress子主題教程

一、什么是WordPress子主題

子主題是依附于主主題(Parent Theme)的主題,它繼承主thematic的功能和樣式,但可以自由修改部分文件而不影響主主題。當(dāng)主主題更新時(shí),子主題中的定制內(nèi)容不會(huì)被覆蓋,非常適合長(zhǎng)期維護(hù)的網(wǎng)站。

簡(jiǎn)單理解:
主主題 = 基礎(chǔ)功能
子主題 = 自定義擴(kuò)展

二、創(chuàng)建子主題前的準(zhǔn)備

在開(kāi)始之前,請(qǐng)準(zhǔn)備好以下內(nèi)容:

  1. 具備WordPress后臺(tái)和FTP或主機(jī)文件管理的訪問(wèn)權(quán)限。
  2. 主主題文件夾的名稱(例如 blocksy,astra,twentytwentyfour).
  3. 一個(gè)文本編輯器(如 VS Code、Notepad++)。

三、創(chuàng)建子主題文件夾

進(jìn)入網(wǎng)站目錄 wp-content/themes/,在這里新建一個(gè)文件夾,命名格式通常為:

主題名-child

例如你的主主題是 woodmartThat.subtheme文件夾就命名為:

woodmart-child

這樣可以讓系統(tǒng)自動(dòng)識(shí)別父子關(guān)系,也方便管理。

圖片[2]-從零開(kāi)始創(chuàng)建你的第一個(gè)WordPress子主題教程

四、編寫 style.css 文件

exist woodmart-Child. 文件夾中,新建一個(gè)名為 style.css 的文件,然后寫入以下代碼:

/*
Theme Name: Woodmart Child
Template: woodmart
Author: Your Name
Version: 1.0
Description: 這是Woodmart主題的子主題
*/

Description:

  • Theme Name:子主題顯示名稱。
  • Template:主主題的目錄名稱,一定要正確填寫。
  • 其他信息可自定義。

After saving.WordPress才能識(shí)別出子主題。

五、加載主主題樣式

子主題創(chuàng)建后,還需要讓它繼承主主題的CSS樣式。
在子主題目錄下新建一個(gè) functions.php file and add the following code:

<?php
function astra_child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'astra_child_enqueue_styles');
?>

Role:
這段代碼讓子主題自動(dòng)加載主主題的樣式文件,保證頁(yè)面外觀一致。

六、在后臺(tái)啟用子thematic

回到WordPress后臺(tái) → 外觀 → 主題,可以看到你剛創(chuàng)建的子主題“Woodmart Child".

圖片[3]-從零開(kāi)始創(chuàng)建你的第一個(gè)WordPress子主題教程


點(diǎn)擊“啟用”,此時(shí)子主題正式生效。網(wǎng)站外觀不會(huì)發(fā)生變化,但你可以在子主題中自由修改模板文件或樣式,而不會(huì)影響主主題。

七、自定義子主題內(nèi)容

啟用后,你可以開(kāi)始定制化操作:

1. 修改CSStype

directly in the style.css 中編寫新樣式,優(yōu)先級(jí)高于主主題。例如:

h1 {
    font-size: 28px;
    color: #0073aa;
}

2. 修改模板文件

想修改頁(yè)面結(jié)構(gòu),可復(fù)制主主題中的文件到子主題文件夾中。例如:
make a copy of header.php 到子主題目錄,再修改其中的代碼即可。

3. 添加功能函數(shù)

In the subtopic's functions.php 中添加自定義功能,比如新增導(dǎo)航菜單或修改登錄頁(yè)Logo。

八、測(cè)試與維護(hù)

fulfillmentsubtheme后,務(wù)必進(jìn)行測(cè)試:

  • 打開(kāi)網(wǎng)站頁(yè)面,確認(rèn)樣式與功能是否正常;
  • 檢查控制臺(tái)是否有報(bào)錯(cuò);
  • 定期更新主主題,確保兼容性。

Recommendation:
每次修改子主題文件前備份一下,避免誤操作。

九、進(jìn)階技巧:添加自定義模板

如果想為某個(gè)頁(yè)面使用特殊布局,可以在子主題中新建一個(gè)自定義模板文件。
例如創(chuàng)建 page-custom.php,寫入:

<?php
/*
Template Name: Custom Page Layout
*/
get_header(); ?>

<h2>這是自定義模板頁(yè)面</h2>

<?php get_footer(); ?>

然后在后臺(tái)新建頁(yè)面時(shí),就能選擇這個(gè)模板,快速實(shí)現(xiàn)不同的頁(yè)面布局。

十、子主題的優(yōu)勢(shì)總結(jié)

  1. High security:主主題更新不會(huì)影響自定義內(nèi)容。
  2. 維護(hù)方便:代碼清晰、分層管理。
  3. Flexible Expansion:可添加或修改功能函數(shù)。
  4. 結(jié)構(gòu)獨(dú)立:更容易排查問(wèn)題。

子主題不僅是初學(xué)者入門的第一步,也是專業(yè)開(kāi)發(fā)者打造個(gè)性化網(wǎng)站的核心工具。只需要簡(jiǎn)單幾步,就能讓你的WordPress更具可控性和可維護(hù)性。


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
Customer Service
Customer Service
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
? Reprint statement
Author: linxiulian
THE END
If you like it, support it.
kudos109 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments