EP011. “The Loop 基础：have_posts() 与 the_post()”

首页 › WordPress 开发课程 › THE LOOP · EP011

约 8 分钟· #EP011#THE LOOP

这一讲学 WordPress 里最重要的概念——The Loop（循环）。目标是在首页输出多篇博客文章的标题和内容，不再像上一讲那样手写 count 变量和自建循环逻辑，而是直接用 WordPress 提供的 have_posts() / the_post() 组合来遍历当前 query 到的文章。顺带学到 WordPress 会根据当前访问的 URL 类型（首页 / 单篇文章 / 单个页面）去主题文件夹里找不同的模板文件（index.php / single.php / page.php），这几个文件虽然长得不一样，但骨子里都是同一个 The Loop。

📌 本篇代码只反映 EP011 结束时的状态（纯 loop，还没有 header/footer）。sources 里对应的 09-end 代码快照其实是 EP011+EP012 两讲的共同结束状态（已经包含 get_header() / get_footer()），下面贴的代码是把这两行拿掉之后、还原成 EP011 单独结束时的样子， get_header() / get_footer() 是下一讲 EP012 才加上去的，笔记里会分开写。

涉及文件

wp-content/themes/fictional-university-theme/index.php （修改：删掉上一讲的测试代码，写入真正的 loop）
wp-content/themes/fictional-university-theme/single.php （新建：单篇文章详情页模板）
wp-content/themes/fictional-university-theme/page.php （新建：单个页面模板）

代码实现

// wp-content/themes/fictional-university-theme/index.php
// 首页：输出所有文章，标题带链接指向该文章的永久链接

<?php
  while(have_posts()) {
    the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_content(); ?>
    <hr>
  <?php }
?>

// wp-content/themes/fictional-university-theme/single.php
// 单篇文章详情页：已经在这一篇文章上了，标题不需要再是链接，也不需要 <hr> 分隔线

<?php
  while(have_posts()) {
    the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
  <?php }
?>

// wp-content/themes/fictional-university-theme/page.php
// 单个页面：内容跟 single.php 几乎一样，先复制过来，
// 多加一行 h1 只是为了肉眼确认这个页面确实是被 page.php 渲染的

<?php
  while(have_posts()) {
    the_post(); ?>
    <h1>This is a page not a post</h1>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
  <?php }
?>

Hook / Function 速查

名称	类型	用途
`have_posts()`	WP 内建 function	The Loop 的循环条件：当前 query 里还有没有下一篇文章
`the_post()`	WP 内建 function	把内部指针移到下一篇文章，并把该文章的数据准备好供后面的模板标签使用（不用自己维护 count 变量）
`the_title()`	WP 模板标签	输出当前文章/页面的标题
`the_content()`	WP 模板标签	输出当前文章/页面的正文内容
`the_permalink()`	WP 模板标签	输出当前文章的永久链接（permalink）URL
`single.php`	主题模板文件（约定命名）	访问单篇 post 的 URL 时，WordPress 优先找这个文件；不存在则 fallback 回 `index.php`
`page.php`	主题模板文件（约定命名）	访问单个 page 的 URL 时，WordPress 优先找这个文件；不存在则 fallback 回 `index.php`

[截图：前台首页用 The Loop 渲染出的文章标题+内容列表画面（还没有 header/footer 样式，纯文字效果）]

常见坑

原文这一讲没有明确提到踩坑或报错，只是解释了一个容易忽略的机制：single.php / page.php
如果不存在，WordPress 不会报错，而是自动 fallback 回 index.php 当作万能默认模板。

延伸 / 后续讲座会用到

下一讲 EP012 会把 header/footer 抽成全局的 header.php / footer.php，
这里的 index.php、single.php、page.php 都会加上 get_header() / get_footer() 调用。

Sources

Udemy：

Become a WordPress Developer: Unlocking Power With Code — Section 4, EP011