WordPress archive.php 分类与归档页面开发指南

一、archive.php 核心认知:页面定位与作用

1.1 archive.php 的核心功能的定义

archive.php 是 WordPress 模板体系中的归档页面通用模板,核心作用是展示某一类聚合性文章列表,而非单篇文章或首页内容。它会自动匹配「分类目录、标签、日期、作者、自定义分类法」等归档类型的页面请求,统一渲染对应内容的文章列表。

简单来说:用户点击分类链接、标签链接、按年月查看文章时,WordPress 会优先加载 archive.php 展示内容。

1.2 归档页面与分类页面的关联及区别

关联:分类页面是归档页面的子集,WordPress 会将分类页面归为归档类型,默认共用 archive.php 模板。

区别:

归档页面:广义概念,包含分类、标签、日期、作者、自定义分类法等所有聚合页面;

分类页面:狭义概念,仅指「分类目录」对应的文章列表页面,可通过 category.php 单独定制(优先级高于 archive.php)。

1.3 archive.php 在 WordPress 模板层级中的位置

自定义分类模板 → 分类模板(category.php) → 标签模板(tag.php) → 日期模板(date.php) → archive.php → index.php

这意味着:如果主题没有单独的 category.php/tag.php,所有归档类型都会自动使用 archive.php 渲染,是主题开发的「通用兜底模板」。

二、模板优先级测试

2.1 模板预设

category.php里面写1,tag.php里面写2,date.php里面写3,archive.php里面写4

2.2实验访问,分别访问分类页、tag页、日期页看加载的模板

2.3 结果分类页category.php>archive.php,tag页tag.php>archive.php,日期页date.php>archive.php

三、archive.php 基础结构开发

3.1 模板文件创建与基础代码框架

<?php

/**

* 归档页面模板

* Template Name: 归档页面

*/

get_header(); // 加载头部

?>

<!-- 中间内容区域 -->

<div id="archive-content" class="container">

<?php

// 1. 展示归档标题

the_archive_title('<h1 class="archive-title">', '</h1>');

// 2. 展示归档描述

the_archive_description('<div class="archive-desc">', '</div>');

?>

<?php if (have_posts()) : ?>

<!-- 文章循环区域 -->

<div class="archive-post-list">

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

<!-- 单篇文章内容 -->

<article class="archive-post-item">

<h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<div class="post-meta">

<span>发布时间:<?php the_time('Y-m-d'); ?></span>

<span>作者:<?php the_author(); ?></span>

</div>

<div class="post-excerpt"><?php the_excerpt(); ?></div>

</article>

<?php endwhile; ?>

</div>

<!-- 分页区域 -->

<?php the_posts_navigation(); ?>

<?php else : ?>

<!-- 无文章提示 -->

<div class="no-posts">暂无相关文章</div>

<?php endif; ?>

</div>

<?php get_sidebar(); // 加载侧边栏(可选) ?>

<?php get_footer(); // 加载底部 ?>

3.2 调用 WordPress 核心函数(查询、循环、分页)

开发 archive.php 必须掌握 3 个核心函数,无需自定义 SQL 查询:

have_posts():判断当前归档是否有文章;

the_post():初始化文章数据,配合循环使用;

the_posts_navigation():默认上一页 / 下一页分页(后续可优化为数字分页)。

四、分类归档页面核心功能实现

4.1 分类列表展示

$categories = get_categories(array(

'hide_empty' => 1,

'orderby' => 'count',

'order' => 'DESC'

));

可以获取到分类列表,可以做分类筛选

4.2 文章列表循环渲染(标题、摘要、日期、作者等信息)

列表中标题:the_title();

摘要:the_excerpt(),有时候the_excerpt的自带样式不能满足需要,可以用get_post(get_the_ID())->post_excerpt获取

日期:the_time()

作者:the_author();

五、日期/标签/自定义归档页面开发

5.1 日期归档

Is_date()函数是日期页面的判断函数

<?php if (is_date()) : ?>

<div class="date-archive-title">

<?php if (is_year()) : ?>

<h1><?php the_time('Y年'); ?> 年所有文章</h1>

<?php elseif (is_month()) : ?>

<h1><?php the_time('Y年m月'); ?> 所有文章</h1>

<?php elseif (is_day()) : ?>

<h1><?php the_time('Y年m月d日'); ?> 所有文章</h1>

<?php endif; ?>

</div>

<?php endif; ?>

5.2 自定义分类法(Custom Taxonomy)归档适配

<?php if (is_tax()) : ?>

<div class="tax-archive-header">

<h1><?php single_term_title(); ?></h1>

<div class="tax-desc"><?php echo term_description(); ?></div>

</div>

<?php endif; ?>

is_tax()函数是自定义分类法的判断函数

六、功能进阶:个性化与交互优化

6.1 文章分页功能(数字分页、加载更多)

global $wp_query;

$big = 999999999;

echo paginate_links(array(

'base' => str_replace(big, '%#%', esc_url(get_pagenum_link(big))),

'format' => '?paged=%#%',

'current' => max(1, get_query_var('paged')),

'total' => $wp_query->max_num_pages,

'prev_text' => '上一页',

'next_text' => '下一页'

));

数字分页

加载更多是通过获取数字分页的下一页的html,通过js加载到当前页面

自定义分页,wordpress有get_posts()等函数可以自定义文章列表来实现分页

6.2 搜索框与筛选功能集成

get_search_form()是获取搜索的表格,一般是form表格传递s参数

相关推荐
即使再小的船也能远航12 小时前
【Python】安装
开发语言·python
Irissgwe12 小时前
类与对象(三)
开发语言·c++·类和对象·友元
雪度娃娃13 小时前
转向现代C++——优先选用nullptr而不是0和NULL
开发语言·c++
zyk_computer14 小时前
AI 时代,或许 Rust 比 Python 更合适
人工智能·后端·python·ai·rust·ai编程·vibe coding
weixin1997010801614 小时前
【保姆级教程】淘宝/天猫商品详情 API(item_get)接入指南:Python/Java/PHP 调用示例与 JSON 返回值解析
java·python·php
萌新小码农‍14 小时前
python装饰器
开发语言·前端·python
KK溜了溜了14 小时前
Python从入门到精通
服务器·开发语言·python
雨辰AI14 小时前
SpringBoot3 项目国产化改造完整流程|从 MySQL 到人大金仓落地
java·数据库·后端·mysql·政务
故事和你9114 小时前
洛谷-【图论2-1】树5
开发语言·数据结构·c++·算法·动态规划·图论
threelab14 小时前
Three.js 初中数学函数可视化 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器