编程马·菜鸟教程

Appearance

15.3 子主题实战：修改父主题样式与功能，不影响父主题 ​

在了解了子主题的基本概念和创建步骤后，我们可以通过实战来学习如何使用子主题修改父主题的样式与功能，同时不影响父主题。本章节将通过具体的示例，详细介绍如何使用子主题修改父主题的样式和功能，帮助你掌握子主题的实际应用。

实战准备 ​

1. 选择父主题 ​

我们将使用WordPress默认的Twenty Twenty-One主题作为父主题，创建一个子主题来修改它的样式和功能。

2. 创建子主题目录 ​

在WordPress的wp-content/themes/目录中创建一个新的子主题目录，命名为twentytwentyone-child。

3. 创建核心文件 ​

在子主题目录中创建以下核心文件：

  • style.css：子主题的样式文件
  • functions.php：子主题的功能文件

实战一：修改父主题的样式 ​

1. 创建style.css文件 ​

在子主题目录中创建style.css文件，添加以下内容：

css
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://example.com/twentytwentyone-child/
Description: Child theme for Twenty Twenty-One
Author: Your Name
Author URI: https://example.com/
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone-child
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/

/* 自定义样式 */
body {
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: #111;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* 修改标题样式 */
.entry-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #0073aa;
}

/* 修改链接样式 */
a {
    color: #0073aa;
    text-decoration: none;
}

a:hover {
    color: #005177;
    text-decoration: underline;
}

/* 修改头部样式 */
.site-header {
    background-color: #f8f8f8;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

/* 修改导航菜单样式 */
.main-navigation {
    margin-top: 10px;
}

.main-navigation a {
    color: #333;
    font-weight: 500;
    padding: 10px 15px;
}

.main-navigation a:hover {
    color: #0073aa;
    background-color: #f0f0f0;
}

/* 修改内容区域样式 */
.entry-content {
    padding: 20px 0;
}

/* 修改侧边栏样式 */
.widget-area {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 5px;
}

.widget-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #333;
}

/* 修改页脚样式 */
.site-footer {
    background-color: #333;
    color: #fff;
    padding: 30px 0;
    margin-top: 40px;
}

.site-footer a {
    color: #fff;
}

.site-footer a:hover {
    color: #0073aa;
}

2. 创建functions.php文件 ​

在子主题目录中创建functions.php文件，添加以下内容：

php
<?php
// 加载父主题的样式
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/style.css', array('parent-style') );
}
?>

3. 激活子主题 ​

登录WordPress后台，进入"外观" > "主题"，激活子主题。

4. 查看效果 ​

访问网站前台，查看子主题的样式效果，确认样式修改是否生效。

实战二：修改父主题的功能 ​

1. 添加自定义菜单 ​

在functions.php文件中添加以下代码，用于注册自定义菜单：

php
// 添加自定义菜单
function register_custom_menus() {
    register_nav_menus(
        array(
            'footer-menu' => __( 'Footer Menu', 'twentytwentyone-child' )
        )
    );
}
add_action( 'init', 'register_custom_menus' );

2. 添加自定义小工具区域 ​

在functions.php文件中添加以下代码，用于注册自定义小工具区域：

php
// 添加自定义小工具区域
function register_custom_widget_areas() {
    register_sidebar(
        array(
            'name' => __( 'Footer Widget Area', 'twentytwentyone-child' ),
            'id' => 'footer-widget-area',
            'before_widget' => '<div class="widget">',
            'after_widget' => '</div>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>'
        )
    );
}
add_action( 'widgets_init', 'register_custom_widget_areas' );

3. 添加自定义函数 ​

在functions.php文件中添加以下代码，用于添加自定义函数：

php
// 添加自定义函数
function custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

// 修改 excerpt 末尾的省略号
function custom_excerpt_more( $more ) {
    return '... <a href="' . get_permalink() . '">' . __( 'Read More', 'twentytwentyone-child' ) . '</a>';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );

// 添加自定义头部信息
function add_custom_header_info() {
    echo '<meta name="description" content="This is a custom description">';
}
add_action( 'wp_head', 'add_custom_header_info' );

4. 覆盖父主题的模板文件 ​

步骤1：复制父主题的header.php文件 ​

从父主题目录中复制header.php文件到子主题目录。

步骤2：修改header.php文件 ​

修改子主题中的header.php文件，添加自定义内容：

php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <?php wp_body_open(); ?>
    <header id="masthead" class="site-header">
        <div class="site-branding">
            <?php the_custom_logo(); ?>
            <?php if ( is_front_page() && is_home() ) : ?>
                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            <?php else : ?>
                <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
            <?php endif; ?>
            <p class="site-description"><?php bloginfo( 'description' ); ?></p>
            <!-- 自定义内容 -->
            <div class="custom-header-content">
                <p>Welcome to our website!</p>
            </div>
        </div><!-- .site-branding -->
        <nav id="site-navigation" class="main-navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
                <?php esc_html_e( 'Primary Menu', 'twentytwentyone' ); ?>
            </button>
            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'primary',
                    'menu_id'        => 'primary-menu',
                )
            );
            ?>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->

