从零开始手把手教你做WordPress模板｜2025年新手必看全流程实录

本文知识重点目录▼CloseOpen

第一步：搭建环境和准备工具
- 搭建本地开发环境
第二步：从HTML静态页出发拆分模板文件
- 把index.html变成首页模板
第三步：添加动态内容与文章循环

其实做WordPress模板，说白了就是把一个网页的结构、样式和功能拆开，再按照它的规则重新组织起来。刚开始学的时候我也懵圈，不知道怎么把index.html变成index.php，也不知道functions.php到底是干啥的。但当我一步步照着官方文档（这里可以参考WordPress 官方主题开发指南nofollow）去试的时候，发现并没有想象中那么难。

现在我要分享的这套方法，是我在2023年给一个完全没有基础的朋友做培训时出来的。他最开始连FTP都不知道是什么，结果用了不到两个月的时间，做出了人生第一个能上线使用的WordPress模板。而且这个模板还被一个小众插画师博客用了三个月，至今没出过任何故障。

第一步：搭建环境和准备工具

别急着敲代码，先把自己的开发环境搭起来。很多人一上来就直接装WordPress，结果本地测试环境没弄好，后面各种报错搞得头大。我之前也吃过这方面的亏，明明在主机上没问题，在本地调试时却卡住了。

搭建本地开发环境

我自己常用的组合是XAMPP + VSCode，简单好用还不花钱。XAMPP负责模拟服务器环境，让你可以在本机运行WordPress；VSCode作为代码编辑器，配合一些插件，比如PHP Intelephense、Prettier，写代码会更顺手。

安装好之后，把WordPress最新版下载下来，解压到xampp/htdocs目录下，然后启动Apache和MySQL服务。打开浏览器输入 localhost/wordpress 就能进入安装页面了。

推荐配置：

XAMPP 控制面板设置：

Apache 端口默认80，如果冲突可改8080

MySQL 默认端口3306

WordPress版本尽量保持最新稳定版，目前是6.5以上

工具名称	功能说明	我的使用体验
XAMPP	本地Web服务器搭建	老牌工具，稳定但偶尔会闪退
VSCode	开源代码编辑器	插件多，智能提示强大
FileZilla	FTP连接工具	支持断点续传，适合上传模板文件

你可以先在本地折腾，不怕搞坏，等完全搞明白了，再部署到真实主机上也不迟。

第二步：从HTML静态页出发拆分模板文件

这是我最喜欢的一个入门方式——把你已经做好的HTML静态页，一步步拆分成WordPress模板结构。这样做的好处是看得见变化，不至于一头扎进一堆PHP函数里出不来。

把index.html变成首页模板

你要有一个完整的静态网页设计稿。假设你已经有了一个叫index.html的主页页面，里面有头部、侧边栏、正文区和底部。

我现在教你怎么做第一步：把这段HTML内容拆成几个部分：

把

相关的代码剪切出来，保存为 header.php

把

部分存成 footer.php

左侧菜单或导航条单独放进 sidebar.php

剩下的主体内容保留为 index.php

在 index.php 中插入 PHP 函数调用这些文件：


这里放主内容 >

这时候如果你刷新本地WordPress后台的主题列表，应该能看到你新加入的主题名称。不过别高兴太早，你会发现页面加载后样式全没了。因为WordPress不会自动识别CSS路径。

这时候就要去 functions.php 文件中注册你的样式表：

