wordpress怎么实现文章分页

风浩君_3475

风浩君_3475

2019-12-25

6043人浏览

原创

wordpress怎么实现文章分页?

由于篇幅过长导致页面加载速度过慢,降低用户体验,所以必须要找个方法把长文章进行分页,搜索了一下,发现有个代码解决的方法非常好。经过亲自使用,确实有效,所以在这里分享出来,感兴趣的你可不要错过了哈

  推荐:《wordpress教程》

最近发现 有不少文章配上图片,写得比较长。这样会导致页面加载速度过慢,不利于用户体验。尤其是新添加的 wordpress主题 页面,虽然文字不多,可是每一款wordpress主题都要配上个小图片,才能让读者有个大概的了解。从而决定是否要进行演示。那么将近三十款wordpress主题加在一起,页面就非常的长。所以必须要找个方法把长文章进行分页。 

在谷歌上搜索了一下,发现有个代码解决的方法非常好。经过亲自使用,确实有效,所以在这里分享出来。 

一、添加分页按钮 

如果你不怕麻烦的话,可以在写文章的时候,切换到HTML模式,插入下面这行代码,就不需要添加这个分页按钮了。 

代码如下:

<p><!--nextpage--></p>

其实还是在编辑器上添加个分页按钮省事多了。以前也看到过通过修改代码来实在这个功能,不过我忘了。因为我一直用 wordpress编辑器增强插件:TinyMCE Advanced 。这个按钮早就有了,这里也不多说了。 

2012-06-17补充:给 WordPress 3.4 文本编辑器添加分页按钮 

由于我的 “非诚勿扰女嘉宾资料” fc.guansoft.com 网站也用了这篇文章中介绍的长文章分页代码。但那个站没有安装 TinyMCE Advanced 插件。所以还是上网找了个比较简单的方法在wordpress编辑器中添加这个分页按钮。方法如下: 

找到 /wp-includes/class-wp-editor.php 文件。查找 ‘wp_more’, 标签:(在366行处) 

代码如下:

$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', '¦', 'bullist', 'numlist', 'blockquote', '¦', 'justifyleft', 'justifycenter', 'justifyright', '¦', 'link', 'unlink', <span><strong><span>'wp_more',</span></strong></span> '¦', 'spellchecker', 'fullscreen', 'wp_adv' ), $editor_id);

在 ‘wp_more’ 后添加 ‘wp_page’, (含单引号和逗号)。修改后代码如下: 

代码如下:

$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', '¦', 'bullist', 'numlist', 'blockquote', '¦', 'justifyleft', 'justifycenter', 'justifyright', '¦', 'link', 'unlink', <span><strong><span>'wp_more','wp_page',</span></strong></span> '¦', 'spellchecker', 'fullscreen', 'wp_adv' ), $editor_id);

此时,你就可以在后台写文章及编辑文章页面的文本编辑器上看到一个跟 more 标签按钮相似的图标。 

同样,在代码编辑器也会相应出现一个 nextpage 按钮。 

二、添加分页功能 

wordpress其实自带分页功能的函数,只是没有被调用。所以我们在编辑文章的时候,明明插入了分页符,却看不到什么变化。要怎么样才能让调用这个函数呢?方法很简单,在主题模板文件 single.php 中找到类似下面这行代码。 

代码如下:

<?php  the_content(); ?>

在这行代码后面添加如下所示的代码,即可实现简单的分页功能。 

代码如下:

<?php  wp_link_pages(); ?>

三、美化分页效果 

Wordpress OAuth
Wordpress OAuth

启动并完成 WordPress.com OAuth 认证,通过 REST API 发布文章。适用于需要生成授权链接、交换授权码等场景。

下载

虽然经过上面两步,已经可以实现长文章的分页功能了。但是不是那么好看,下面我们就把它美化一下,让分页效果更完美。 

首先,把上一步的分页功能代码 替换为以下代码。 

代码如下:

<?php  wp_link_pages(array('before' => '<div>分页阅读:', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '上一页', 'nextpagelink' => "")); ?> <?php  wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'link_before' =>'<span>', 'link_after'=>'</span>')); ?> <?php  wp_link_pages(array('before' => '', 'after' => '</div>', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => "下一页")); ?>

接着,再对CSS样式进行美化。 

直接把下面这些代码,放到主题文件 style.css 最后面。 

代码如下:

