如何实现 WordPress 网站页面内容的分页显示?

我的 WordPress 网站中有个“阅读记录”页面,按年份记录了自己一年中阅读过的图书目录。五年下来,文章的内容比较多,页面拉得很长,浏览起来不太方便。所以我想让页面内容按年份分页显示,一年一个分页,通过导航条切换,方便地浏览。

WordPress 编辑器中有“分页符”按钮,在需要分页的地方点击此按钮,就会加入 <!--nextpage--> 代码,实现自动分页功能。但我的 Autumn pro 主题不支持分页功能,页面模板文件 page.php 中没有引用  wp_link_pages() 函数。最后借鉴 ChatGPT 帮我优化“历史上的今天” WordPress 插件代码 的思路,由 ChatGPT 帮我实现了这个功能。

我在默认分页显示的基础上,提出进一步的需求是:

1、将分页导航的数字(如 "1", "2", "3")替换为特定的年份(如 "2025", "2024", "2023");

2、自动将第一个分页的年份设定为当前年份,分页年份自动递减;

3、分页导航格式正确,生成格式:/book/, /book/2/,/book/3/,避免 /book2 或 /book/page/2/ 这样的错误链接;

4、仅在有分页时显示导航(无分页时不显示);

5、美化下按钮样式。

最后 ChatGPT 修改后的代码如下:

 <!-- 显示分页内容 -->

<?php
global $page, $numpages;

$current_year = date("Y"); // 获取当前年份
$years = array();

// **自动生成年份数组,长度与分页数相等**
for ($i = 0; $i < $numpages; $i++) {
$years[] = $current_year - $i;
}

if ($numpages > 1) { // **仅在有分页时显示导航**
echo '<div class="post-pagination">按年查看:';

for ($i = 1; $i <= $numpages; $i++) {
$year = isset($years[$i - 1]) ? $years[$i - 1] : $i; // **用年份替换页码**
$link = ($i == 1) ? get_permalink() : trailingslashit(get_permalink()) . $i . '/'; // **生成正确的分页链接**

if ($i == $page) {
echo '<span class="current">' . $year . '</span>'; // **当前页高亮**
} else {
echo '<a href="' . esc_url($link) . '">' . $year . '</a>';
}
}

echo '</div>';
}
?>

只需将代码粘贴到 WordPress 主题模板文件  page.php(页面模板文件) 中的 <?php the_content(); ?> 以下。

另外添加 CSS 样式(按钮样式代码):

.post-pagination {
text-align: center;
margin: 20px 0;
}

.post-pagination a {
display: inline-block;
padding: 8px 15px;
margin: 0 5px;
background-color: #007bff;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s ease;
}

.post-pagination a:hover {
background-color: #0056b3;
}

.post-pagination .current {
display: inline-block;
padding: 8px 15px;
margin: 0 5px;
background-color: #ff5733;
color: #ffffff;
border-radius: 5px;
font-weight: bold;
}

粘贴在 外观 - 自定义 - 额外 CSS 里,即可美化分页导航。

不得不说,有了 ChatGPT 等 AI 神器后,大大扩展了我们的 DIY 能力,不知道它的原理,你只需会提问和不停尝试修正就可以了。最近国产的 DeepSeek 火得很,你们有上手试用吗?


历史上的今天:

相关推荐

如何禁用 WordPress 在线安装、升级和编辑功能

之前因为访问时经常会跳转至无关网站,我把网站的 WordPress 程序在线安装、升级和编辑功能给禁用了。但考虑到安全问题,我今天解除此禁用,把网站程序更新升级到 WordPress 6.8.2 最新版本。 要禁用 WordPress 的在线安装、升级和编辑功能,可通过修改 wp-config.php 文件来实现。 1、禁止安装、升级、编辑主题和插件 ...

WordPress 建议更新 PHP 版本,推荐 8.3 或更高版本

将网站 WordPress 程序更新到 6.8.1 版本后,后台弹出了“建议更新 PHP 版本”对话框,提示:您的站点正在运行过时版本的 PHP(8.0.26),其无法接收安全更新,且应当被升级。 PHP 是用过搭建 WordPress 的编程语言之一,主机运营商一般已经设置了可使用于站点的 PHP 版本。平时我们都知道保持 WordPress、主题和插件处 ...

WordPress 网站如何开启维护模式?

网站因更新或维护等原因,会导致访问出错的情况,这时我们可能需要临时关闭网站。如果你的网站是用 WordPress 程序搭建的,则你可通过以下方法开启网站维护模式,给出一个维护提示的页面,以确保用户体验不受影响,同时也能够保护你的数据安全。 一、使用主题功能 许多 WordPress 主题都内置了“维护模式”的选项,我们 ...

WordPress 上传附件提示“父目录是否可以被服务器写入?”解决办法

昨天有空闲,对一个许久没有打理过的网站更新了一篇文章,但在上传附件时,提示错误:无法创建目录 uploads/2024/11。它的父目录是否可以被服务器写入? 尝试了几次都不行,就登录服务器查看目录写入权限。发现 /wp-content/ uploads/ 的权限是755,和其他网站的文件夹权限是一致的。 我又手动创建了 2024/11/ 文件夹, ...

暂无评论

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。