什么是 WordPress 模板页面？

模板页面是一套 PHP 文件，它们共同决定了你的 WordPress 网站在前端显示什么样子，以及如何组织内容。

wordpress模板页面
（图片来源网络，侵删）

你可以把 WordPress 主题想象成一栋房子，而模板文件就是这栋房子的不同部分：

  • header.php -> 房子的屋顶和外墙
  • footer.php -> 房子的地基和地板
  • index.php -> 房子的主体结构
  • single.php -> 单个卧室的设计
  • page.php -> 客厅或书房的设计
  • archive.php -> 书架或展示柜的设计

当访问者访问你的网站时,WordPress 会根据他们访问的 URL（是首页、文章页、还是某个“页面”），自动加载并组合相应的模板文件，最终生成用户看到的 HTML 页面。

WordPress 的核心模板文件及其层级结构

WordPress 有一个非常聪明的“模板层级”（Template Hierarchy）系统，它会按照一个预设的顺序去查找并使用最合适的模板文件，这个系统让你可以创建非常精细和定制化的页面。

下面是几个最常用和最重要的模板文件：

wordpress模板页面
（图片来源网络，侵删）

index.php - 通用模板

  • 作用：这是所有模板的“后备模板”，WordPress 没有找到更具体的模板文件（比如没有找到 archive.php），它就会加载 index.php。
  • 使用场景：作为博客首页、分类/标签归档页、搜索结果页等的默认显示。

page.php - 单页面模板

  • 作用：专门用于显示 WordPress 后台“页面”（Pages）中创建的内容，关于我们”、“联系方式”、“服务介绍”这类固定页面。
  • 使用场景：网站中那些不按时间顺序排列的、内容相对固定的页面。

single.php - 单文章模板

  • 作用：专门用于显示 WordPress 后台“文章”（Posts）中单篇内容的页面。
  • 使用场景：当用户点击一篇博客文章的标题或“阅读全文”链接后，看到的页面。

archive.php - 归档模板

  • 作用：用于显示一系列文章的集合，它包括：
    • 分类归档 (category.php 是其更具体的版本)
    • 标签归档 (tag.php 是其更具体的版本)
    • 作者归档 (author.php)
    • 日期归档 (date.php)
    • 自定义文章类型归档
  • 使用场景：当用户点击某个分类、标签或作者时，显示该分类/标签下的所有文章列表。

header.php 和 footer.php - 头部和尾部模板

  • 作用：这两个文件是网站的公共部分。header.php 通常包含网站的 <head> 部分（标题、链接到 CSS/JS 文件）、主导航菜单等。footer.php 包含页脚信息、版权声明等。
  • 使用场景：几乎所有的页面都会包含这两个文件，通过 get_header() 和 get_footer() 函数来调用。

comments.php - 评论模板

  • 作用：专门用于显示和管理文章的评论区域。
  • 使用场景：在 single.php 中通过 comments_template() 函数调用。

php - 404 错误页面模板

  • 作用：当用户访问一个不存在的页面时，显示这个自定义的错误页面。
  • 使用场景：处理所有“页面未找到”的错误。

search.php 和 searchform.php - 搜索模板

  • search.php：显示搜索结果的页面。
  • searchform.php：显示搜索框的表单。

如何创建和使用自定义模板页面？

这是模板功能最强大的地方,你可以为特定的“页面”创建完全不同的布局。

场景：创建一个“全屏宽度的联系我们”页面

  1. 复制并重命名

    • 打开你的主题文件夹（wp-content/themes/你的主题名/）。
    • 复制 page.php 文件，并将其重命名为 page-contact.php。注意命名规则：page- + 你的页面 slug + .php。

  2. 添加模板头部注释

    • 在 page-contact.php 文件的最顶部，添加以下注释：
      <?php
/**
    • Template Name: 联系我们 (全屏宽度) */ ?>
    • 这个 Template Name 是必须的，它告诉 WordPress 这是一个可用的页面模板。

  3. 修改模板内容

    wordpress模板页面
    （图片来源网络，侵删）
    • 你可以自由修改 page-contact.php 的内容，你可以移除侧边栏，让内容占据整个屏幕宽度。
    • 假设你的原始 page.php 中有类似这样的结构来调用侧边栏：
      <div class="content">
    <?php the_content(); ?>
</div>
<div class="sidebar">
    <?php get_sidebar(); ?>
</div>
    • 在 page-contact.php 中，你可以将其修改为：
      <div class="full-width-content">
    <?php the_content(); ?>
</div>

      （你需要为 .full-width-content 这个 CSS 类添加样式）。

  4. 在 WordPress 后台应用模板

    • 登录 WordPress 后台，进入“页面” -> “所有页面”。
    • 找到你想要应用这个模板的页面（名为“联系我们”的页面），点击“编辑”。
    • 在右侧的“页面属性”面板中，你会看到一个“模板”下拉框。
    • 从下拉框中选择“联系我们 (全屏宽度)”。
    • 点击“更新”按钮。

  5. 查看效果

    • 现在访问这个“联系我们”页面，你就会看到它使用了你新创建的全屏宽度模板，而网站上的其他“页面”则仍然使用原来的 page.php 模板。

模板中常用的 PHP 函数

在模板文件中,你会大量使用以下这些函数来获取和显示 WordPress 的数据：

  • 循环：have_posts() 和 the_post() 是 WordPress 的核心，用于遍历文章。
  • 文章信息：
    • the_title(): 显示文章标题。
    • the_content(): 显示文章全文。
    • the_excerpt(): 显示文章摘要。
    • the_permalink(): 显示文章链接。
    • the_time(): 显示文章发布时间。
    • the_author(): 显示文章作者。
  • 引入文件：
    • get_header(): 引入 header.php。
    • get_footer(): 引入 footer.php。
    • get_sidebar(): 引入 sidebar.php。
    • get_template_part(): 引入一个模板片段，非常灵活。
  • 其他：
    • wp_head(): 在 <head> 标签结束前执行，用于加载 WordPress 的核心脚本和样式。
    • wp_footer(): 在 </body> 标签前执行，用于加载一些必要的脚本。

掌握 WordPress 模板页面，你就掌握了自定义网站外观和结构的核心钥匙，通过理解模板层级和创建自定义模板，你可以：

  • 为不同类型的页面（首页、文章页、自定义页面）设计完全不同的布局。
  • 轻松实现复杂的页面结构,如全屏宽度、多列布局等。
  • 构建功能强大、高度定制化的网站，而不仅仅是使用简单的主题设置。

如果你想深入学习,最好的方法就是找一个简单的主题（如 _s 或 Underscores），打开它的模板文件，对照着网站实际显示的效果去阅读和理解每一行代码的作用。