主题结构详解
深入了解 WordPress 主题的每个组成部分，包括必需的系统和可选的功能文件。
📁 必需文件
style.css
主题样式表，必须包含主题头部注释：
css
/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any niche.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: block-styles, block-patterns, wide-blocks, alignment-advanced, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, rtl-language-support, theme-options, threaded-comments
*/1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
index.php
主模板文件，当没有特定模板时会调用：
php
<?php get_header(); ?>
<main id="main" class="site-main">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php the_posts_pagination(); ?>
<?php else : ?>
<p><?php esc_html_e('没有找到文章', 'my-theme'); ?></p>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
📂 模板文件
头部模板 (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">
<?php if (has_custom_logo()) : ?>
<?php the_custom_logo(); ?>
<?php else : ?>
<h1><a href="<?php echo esc_url(home_url('/')); ?>">
<?php bloginfo('name'); ?>
</a></h1>
<?php endif; ?>
<?php if (has_nav_menu('primary')) : ?>
<nav id="site-navigation" class="main-navigation">
<?php wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'nav-menu',
)); ?>
</nav>
<?php endif; ?>
</header>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
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
页脚模板 (footer.php)
php
<footer id="colophon" class="site-footer">
<div class="site-info">
<a href="<?php echo esc_url(__('https://wordpress.org/', 'my-theme')); ?>">
<?php printf(esc_html__('Proudly powered by %s', 'my-theme'), 'WordPress'); ?>
</a>
<span class="sep"> | </span>
<?php printf(esc_html__('Theme: %1$s by %2$s.', 'my-theme'),
'<a href="https://example.com">My Theme</a>',
'<a href="https://example.com">Developer</a>'
); ?>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
文章模板 (single.php)
php
<?php get_header(); ?>
<main id="primary" class="content-area">
<?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>'); ?>
<div class="entry-meta">
<span class="posted-on">
<time datetime="<?php the_time('c'); ?>">
<?php echo get_the_date(); ?>
</time>
</span>
<span class="byline">
<?php the_author(); ?>
</span>
</div>
</header>
<?php if (has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail('large'); ?>
</div>
<?php endif; ?>
<div class="entry-content">
<?php
the_content();
wp_link_pages(array(
'before' => '<div class="page-links">' . esc_html__('Pages:', 'my-theme'),
'after' => '</div>',
));
?>
</div>
<footer class="entry-footer">
<?php the_category(); ?>
<?php the_tags(); ?>
</footer>
</article>
<?php
if (comments_open() || get_comments_number()) :
comments_template();
endif;
?>
<?php endwhile; ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>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
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
🛠️ functions.php 高级功能
自定义图像尺寸
php
// 添加自定义图片尺寸
add_image_size('hero-image', 1920, 1080, true);
add_image_size('thumbnail-medium', 600, 400, true);
add_image_size('square-thumb', 300, 300, array('center', 'center'));1
2
3
4
2
3
4
自定义导轨
php
// 添加编辑器样式
add_editor_style('css/editor-style.css');
// 添加主题样式到 Gutenberg
add_theme_support('editor-styles');
add_theme_support('dark-editor-style');
// 支持块样式
add_theme_support('wp-block-styles');
// 支持全宽对齐
add_theme_support('align-wide');1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
块主题支持 (WordPress 5.8+)
php
// 支持区块样式表
add_theme_support('editor-styles');
// 支持深色编辑器样式
add_theme_support('dark-editor-style');
// 支持区块样式
add_theme_support('wp-block-styles');
// 支持全宽/宽对齐
add_theme_support('align-wide');
// 支持边框设置
add_theme_support('border');
add_theme_support('custom-spacing');
add_theme_support('custom-line-height');
add_theme_support('appearance-tools');
// 支持颜色选项
add_theme_support('editor-color-palette', array(
array(
'name' => __('Primary', 'my-theme'),
'slug' => 'primary',
'color' => '#21759b',
),
array(
'name' => __('Secondary', 'my-theme'),
'slug' => 'secondary',
'color' => '#f0f0f0',
),
));
// 支持字体大小
add_theme_support('editor-font-sizes', array(
array(
'name' => __('Small', 'my-theme'),
'slug' => 'small',
'size' => 12,
),
array(
'name' => __('Normal', 'my-theme'),
'slug' => 'normal',
'size' => 16,
),
));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
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
🎨 CSS 架构
推荐使用现代 CSS 架构：
css
/* style.css - 主样式表 */
/* =WordPress Core
-------------------------------------------------------------- */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
/* =Base
-------------------------------------------------------------- */
:root {
--color-primary: #21759b;
--color-secondary: #f0f0f0;
--font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body {
font-family: var(--font-primary);
line-height: 1.6;
color: #333;
}
/* =Layout
-------------------------------------------------------------- */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* =Components
-------------------------------------------------------------- */
.button {
display: inline-block;
padding: 10px 20px;
background: var(--color-primary);
color: #fff;
border-radius: 4px;
}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
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
📜 JavaScript 架构
javascript
// js/main.js
(function() {
'use strict';
// 移动端菜单切换
const menuToggle = document.querySelector('.menu-toggle');
const nav = document.querySelector('.nav-menu');
if (menuToggle) {
menuToggle.addEventListener('click', function() {
nav.classList.toggle('toggled');
menuToggle.setAttribute(
'aria-expanded',
nav.classList.contains('toggled')
);
});
}
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
})();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
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
📁 主题文件清单
| 文件 | 必需 | 用途 |
|---|---|---|
| style.css | ✅ | 主题信息和主样式 |
| index.php | ✅ | 回退模板 |
| header.php | 建议 | 页头部分 |
| footer.php | 建议 | 页脚部分 |
| functions.php | 建议 | 功能函数 |
| screenshot.png | 建议 | 主题预览图 (1200×900) |
| single.php | 可选 | 单篇文章 |
| page.php | 可选 | 单个页面 |
| archive.php | 可选 | 归档页 |
| search.php | 可选 | 搜索结果 |
| 404.php | 可选 | 404页面 |
| sidebar.php | 可选 | 侧边栏 |
| comments.php | 可选 | 评论 |