步骤3：复制父主题的footer.php文件 ​

从父主题目录中复制footer.php文件到子主题目录。

步骤4：修改footer.php文件 ​

修改子主题中的footer.php文件，添加自定义内容：

php
<footer id="colophon" class="site-footer">
    <div class="site-info">
        <!-- 自定义菜单 -->
        <?php
        wp_nav_menu(
            array(
                'theme_location' => 'footer-menu',
                'menu_id'        => 'footer-menu',
            )
        );
        ?>
        <!-- 自定义小工具区域 -->
        <?php if ( is_active_sidebar( 'footer-widget-area' ) ) : ?>
            <div class="footer-widget-area">
                <?php dynamic_sidebar( 'footer-widget-area' ); ?>
            </div>
        <?php endif; ?>
        <p class="copyright">
            &copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?>. All rights reserved.
        </p>
    </div><!-- .site-info -->
</footer><!-- #colophon -->
<?php wp_footer(); ?>
</body>
</html>

5. 测试功能 ​

  • 登录WordPress后台，进入"外观" > "菜单"，创建并分配footer菜单
  • 进入"外观" > "小工具"，向footer-widget-area添加小工具
  • 访问网站前台，查看自定义功能是否生效

实战三：添加自定义CSS和JavaScript ​

1. 创建CSS文件 ​

在子主题目录中创建一个css目录，然后在其中创建custom.css文件，添加以下内容：

css
/* 自定义CSS */

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .entry-title {
        font-size: 2rem;
    }
    
    .site-header {
        padding: 15px 0;
    }
    
    .main-navigation a {
        padding: 8px 12px;
    }
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 自定义按钮样式 */
.custom-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.custom-button:hover {
    background-color: #005177;
    color: #fff;
    text-decoration: none;
}

2. 创建JavaScript文件 ​

在子主题目录中创建一个js目录，然后在其中创建custom.js文件，添加以下内容：

javascript
// 自定义JavaScript

// 页面加载完成后执行
jQuery(document).ready(function($) {
    // 添加淡入效果
    $('.entry-content').addClass('fade-in');
    
    // 平滑滚动
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $(this.hash).offset().top
        }, 800);
    });
    
    // 导航菜单高亮
    $(window).scroll(function() {
        var scrollPosition = $(window).scrollTop();
        
        $('nav a').each(function() {
            var target = $(this.getAttribute('href'));
            if (target.length) {
                if (target.offset().top <= scrollPosition && target.offset().top + target.height() > scrollPosition) {
                    $('nav a').removeClass('active');
                    $(this).addClass('active');
                }
            }
        });
    });
});

3. 在functions.php中加载CSS和JavaScript文件 ​

在functions.php文件中添加以下代码，用于加载自定义CSS和JavaScript文件：

php
// 加载自定义CSS和JavaScript文件
function enqueue_custom_scripts() {
    // 加载自定义CSS
    wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri().'/css/custom.css', array('child-style') );
    
    // 加载自定义JavaScript
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri().'/js/custom.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );

4. 测试效果 ​

访问网站前台，查看自定义CSS和JavaScript的效果，确认它们是否生效。

子主题实战的最佳实践 ​

1. 只修改必要的文件 ​

  • 模板文件：只覆盖需要修改的模板文件，避免复制所有模板文件
  • 样式文件：只添加需要修改的样式，避免复制所有样式
  • 功能文件：只添加需要修改的功能，避免复制所有功能

2. 保持代码的简洁性 ​

  • 代码组织：将代码组织清晰，按功能和模块分类
  • 注释：添加详细的注释，解释代码的功能和逻辑
  • 命名规范：使用清晰的命名规范，提高代码的可读性

3. 测试兼容性 ​

  • 父主题更新：测试子主题在父主题更新后的兼容性
  • WordPress更新：测试子主题在WordPress更新后的兼容性
  • 浏览器兼容性：测试子主题在不同浏览器中的兼容性

4. 版本控制 ​

  • 使用版本控制：使用Git等版本控制工具管理子主题的代码
  • 提交消息：使用清晰的提交消息，说明代码的变更内容
  • 分支管理：使用分支管理不同的功能和修复

小结 ​

通过本章节的实战学习，你应该掌握了如何使用子主题修改父主题的样式和功能，同时不影响父主题。具体来说，你应该：

  1. 了解如何创建子主题，包括核心文件的创建和配置
  2. 掌握如何修改父主题的样式，包括添加自定义样式和覆盖父主题样式
  3. 掌握如何修改父主题的功能，包括添加自定义菜单、小工具区域和函数
  4. 了解如何覆盖父主题的模板文件，添加自定义内容
  5. 掌握如何添加自定义CSS和JavaScript文件，增强主题的功能
  6. 了解子主题实战的最佳实践，包括只修改必要的文件、保持代码的简洁性、测试兼容性和版本控制

通过使用子主题，你可以更有效地定制和扩展WordPress主题，确保主题的定制内容能够在父主题更新时保留，提高主题的可维护性和稳定性。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建