WordPress 使用子主题创建与样式定制教程

发表于2026年1月2日2026年1月2日作者 wpzhan

首先说明一下我的网站情况，网站我使用的是Yocto 主题，可能是因为这是一个英文网站的主题，整体模板我是非常满意的，但是个别的样式我需要调整一下。直接修改Yocto主题，不是一个好方放，应为修改后，如果主题更新了，那么修改的内容随着更新也会消失。最好的方面是使用子主题，这里创建一个名为「wpzhan」的子主题来调整样式，这份教程会从子主题创建、样式加载到自定义修改，一步步带你完成，怎么通过子主题满足样式的修改。

先看一下效果，原理就是在增加一行加载子主题的代码，本示例是第80行。

一、核心准备

1. 前提说明

子主题文件夹名：wpzhan（对应你指定的子主题名）
父主题：Yocto（需确认父主题文件夹名为 yocto，可在 wp-content/themes/ 目录下查看）
操作工具：可通过 WordPress 后台「文件管理器」（需安装插件如「WP File Manager」）或 FTP 工具（如 FileZilla）操作服务器文件。最高效使用vim之类的工具，直接编辑修改。

2. 核心原则

子主题仅需存放「修改的内容」，继承 Yocto 主题所有功能，后续 Yocto 主题更新不会覆盖你的自定义样式。

二、步骤 1：创建 wpzhan 子主题文件夹

登录你的服务器，找到 WordPress 安装目录下的 wp-content/themes/ 文件夹；
在该目录下新建文件夹，命名为 wpzhan（小写、无空格、无特殊字符）。

三、步骤 2：创建子主题核心文件

1. 创建 style.css（必填，识别子主题）

在 wpzhan 文件夹中新建 style.css 文件，粘贴以下代码（注释部分是 WordPress 识别子主题的关键，已适配你的需求）：

/*
 Theme Name:   wpzhan（Yocto 子主题）
 Theme URI:    https://www.wpzhan.com/
 Description:  基于 Yocto 主题定制的 wpzhan 专属子主题，用于调整网站样式
 Author:       wpzhan 管理员
 Author URI:   https://www.wpzhan.com/
 Template:     yocto  // 必须与 Yocto 父主题文件夹名一致，核心！
 Version:      1.0.0
 Text Domain:  wpzhan
*/

/* 上面加粗代码 Theme Name 和 Template 是必不可少的 */
/* 以下写入你需要自定义的 CSS 样式 */
/* 示例1：修改网站全局字体大小 */
body {
    font-size: 16px;
    font-family: "Microsoft YaHei", sans-serif;
}

关键注意：Template: yocto 必须准确，若 Yocto 主题文件夹名是 yocto-theme，需同步修改，否则子主题无法识别父主题。

2. 创建 functions.php（核心，加载父 / 子主题样式）

在 wpzhan 文件夹中新建 functions.php 文件，粘贴以下代码（安全且符合 WordPress 规范）：

<?php
// 安全防护：禁止直接访问文件
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * 加载 Yocto 父主题样式 + wpzhan 子主题样式
 * 优先级：子主题样式 > 父主题样式
 */
function wpzhan_enqueue_styles() {
    // 1. 加载父主题 Yocto 的核心样式
    wp_enqueue_style(
        'yocto-parent-style', // 样式标识（自定义）
        get_template_directory_uri() . '/style.css', // 父主题样式路径
        array(), // 依赖项（无）
        wp_get_theme( 'yocto' )->get( 'Version' ) // 父主题版本号（自动获取）
    );

    // 2. 加载 wpzhan 子主题样式（依赖父主题样式，确保加载顺序）
    wp_enqueue_style(
        'wpzhan-child-style', // 样式标识（自定义）
        get_stylesheet_directory_uri() . '/style.css', // 子主题样式路径
        array( 'yocto-parent-style' ), // 依赖父主题样式
        wp_get_theme()->get( 'Version' ) // 子主题版本号
    );
}
// 挂载到前端样式加载钩子
add_action( 'wp_enqueue_scripts', 'wpzhan_enqueue_styles' );

说明：无需添加 ?> 闭合标签，避免空白字符导致网站报错。

四、步骤 3：激活 wpzhan 子主题

登录你的 wpzhan.com 后台；
进入「外观 → 主题」，找到「wpzhan（Yocto 子主题）」；
点击「启用」，此时网站会继承 Yocto 主题所有功能，同时加载子主题的自定义样式。

五、常见问题与避坑

1. 子主题样式不生效？

检查 functions.php 中是否正确加载样式，切勿用 @import 导入父主题样式（效率低）；
清除浏览器缓存（Ctrl+F5 强制刷新）或 WordPress 缓存插件（如 WP Rocket）；
给自定义样式加 !important（仅必要时），比如 .navbar { background-color: #fff !important; }；
确认子主题已激活（后台「外观 → 主题」中显示「当前使用」）。

2. 子主题识别不到 Yocto 父主题？

核对 style.css 中 Template: yocto 与 Yocto 主题文件夹名完全一致（区分大小写）；
确认 Yocto 主题已安装（wp-content/themes/ 中有 yocto 文件夹）。

3. 网站报错白屏？

检查 functions.php 中是否有语法错误（比如少分号、括号不匹配）；
移除自定义的功能代码，逐步排查问题。

总结

核心文件：wpzhan 子主题需包含 style.css（声明父主题）和 functions.php（加载样式），存放于 wp-content/themes/wpzhan/；
样式修改：所有自定义 CSS 写入子主题 style.css，通过开发者工具获取精准选择器；
安全原则：仅修改需要调整的样式 / 模板，保留 Yocto 主题核心文件，便于后续更新。