1. 首页
  2. 新手教程
  3. WordPress 主题开发

WordPress 主题开发与定制教程

WordPress 主题决定了网站的外观和用户体验。虽然市面上有大量免费和付费主题可供选择，但学会自己开发和定制主题，才能让网站真正满足个性化需求。本文将在搬瓦工 VPS 上，从零开始讲解 WordPress 主题开发的完整流程，包括子主题创建、模板层级体系、自定义函数开发，以及新一代区块主题（Block Theme）的制作方法。如果你还没有安装 WordPress，请先参考 WordPress 安装教程。

一、开发环境准备

在搬瓦工 VPS 上进行主题开发前，建议先配置好开发辅助工具。确保服务器已安装 Docker 或 LNMP/LAMP 环境。

1.1 启用 WordPress 调试模式

编辑 WordPress 根目录下的 wp-config.php，开启调试功能：

// 开启调试模式
define('WP_DEBUG', true);
// 将错误日志写入文件而非页面显示
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
// 开启脚本调试（加载未压缩的 JS/CSS）
define('SCRIPT_DEBUG', true);

调试日志会写入 wp-content/debug.log，可以通过 SSH 实时查看：

tail -f /var/www/html/wp-content/debug.log

1.2 安装开发辅助插件

推荐安装以下插件辅助开发：

  • Query Monitor：查看数据库查询、钩子执行、模板加载等调试信息。
  • Theme Check：检测主题是否符合 WordPress 官方标准。
  • WP-CLI：命令行管理工具，快速执行各种操作。

通过 WP-CLI 安装插件：

cd /var/www/html
wp plugin install query-monitor --activate --allow-root
wp plugin install theme-check --activate --allow-root

二、子主题开发基础

子主题（Child Theme）是最安全的主题定制方式。它继承父主题的功能和样式，同时允许你添加自定义代码，并且不会因为父主题更新而丢失修改。

2.1 创建子主题目录结构

mkdir -p /var/www/html/wp-content/themes/mytheme-child
cd /var/www/html/wp-content/themes/mytheme-child

2.2 创建 style.css 声明文件

子主题的 style.css 必须包含特定的头部注释：

/*
Theme Name:   MyTheme Child
Theme URI:    https://example.com/mytheme-child
Description:  MyTheme 的子主题
Author:       Your Name
Author URI:   https://example.com
Template:     twentytwentyfour
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  mytheme-child
*/

/* 在此添加自定义样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.site-header {
    background-color: #1a1a2e;
}

其中 Template 字段必须与父主题的目录名完全一致。

2.3 创建 functions.php

子主题的 functions.php 用于正确加载父主题和子主题的样式表：

<?php
// 加载父主题和子主题样式
function mytheme_child_enqueue_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'), wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'mytheme_child_enqueue_styles');
?>

2.4 激活子主题

wp theme activate mytheme-child --allow-root

三、WordPress 模板层级

WordPress 使用模板层级（Template Hierarchy）来决定加载哪个模板文件渲染页面。理解模板层级是主题开发的核心。

3.1 核心模板文件

  • index.php：终极后备模板，当没有其他模板匹配时使用。
  • single.php：单篇文章页面。
  • page.php：独立页面。
  • archive.php：归档页面（分类、标签、日期归档）。
  • category.php：分类归档页（优先级高于 archive.php）。
  • search.php：搜索结果页面。
  • 404.php：404 错误页面。
  • header.php：页头模板（通过 get_header() 调用）。
  • footer.php：页脚模板（通过 get_footer() 调用）。
  • sidebar.php：侧栏模板（通过 get_sidebar() 调用）。

3.2 创建自定义页面模板

在子主题中创建一个全宽页面模板 template-fullwidth.php：

<?php
/*
Template Name: 全宽页面
Template Post Type: page
*/

get_header();
?>

<main class="site-main fullwidth-template">
    <?php
    while (have_posts()) :
        the_post();
    ?>
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="entry-header">
            <?php the_title('<h1 class="entry-title">', '</h1>'); ?>
        </header>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </article>
    <?php endwhile; ?>
</main>

<?php get_footer(); ?>

四、自定义功能开发

4.1 注册自定义菜单

function mytheme_register_menus() {
    register_nav_menus(array(
        'primary'   => '主导航菜单',
        'footer'    => '页脚菜单',
        'mobile'    => '移动端菜单',
    ));
}
add_action('after_setup_theme', 'mytheme_register_menus');

