EP023. “front-page.php 与静态首页拆分”

首页 › WordPress 开发课程 › BLOG · EP023

约 10 分钟· #EP023#BLOG

WordPress 默认会把首页做成博客列表，但这个主题要求首页是自定义静态页面，/blog 才是博客列表。这一讲的核心是利用 WordPress 后台「阅读设置」的静态首页功能，把首页内容从 index.php 搬到新建的 front-page.php，让 index.php 腾出来专门做博客列表模板，并第一次把博客列表页的 HTML/PHP 写完整（banner + while 循环输出文章标题、作者、日期、分类、摘要、continue reading 按钮）。

涉及文件

wp-content/themes/fictional-university-theme/front-page.php （新建，内容是原 index.php 的完整拷贝）
wp-content/themes/fictional-university-theme/index.php （整份重写，改成博客列表模板）

代码实现

后台设置（非代码，先做）

新建页面 Home（内容留空）。
新建页面 Blog（内容留空）。
设置 → 阅读 → 首页显示改成「静态页面」，Front page 选 Home，Posts page 选 Blog。

front-page.php（新建）

把当时 index.php 里原本的首页代码整份复制过来即可，模板结构不变（page-banner + upcoming events + from our blogs 硬编码卡片 + hero-slider），这一讲没有修改这部分内容，只是换了个文件名承载。

index.php（整份重写为博客列表模板）

<?php

get_header(); ?>

<div class="page-banner">
  <div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/ocean.jpg') ?>);"></div>
  <div class="page-banner__content container container--narrow">
    <h1 class="page-banner__title">Welcome to our blog!</h1>
    <div class="page-banner__intro">
      <p>Keep up with our latest news.</p>
    </div>
  </div>  
</div>

<div class="container container--narrow page-section">
<?php
  while(have_posts()) {
    the_post(); ?>
    <div class="post-item">
      <h2 class="headline headline--medium headline--post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      
      <div class="metabox">
        <p>Posted by <?php the_author_posts_link(); ?> on <?php the_time('n.j.y'); ?> in <?php echo get_the_category_list(', '); ?></p>
      </div>

      <div class="generic-content">
        <?php the_excerpt(); ?>
        <p><a class="btn btn--blue" href="<?php the_permalink(); ?>">Continue reading &raquo;</a></p>
      </div>

    </div>
  <?php }
?>
</div>

<?php get_footer();

?>

banner 区域、居中容器 div 都是直接从 page.php 里抄现成的 class（page-banner、container container--narrow page-section），跟 PHP/WordPress 无关，纯粹省得手写 CSS class。

[截图：前台 /blog 博客列表页，显示文章标题、作者/日期/分类 meta box、摘要和 continue reading 按钮的画面]

Hook / Function 速查

名称	类型	用途
`have_posts()`	WP 内建 function	判断 while 循环是否还有文章要输出（默认查询）
`the_post()`	WP 内建 function	让 WordPress 准备好当前这篇文章的数据
`the_title()`	WP 内建 function	输出当前文章标题
`the_permalink()`	WP 内建 function	输出当前文章链接
`the_author_posts_link()`	WP 内建 function	输出作者名字并链接到该作者的文章归档
`the_time($format)`	WP 内建 function	输出当前文章发布时间，`$format` 用 `n.j.y` 之类的日期代码格式化（月.日.年）
`get_the_category_list($sep)`	WP 内建 function（返回值，需要 echo）	返回当前文章的分类列表，`$sep` 是多个分类之间的分隔符
`the_excerpt()`	WP 内建 function	输出文章摘要（自动截断）
`the_content()`	WP 内建 function	输出文章完整内容

常见坑

get_the_category_list() 是 get_ 开头的函数，只返回数据不会自动输出，忘记在前面加 echo 的话页面上什么都看不到。
作者名字默认显示的是 WordPress 用户名（可能全小写），要在后台「用户 → 个人资料」里把 Nickname 改成想要的大小写形式，再把「以下列方式公开显示为」改选成该 Nickname，前台才会显示正确大小写。
日期格式代码（n、j、y、F、M 等）记不住很正常，transcript 里提到直接 Google "WordPress the_time" 找 Codex 的 Formatting Date and Time 页面查表即可，不用死记。
一开始 metabox 这个 class 手滑打成了 meta box（带空格），导致样式没生效，要确认是 metabox 一个单词。

延伸 / 后续讲座会用到

index.php 里的分页、single.php 的美化会在 EP024 继续处理；分类归档标题会在 EP025 继续处理。

Sources

Udemy：

Become a WordPress Developer: Unlocking Power With Code — Section 6, EP023