function my_theme_enqueue_styles() {
 wp_enqueue_style('main-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

这段代码的作用就是告诉WordPress：“ 我的样式文件在这里！”是不是有点像跟机器人对话？

第三步：添加动态内容与文章循环

到了这一步，你已经完成了基本的模板结构。但现在的问题是，所有内容都是写死的，没法自动显示最新的文章。这时候就需要引入“文章循环”机制了。

文章是怎么“循环”出来的？

这是WordPress最神奇的地方之一：它能根据当前页面类型，自动从数据库里取出对应的文章内容，放到你的模板中显示出来。

举个例子，你写了一个page.php，专门用来显示单页内容。那它里面应该有类似这样的结构：

这一段代码的意思是：“如果存在文章，请依次读取并展示标题和内容。”听起来是不是有点像自动读取数据库里的数据，然后按你设计的方式显示出来？

我当时第一次看懂这段代码的时候，感觉就像打通了任督二脉，终于明白为什么WordPress模板能“活”起来了。

主页模板怎么显示最近文章？

如果你想让主页显示最近几篇文章，而不是静态内容，就可以修改index.php的主区域：

<?php if (have_posts()) 

 while (have_posts()) the_post();
 get_template_part('template-parts/content', get_post_format());
 endwhile;
else 
 echo '暂时没有文章';
endif;
?>

这里的 get_template_part() 是一个很实用的函数，它可以引用其他模板片段，避免重复代码。比方说你可以新建一个 content.php 文件，里面放文章标题、摘要、发布时间等内容，然后在不同页面复用它。

如何创建独立页面模板？

有些时候你想做个“关于我们”或者“联系页面”，它们的排版可能跟普通文章完全不同。这时候你可以新建一个 about.php 文件，并在顶部加一段注释声明它是特定页面模板：

/
Template Name: 关于我们页面
/

保存后，当你在后台新建页面时，就能在右侧“模板”选项中看到这个自定义模板了。是不是很方便？

你可能会问：我能不能做一个只显示某个分类的文章列表页面？当然可以！只需要把上面那段循环改成指定分类即可：

<?php $args = array('category_name' => 'design');
$query = new WP_Query($args);
if ($query->have_posts()) 
 while ($query->have_posts()) $query->the_post();
 // 显示内容
 endwhile;
endif;
?>

这段代码的意思就是告诉WordPress：“给我查一下‘design’这个分类下的所有文章，然后一个个显示出来。”

整个过程其实就是一个不断“拆”和“装”的过程：先把HTML静态页拆成各个模块，再通过PHP把这些模块串联起来，最后实现动态内容的展示。

如果你想深入学习，可以去看看《WordPress Codex》里的模板标签文档（这里参考WordPress 模板标签文档nofollow），里面几乎涵盖了所有你需要的函数和使用方法。

别忘了随时检查你的代码是否规范，可以用W3C验证工具来检测HTML结构是否标准。也可以用Chrome开发者工具查看元素加载顺序，看看有没有JS错误或资源加载失败的情况。

如果你已经成功做出第一个能正常运行的WordPress模板，恭喜你！这只是一个开始，接下来还有更多好玩的东西等着你去探索，比如小工具、自定义字段、API对接等等。继续加油吧！

做WordPress模板上传这件事，其实不难，但对新手来说容易踩坑。你可以用FTP工具，比如FileZilla，连接你的网站空间。连接成功后，找到/wp-content/themes/这个目录，把你本地做好的整个模板文件夹传上去。注意要整个文件夹一起上传，别只传里面的文件，否则结构会乱。

上传完之后，登录WordPress后台，在“外观 > 主题”里刷新一下，应该就能看到你刚上传的新主题了。这时候千万别急着启用，先点进去看看有没有报错提示。如果显示正常，再点击“启用”就可以了。另外权限问题也不能忽视，一般文件夹设置为755、文件设置为644比较稳妥，这样既保证能读取，又不容易被攻击。

新手做WordPress模板常遇到哪些问题？

如果你刚接触WordPress模板开发，可能会遇到各种小问题。这里整理了几个最常见的疑问，帮你提前避坑。

做WordPress模板必须会PHP吗？

虽然不是非要精通PHP，但至少得懂基本语法和函数调用。因为WordPress的模板文件是用PHP来连接数据库、动态加载内容的。比如 get_header()、the_title() 这些函数都是PHP写的。先学点基础PHP知识，边做边查文档也能很快上手。

模板做好后怎么上传到网站？

最常见的方式是通过FTP工具（如FileZilla）把整个模板文件夹上传到/wp-content/themes/目录下。上传完成后，在后台“外观 > 主题”中就能看到你的新主题了。注意权限设置，一般文件夹权限设为755，文件设为644比较安全。

WordPress模板文件结构有哪些关键文件？

最基本的结构包含以下几个文件：index.php（首页模板）、style.css（样式表）、functions.php（功能注册文件），还有header.php、footer.php、sidebar.php这些用来拆分页面结构的组件文件。如果你想支持特定页面或文章类型，还可以添加page.php、single.php等。