4.2 注册自定义侧栏和小工具区域

function mytheme_widgets_init() {
    register_sidebar(array(
        'name'          => '主侧栏',
        'id'            => 'sidebar-main',
        'description'   => '显示在文章和页面旁边',
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ));
}
add_action('widgets_init', 'mytheme_widgets_init');

4.3 添加主题自定义选项（Customizer API）

function mytheme_customize_register($wp_customize) {
    // 添加自定义区域
    $wp_customize->add_section('mytheme_colors', array(
        'title'    => '主题颜色设置',
        'priority' => 30,
    ));

    // 添加主色调设置
    $wp_customize->add_setting('primary_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage',
    ));

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'primary_color', array(
        'label'   => '主色调',
        'section' => 'mytheme_colors',
    )));
}
add_action('customize_register', 'mytheme_customize_register');

五、区块主题开发（Block Theme）

WordPress 5.9 以后全面支持区块主题（Full Site Editing），这是主题开发的新方向。区块主题使用 HTML 模板和 theme.json 配置文件，取代传统的 PHP 模板。

5.1 区块主题目录结构

mytheme-block/
├── style.css              # 主题声明
├── theme.json             # 全局设置和样式
├── templates/             # 页面模板
│   ├── index.html
│   ├── single.html
│   ├── page.html
│   ├── archive.html
│   └── 404.html
├── parts/                 # 模板部件
│   ├── header.html
│   ├── footer.html
│   └── sidebar.html
├── patterns/              # 区块模式
│   └── hero-section.php
└── assets/
    ├── css/
    └── js/

5.2 配置 theme.json

theme.json 是区块主题的核心配置文件，定义颜色、排版、间距等全局样式：

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "color": {
            "palette": [
                { "slug": "primary", "color": "#1a1a2e", "name": "Primary" },
                { "slug": "secondary", "color": "#16213e", "name": "Secondary" },
                { "slug": "accent", "color": "#0f3460", "name": "Accent" }
            ]
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
                    "slug": "system",
                    "name": "System Font"
                }
            ],
            "fontSizes": [
                { "slug": "small", "size": "0.875rem", "name": "Small" },
                { "slug": "medium", "size": "1rem", "name": "Medium" },
                { "slug": "large", "size": "1.5rem", "name": "Large" }
            ]
        },
        "layout": {
            "contentSize": "800px",
            "wideSize": "1200px"
        }
    }
}

5.3 创建区块模板

区块主题的模板使用 HTML 格式，内嵌 WordPress 区块标记。例如 templates/single.html：

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-date /-->
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
    <!-- wp:post-terms {"term":"category"} /-->
    <!-- wp:comments /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

六、性能优化与发布

6.1 资源加载优化

在 functions.php 中合理加载和管理前端资源：

function mytheme_optimize_scripts() {
    // 移除不需要的默认脚本
    wp_deregister_script('wp-embed');

    // 条件加载脚本（仅在需要的页面加载）
    if (is_singular() && comments_open()) {
        wp_enqueue_script('comment-reply');
    }

    // 加载主题脚本（延迟加载）
    wp_enqueue_script('mytheme-main', get_stylesheet_directory_uri() . '/assets/js/main.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'mytheme_optimize_scripts');

6.2 使用 Theme Check 验证

wp theme-check mytheme-child --allow-root

6.3 打包主题

cd /var/www/html/wp-content/themes/
zip -r mytheme-child.zip mytheme-child/ -x "*.git*" "node_modules/*"

总结

WordPress 主题开发从子主题定制到独立主题制作，再到新一代区块主题，提供了丰富的定制可能。在搬瓦工 VPS 上开发主题，拥有完整的服务器控制权，可以自由配置调试环境。掌握模板层级、钩子机制和 theme.json 配置，你就能打造出专业级的 WordPress 主题。建议同时学习 速度优化 和 安全加固，让主题在性能和安全方面都达到最佳状态。选购搬瓦工 VPS 请查看 全部方案，购买时使用优惠码 NODESEEK2026 可享受 6.77% 的折扣，通过 bwh81.net 进入官网购买。

关于本站

搬瓦工VPS中文网（bwgvps.com）是非官方中文信息站，整理搬瓦工的方案、优惠和教程。我们不销售主机，不提供技术服务。

新手必读
搬瓦工优惠码

NODESEEK2026（优惠 6.77%）

购买时填入即可抵扣。