WordPress主题开发入门：创建你自己的主题

前言

用了那么多别人做的主题，有没有想过自己做一个？WordPress主题开发没有你想象的那么难。掌握基本的HTML、CSS和一点PHP知识，你就能创建一个属于自己的主题。今天从最基础的开始，带你走进WordPress主题开发的世界。

开发环境准备

本地开发环境

不建议直接在线上服务器开发，先搭建本地环境：

工具	平台	特点
LocalWP	Windows/Mac	最简单，一键创建WordPress
XAMPP	全平台	经典，功能全面
Docker	全平台	最灵活，适合有经验的开发者
MAMP	Mac	Mac用户首选

推荐新手使用LocalWP，下载安装后点几下就能创建一个本地WordPress站点。

代码编辑器

推荐VS Code，免费且功能强大。安装以下扩展提升开发效率：

PHP Intelephense - PHP代码智能提示
WordPress Snippets - WordPress代码片段
Prettier - 代码格式化
Emmet - HTML/CSS快捷输入

最简主题结构

一个WordPress主题最少只需要两个文件：

mytheme/
├── style.css       # 主题样式表（必须）
└── index.php       # 主模板文件（必须）

style.css

主题的头部信息声明在style.css的注释中：

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 我的第一个WordPress主题
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: mytheme
*/

/* 主题样式从这里开始 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

index.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(); ?>>
    <header>
        <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
    </header>

    <main>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <article>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <time><?php the_date(); ?></time>
                <?php the_content(); ?>
            </article>
        <?php endwhile; endif; ?>
    </main>

    <footer>
        <p>Copyright <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
    </footer>

    <?php wp_footer(); ?>
</body>
</html>

把 mytheme 文件夹放到 wp-content/themes/ 目录下，在后台 → 外观 → 主题中就能看到并激活了。

模板层次结构

WordPress有一套严格的模板层次，决定了哪个页面用哪个模板文件：

页面类型	模板文件	备用模板
首页	front-page.php	home.php → index.php
文章页	single.php	singular.php → index.php
页面	page.php	singular.php → index.php
分类存档	category.php	archive.php → index.php
标签存档	tag.php	archive.php → index.php
搜索结果	search.php	index.php
404页面	404.php	index.php

functions.php

functions.php是主题的功能文件，相当于主题的”大脑”：

<?php
// 主题支持设置
function mytheme_setup() {
    // 支持文章缩略图
    add_theme_support('post-thumbnails');

    // 支持标题标签
    add_theme_support('title-tag');

    // 支持HTML5
    add_theme_support('html5', array(
        'search-form',
        'comment-form',
        'gallery',
        'caption',
    ));

    // 注册导航菜单
    register_nav_menus(array(
        'primary' => '主导航菜单',
        'footer'  => '底部菜单',
    ));
}
add_action('after_setup_theme', 'mytheme_setup');

// 加载样式和脚本
function mytheme_scripts() {
    wp_enqueue_style('mytheme-style', get_stylesheet_uri(), array(), '1.0.0');
    wp_enqueue_script('mytheme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'mytheme_scripts');

// 注册侧边栏
function mytheme_widgets_init() {
    register_sidebar(array(
        'name'          => '侧边栏',
        'id'            => 'sidebar-1',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ));
}
add_action('widgets_init', 'mytheme_widgets_init');

模板标签和循环

WordPress提供了丰富的模板标签，用于在模板中输出内容：

// 常用的模板标签
the_title();           // 文章标题
the_content();         // 文章内容
the_excerpt();         // 文章摘要
the_permalink();       // 文章链接
the_post_thumbnail();  // 文章缩略图
the_date();           // 发布日期
the_category();       // 所属分类
the_tags();           // 文章标签
the_author();         // 作者名
comments_number();     // 评论数

完整的主题结构

一个功能完善的主题通常包含这些文件：

mytheme/
├── style.css
├── functions.php
├── index.php
├── header.php          # 公共头部
├── footer.php          # 公共底部
├── sidebar.php         # 侧边栏
├── single.php          # 文章详情页
├── page.php            # 静态页面
├── archive.php         # 归档页
├── search.php          # 搜索结果页
├── 404.php             # 404页面
├── comments.php        # 评论模板
├── screenshot.png      # 主题截图（1200x900）
├── js/
│   └── main.js
├── images/
└── template-parts/     # 模板片段
    ├── content.php
    └── content-none.php

调试和测试

开发过程中开启WordPress调试模式，在wp-config.php中：

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

使用Theme Check插件检测你的主题是否符合WordPress标准。如果想提交到官方主题库，还需要通过更严格的审核。

下一步

主题开发入门之后，可以继续学习：

全站编辑（FSE）和block.json
自定义定制器（Customizer）
REST API集成
插件开发

也可以参考现有优秀主题的源码来学习，比如WordPress官方推荐的主题。

总结

WordPress主题开发的门槛并不高，从两个文件开始就能跑起来。关键是理解模板层次结构和WordPress的循环机制。边做边学，从简单到复杂，逐步完善你的主题功能。