WordPress 经典主题开发：从零开始创建你的一个主题

发布于 作者:

每一个 WordPress 网站都需要一个主题来展示内容，而理解主题的构成并不像想象中那么复杂。经典主题（Classic Theme）作为 WordPress 传统的主题架构，依然活跃在无数网站中，它依靠 PHP 模板文件动态生成页面。本文会带你亲手创建一个基础的 WordPress 经典主题，你只需要准备一个代码编辑器，大约十分钟就能完成。通过这个过程，你会接触到 WordPress 主题的核心文件、模板层级的基础概念，以及 WordPress 循环（The Loop）这个关键的输出机制。无论你是想开发自己的主题，还是想理解现有主题的运作方式，这篇文章都会为你打下必要的基础。

认识 WordPress 经典主题

在 WordPress 主题的里，存在两种主流模式：经典主题（Classic Theme） 和块主题（Block Theme）。块主题使用 HTML 文件存放模板结构，依赖 theme.json 控制样式，强调“全站编辑”。而经典主题依靠 PHP 文件作为模板，动态执行代码、查询数据库并输出 HTML 页面。本文聚焦于经典主题——至今仍在大量站点使用，对理解 WordPress 底层逻辑至关重要。

经典主题基础的文件只需两个：一个是 index.php，用于展示文章列表；另一个是 style.css，控制外观样式。你甚至不需要任何 PHP 基础，通过复制现成的代码就能跑起来。

动手之前的准备工作

在开始之前，你需要有一个 WordPress 运行环境。如果你还没有，推荐使用 Local 或 XAMPP 这类本地环境工具，在电脑上快速搭建一个测试站点。这样你可以在不影响线上网站的前提下自由尝试。

你还需要一个代码编辑器，比如 VS Code（免费且好用），或者系统自带的文本编辑器（Windows 用记事本，Mac 用文本编辑）也可以临时应付。

一步：创建主题文件夹

在你的 WordPress 站点目录中，找到 wp-content/themes/ 这个文件夹。这是所有主题存放的地方。

在该目录下新建一个文件夹，命名为 my-first-theme（你也可以用你喜欢的名字）。这个文件夹名就是你的主题标识，所有主题文件都要放在这里面。

二步：创建样式表 style.css

在 my-first-theme 文件夹中，创建一个名为 style.css 的文件。这个文件不仅是样式表，它还有一个关键作用——存放主题信息头，让 WordPress 识别并显示你的主题。

打开 style.css，填入以下代码：

text

/*
Theme Name: My First WordPress Theme
*/

body {
    background: #21759b;
}

你可能注意到了，上方的注释块包含了 Theme Name 声明。这是主题信息头（Theme Header），WordPress 通过读取这段注释来获取主题名称、作者、描述等元数据。没有这段声明，你的主题就不会出现在后台主题列表里。

除了 Theme Name，你还可以添加其他信息，比如：

text

/*
Theme Name: My First WordPress Theme
Author: 你的名字
Description: 这是我学习 WordPress 主题开发创建的一个主题
Version: 1.0
*/

style.css 下方的 body { background: ... } 是真正的 CSS 样式，它会修改网站页面的背景颜色。你可以随意调整色值，让页面看起来有点个性。

三步：创建索引模板 index.php

在同一个主题文件夹中，创建一个名为 index.php 的文件。这是你的主题的默认模板。当用户访问你的网站时，WordPress 会优先使用这个文件来渲染页面。

将以下代码完整复制到 index.php 中：

php

<!DOCTYPE html>
<html>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" />
    <?php wp_head(); ?>
