主题开发
本章节深入讲解 WordPress 主题开发，从基础结构到高级技巧，帮助你创建专业级 WordPress 主题。
📚 课程大纲
mermaid
graph TD
A[主题开发] --> B[主题结构]
A --> C[模板文件]
A --> D[主题函数]
A --> E[样式脚本]
A --> F[自定义主题]
B --> G[style.css]
B --> H[index.php]
B --> I[functions.php]
C --> J[首页模板]
C --> K[文章模板]
C --> L[页面模板]
D --> M[动作钩子]
D --> N[过滤钩子]1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
🎯 学习路径
🏗️ 主题基本结构
一个标准 WordPress 主题包含以下文件：
themes/
└── my-theme/
├── style.css # 主题样式（必需）
├── index.php # 主模板文件（必需）
├── functions.php # 主题功能
├── screenshot.png # 主题截图
├── header.php # 页头
├── footer.php # 页脚
├── sidebar.php # 侧边栏
├── single.php # 单篇文章
├── page.php # 页面模板
├── archive.php # 归档页
├── search.php # 搜索结果
├── 404.php # 404页面
├── front-page.php # 首页模板
├── home.php # 博客页模板
└── comments.php # 评论模板1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
📦 style.css 元信息
每个主题必须包含的样式文件头部：
css
/*
Theme Name: My Custom 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
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-theme
Tags: blog, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
*/1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
🔧 functions.php 示例
php
<?php
/**
* 主题功能设置
*/
// 主题设置
function my_theme_setup() {
// 支持标题栏图片
add_theme_support('custom-header', array(
'width' => 1200,
'height' => 400,
'flex-height' => true,
));
// 支持页脚小工具
add_theme_support('footer-widgets', 3);
// 支持特色图片
add_theme_support('post-thumbnails');
// 支持自动加载 feed 链接
add_theme_support('automatic-feed-links');
// 支持 HTML5 标签
add_theme_support('html5', array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
));
// 注册菜单位置
register_nav_menus(array(
'primary' => '主导航菜单',
'footer' => '页脚菜单',
));
}
add_action('after_setup_theme', 'my_theme_setup');
// 加载样式和脚本
function my_theme_scripts() {
// 加载主样式表
wp_enqueue_style(
'my-theme-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get('Version')
);
// 加载主脚本
wp_enqueue_script(
'my-theme-scripts',
get_template_directory_uri() . '/js/scripts.js',
array('jquery'),
wp_get_theme()->get('Version'),
true
);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
// 注册侧边栏
function my_theme_widgets() {
register_sidebar(array(
'name' => '主侧边栏',
'id' => 'sidebar-1',
'description' => '主侧边栏小工具区域',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'my_theme_widgets');1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
🎨 主题最佳实践
最佳实践
- 使用子主题 - 避免直接修改主题
- 遵循代码标准 - WordPress 代码标准
- 国际化 - 使用
__()和_e()函数 - 无障碍性 - 支持屏幕阅读器
- SEO 友好 - 语义化 HTML 结构