2716 字
9 分钟
创建和制作WordPress主题的子主题
2025-05-29
无标签

一、了解子主题的作用

  • 什么是子主题?
    子主题是依附于父主题(如默认主题 Twenty Twenty-Three 或第三方主题)的独立主题,可继承父主题的功能和样式,同时允许自定义修改,避免父主题更新后覆盖你的修改

二、准备工作

  1. 确认父主题名称
    登录 WordPress 后台 → 外观 → 主题,记下当前使用的父主题名称(如 “Twenty Twenty-Three”)。
  2. 创建子主题文件夹
    • 通过 FTP 工具(如 FileZilla)或 WordPress 主机的文件管理器,进入网站根目录下的 wp-content/themes/ 文件夹。
    • 新建一个文件夹,命名为自定义名称(如 twentytwentythree-child,建议与父主题名称关联,方便识别)。

三、创建子主题的样式表(style.css)

在子主题文件夹中新建一个 style.css 文件,添加以下代码(需根据实际情况修改注释部分):
/*
 Theme Name:       父主题名称 子主题(如 Twenty Twenty-Three Child)
 Theme URI:        父主题官网链接(如 https://wordpress.org/themes/twentytwentythree/)
 Description:      子主题描述(如 “Child theme for Twenty Twenty-Three”)
 Author:           你的姓名或网站
 Author URI:       你的网站链接
 Template:         父主题文件夹名称(如 twentytwentythree)
 Version:          1.0
 License:          GNU General Public License v2 or later
 License URI:      http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:      子主题文本域(建议与文件夹名称一致,如 twentytwentythree-child)
*/

/* 在这里添加自定义 CSS 样式,会覆盖父主题样式 */
body {
  font-size: 18px;
  color: #333;
}

四、创建子主题的 functions.php(可选)

若需通过代码扩展功能(如添加自定义函数、修改父主题功能),可在子主题文件夹中创建 functions.php 文件。

注意: 子主题的 functions.php 会覆盖父主题的同名文件,但会先加载父主题的 functions.php
示例代码(以添加菜单功能为例):

<?php
// 确保父主题的 functions.php 已加载
add_action( 'after_setup_theme', 'child_theme_setup' );
function child_theme_setup() {
    // 继承父主题的主题设置(可选)
    require_once get_template_directory() . '/functions.php';
    
    // 添加自定义功能(如注册菜单)
    register_nav_menus( array(
        'header-menu' => __( 'Header Menu', 'twentytwentythree-child' ),
    ) );
}

// 添加自定义 CSS 样式表(可选,推荐直接在 style.css 中编写)
function child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parent-style' ),
        wp_get_theme()->get('Version') // 确保子主题样式随版本更新
    );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
?>

五、激活子主题

  1. 登录 WordPress 后台 → 外观 → 主题
  2. 找到你的子主题(如 “Twenty Twenty-Three Child”),点击 激活

六、自定义子主题

  1. 修改样式
    直接在子主题的 style.css 中添加 CSS 代码,覆盖父主题样式(无需修改父主题文件)。
  2. 复制父主题模板文件(可选)
    若需修改父主题的模板(如 header.phpsingle.php),可从父主题中复制对应文件到子主题文件夹,然后进行修改。
    • 例:复制父主题的 single.php 到子主题文件夹,修改后仅影响子主题的文章页面布局。
  3. 使用 WordPress 自定义器
    通过 外观 → 自定义 修改主题设置(如颜色、菜单、小工具等),这些设置会保存在数据库中,不影响代码。

七、常见问题与注意事项

  1. 父主题更新不影响子主题
    父主题升级后,子主题的修改和设置会保留,无需重新配置。
  2. 避免直接修改父主题文件
    直接修改父主题文件会导致更新后修改丢失,子主题是唯一安全的自定义方式。
  3. 功能冲突处理
    若子主题与父主题功能冲突,可通过 functions.php 中的 remove_action 或 remove_filter 移除父主题函数,再重新定义。

示例:基于 Twenty Twenty-Three 创建子主题

  1. 文件夹命名:twentytwentythree-child
  2. style.css 中的 Template 字段:twentytwentythree
  3. 激活后,通过自定义器或代码修改样式和功能。
创建和制作WordPress主题的子主题
https://www.mancs.cn/1011
作者
漫川
发布于
2025-05-29
许可协议
CC BY-NC-SA 4.0

发布评论

评论(1)