</head>
<body>
    <h1><?php bloginfo( 'name' ); ?></h1>
    <h2><?php bloginfo( 'description' ); ?></h2>

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <h3><?php the_title(); ?></h3>
        <?php the_content(); ?>
        <?php wp_link_pages(); ?>
        <?php edit_post_link(); ?>

    <?php endwhile; ?>

    <?php
    if ( get_next_posts_link() ) {
        next_posts_link();
    }
    ?>
    <?php
    if ( get_previous_posts_link() ) {
        previous_posts_link();
    }
    ?>

    <?php else: ?>
        <p>No posts found. :(</p>
    <?php endif; ?>

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

这段代码看起来有点长，但拆解开来并不复杂。我们来一一认识其中的核心元素：

模板标签（Template Tags）

模板标签是 WordPress 提供的 PHP 函数，它们负责输出特定的内容或执行特定的任务。你可以把它们理解成填空工具——在模板的指定位置填入网站标题、文章内容、链接地址等动态数据。下面列出这段代码中用到的几个关键标签：

  • <?php bloginfo( 'name' ); ?>：输出网站标题，你在“设置 → 常规”里填写的站点名称。
  • <?php bloginfo( 'description' ); ?>：输出网站副标题（Tagline）。
  • <?php wp_title( '|', true, 'right' ); ?>：生成当前页面的标题，适合放在 <title> 标签中使用。
  • <?php echo esc_url( get_stylesheet_uri() ); ?>：获取当前主题的 style.css 文件的 URL，并安全地输出。esc_url 负责过滤掉不安全字符，保证链接的安全性。
  • <?php wp_head(); ?> 和 <?php wp_footer(); ?>：这是两个钩子（Hooks）。它们本身不输出可见内容，但为插件和主题功能提供了插入点。很多插件依赖这些钩子来加载脚本或样式，所以务必保留。

模板层级（Template Hierarchy）

经典主题有一个重要的概念叫模板层级（Template Hierarchy）。简单说，WordPress 会根据用户访问的内容类型（首页、单篇文章、页面、分类归档等）自动选择合适的模板文件。比如：

  • 访问单篇文章时，优先使用 single.php
  • 访问页面时，优先使用 page.php
  • 访问分类归档时，优先使用 category.php

如果这些文件不存在，WordPress 会回退到 index.php。所以 index.php 是所有模板的“后防线”，它必须存在。

WordPress 循环（The Loop）

这是整个 index.php 中核心的部分，我们来重点理解它：

php

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h3><?php the_title(); ?></h3>
    <?php the_content(); ?>
    <?php wp_link_pages(); ?>
    <?php edit_post_link(); ?>
<?php endwhile; ?>

这段代码叫做 WordPress 循环（The Loop）。它的执行逻辑是这样的：

  1. have_posts() 检查当前查询是否有文章数据。
  2. 如果有，while 循环开始执行。
  3. the_post() 从数据库取出下一篇文章的数据，并设置好全局变量。
  4. 在循环体内，the_title() 输出当前文章的标题，the_content() 输出文章内容。
  5. 循环结束，进入下一次迭代，直到所有文章都被展示出来。

如果没有任何文章，就执行 else 分支，显示“No posts found. :(”。

循环是 WordPress 主题里出镜率高的代码块，几乎所有显示文章列表或内容的模板都会用到它。

四步：安装并激活主题

现在你的主题已经有了基础的结构：

text

my-first-theme/
├── style.css
└── index.php

有两种方式可以安装主题：

方式一：复制文件夹 将整个 my-first-theme 文件夹复制到你的 WordPress 站点的 wp-content/themes/ 目录下。

方式二：打包 ZIP 安装 将主题文件夹压缩成 ZIP 包（注意是压缩文件夹本身，而不是压缩里面的文件），然后在 WordPress 后台进入“外观 → 主题 → 添加主题 → 上传主题”，选择 ZIP 文件上传并安装。

安装完成后，进入“外观 → 主题”，找到你创建的“My First WordPress Theme”，点击激活。

五步：查看效果

激活后，访问你的网站首页（前台，不是后台），你应该能看到一个浅蓝色背景的页面，显示你的网站标题、副标题，以及所有已发布的文章列表（如果没有任何文章，会显示“No posts found. :(”）。

页面上可能没有菜单、侧边栏、漂亮的排版——这完全正常。你现在看到的是纯粹的 WordPress 骨架。所有的高级功能都是在这些基础文件之上逐步添加上去的。

扩展知识：更多模板文件

当你的主题需要支持更多内容类型时，可以创建额外的模板文件。常见的包括：

  • header.php：存放网站的头部区域，比如导航菜单、Logo 等。其他模板通过 <?php get_header(); ?> 调用它。
  • footer.php：存放页脚区域，比如版权信息、关闭标签等。其他模板通过 <?php get_footer(); ?> 调用它。
  • sidebar.php：存放侧边栏内容，通过 <?php get_sidebar(); ?> 调用。
  • single.php：专门用于显示单篇文章。
  • page.php：专门用于显示独立页面（Page）。
  • archive.php：用于显示归档页面（分类、标签、作者、日期等）。
  • functions.php：主题的功能文件，可以添加自定义功能、注册菜单、加载脚本等。

把通用的部分拆分到独立的文件中，能让主题的代码更整洁、更易于维护。比如，你可以把 <head> 部分和导航栏放在 header.php，把底部的版权信息放在 footer.php，然后在 index.php 中用 get_header() 和 get_footer() 引入它们。

总结

WordPress 经典主题的开发入门，本质上就是掌握两个核心文件和一个关键代码块：

  • style.css：提供主题身份信息，以及基础的 CSS 样式。
  • index.php：提供默认的 HTML 结构和 PHP 逻辑。
  • WordPress 循环（The Loop）：负责从数据库获取文章并输出到页面。

这种模式虽然看起来简陋，但它体现了 WordPress 主题开发本质的逻辑：用 PHP 模板标签输出动态数据，用 CSS 控制外观，用模板文件的结构对应不同的内容类型。当你理解了这些基础，再去学习更复杂的模板层级、自定义查询、小工具和自定义izer 设置，都会顺畅很多。

你刚才完成的这个小主题，虽然外观朴素，但它已经是合法可用的 WordPress 主题了。从这一步开始，你可以一步步添加样式、拆分模板、注册菜单，打造属于你自己的完整主题。