搭骨架：style.css + header + footer + index
第一步：style.css
/*
Theme Name: My Theme
Author: 草根站长笔记
Version: 1.0
Text Domain: my-theme
*/
body { margin: 0; font-family: -apple-system, "Microsoft YaHei", sans-serif; color: #333; line-height: 1.8; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.site-header { border-bottom: 1px solid #eee; padding: 20px 0; }
.site-footer { border-top: 1px solid #eee; padding: 20px 0; margin-top: 40px; color: #888; font-size: 13px; }头部注释是“身份证”，Theme Name 必须有。下面的基础样式先随便写几条，够看就行，后面第 50 篇再细调。
第二步：header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="wrap">
<header class="site-header">
<a href="<?php echo esc_url( home_url('/') ); ?>"><?php bloginfo( 'name' ); ?></a>
</header>
<main>三个关键点：
wp_head()不能少（卷三讲过）；body_class()会输出一堆 class（比如single、page），方便按页面写样式；bloginfo('charset')输出编码，别写死。
第三步：footer.php
</main>
<footer class="site-footer">
<p>© <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?></p>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>wp_footer() 也不能少（插件、统计代码都要它）。
第四步：index.php
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</article>
<?php endwhile; endif; ?>
<?php get_footer(); ?>这是最小的首页：循环 + 标题 + 摘要。
第五步：激活测试
把 my-theme 放进 wp-content/themes/，去后台“外观 → 主题”，应该能看到它。
激活，打开首页，应该能看到文章列表。样式很丑，但能跑。
这一步一定要先做。如果激活不了，说明身份证写错了（卷三第 6 篇讲过）；如果激活了但白屏，说明 PHP 有语法错误。
小结
一句话记住：先做 5 个文件（style.css + header + footer + index），激活能跑，再往下加。
下一篇做首页——加列表样式和分页。
本系列导航
- 上一篇：开始之前：定一个“最小可用”的主题
- 下一篇：首页：文章列表与分页
- 返回总目录
相关文章
搜索文章：
联系方式：
近期文章