/**页面分页**/ 
.fenye{text-align:center;margin:0px auto 10px;font-weight:bold} 
.fenye span{background-color:#DDDDDD;color:#fff;font-weight: bold;margin:0px 1px;padding:1px 6px;display:inline-block;text-decoration:none;border:1px solid #e0e0e0;} 
.fenye a{text-decoration:none;} 
.fenye a span{background-color:#F6F6E8;font-weight: normal;color: #000;text-decoration: none;} 
.fenye a:hover span{background-color:#DDDDDD;color: #fff;}

最后显示效果如下图所示: 

1fec300885675030ae2fb428c9655d1.png

四、解决文章分页后标题重复对SEO的影响 

由于长文章分页后,这几个页面的标题是一样的。会不会对SEO带来不利的影响,我也不清楚。还是避免一下吧!可以通过给 wordpress 文章分页添加页码,解决标题重复的问题。我们可以把改成如下所示的效果: 

简单实用的wordpress长文章分页代码 —冠朔wordpress插件 

简单实用的wordpress长文章分页代码-第2页 — 冠朔wordpress插件 

简单实用的wordpress长文章分页代码-第3页 — 冠朔wordpress插件 

在主题模板文件 header.php 找到类似

…… 代码,将其替换为如下代码。 

代码如下:

<?php  if ( is_single() ) { ?><title>
<?php  echo trim(wp_title('',0)); ?><?php  if (get_query_var('page')) { echo '-第'; echo get_query_var('page'); echo '页';}?> — <?php  bloginfo('name'); ?>
</title><?php  } ?>

五、避免Feed被分页 

实现分页功能后,会导致Feed页面的文章被分页,一般只显示第一页的内容。 

解决方法:打开 wp-includes 目录下的 query.php 文件,找到下面这行代码(大概在3578行) 

代码如下:

if ( strpos( $content,'' ) ) {

把它修改为下面这行代码。 

代码如下:

if ( strpos( $content, '<!--nextpage-->' ) && (!is_feed()) ) {

更多WordPress相关技术文章,请访问WordPress教程栏目:https://www.php.cn/cms/wordpress/

相关文章

WPS零基础入门到精通全套教程!
WPS零基础入门到精通全套教程!

全网最新最细最实用WPS零基础入门到精通全套教程!带你真正掌握WPS办公! 内含Excel基础操作、函数设计、数据透视表等

下载

相关标签:

wordpress

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Tailwind CSS 响应式布局怎么写
Tailwind CSS 响应式布局怎么写

Tailwind CSS 响应式布局通常从移动端样式写起,再用 sm、md、lg 等前缀调整不同屏幕宽度下的网格、间距和导航。本专题整理断点配置、Grid 与 Flex 自适应布局及常见溢出问题,帮助你逐步完成多设备适配。

2026.11.03

0

19

Tailwind CSS 常用类名怎么记
Tailwind CSS 常用类名怎么记

Tailwind CSS 类名很多,先按布局、间距、文字、颜色和状态分组记忆,再通过官方文档检索具体写法。本专题结合类名排序、动态拼接失效、自定义实用类等问题,帮助你建立常用类名的速查方法。

2026.11.03

0

12

码上飞入口地址合集
码上飞入口地址合集

本专题汇总了码上飞(CodeFlying)的官方入口地址合集,涵盖官网主站及网页版在线使用入口,支持注册登录后直接在线体验零代码AI应用生成。同时整理了APP端下载渠道与小程序入口,助你快速访问平台,通过自然语言描述需求即可生成应用、小程序或网站。

2026.11.03

0

10

Uvicorn 报错与问题解决教程
Uvicorn 报错与问题解决教程

本专题汇总了Uvicorn服务器常见问题与报错解决的教程合集,涵盖启动失败、端口占用、模块导入错误、事件循环冲突及热重载失效等典型故障的排查思路。同时整理了多进程与Worker配置、SSL/HTTPS证书报错、跨域与代理配置等实战解决方案,助你快速定位并解决Uvicorn运行中的各类问题。

2026.11.02

20

14

Uvicorn使用教程
Uvicorn使用教程

本专题汇总了Uvicorn使用教程与启动运行指南,涵盖其作为Python ASGI服务器的定位与特点,以及命令行启动(uvicorn main:app --reload)、参数配置(host/port/workers)、程序内嵌运行与Gunicorn结合部署等核心用法。同时整理了热重载调试、日志配置与生产环境部署优化等技巧,助你快速掌握Uvicorn的运行与配置。

2026.11.02

20

17

Uvicorn安装配置教程
Uvicorn安装配置教程

本专题汇总了Uvicorn的安装配置教程与部署指南,涵盖通过pip安装Uvicorn、启动FastAPI/Starlette应用、开发模式热重载(--reload)及多进程工作模式配置等核心操作。同时整理了结合Gunicorn的生产部署方案、HTTPS与反向代理配置及性能调优技巧,助你快速完成Uvicorn服务的安装与上线部署。

2026.11.02

20

17

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

120

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

100

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

300

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何在 Windows 11 上安装 XAMPP
如何在 Windows 11 上安装 XAMPP

共1课时 | 231人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 12万人学习