1. David Wu首页
  2. WordPress
  3. WordPress安装教程

纯代码为WordPress添加文章分页功能

篇幅较长的文章阅读起来不是很方便,容易引起读者阅读疲劳而跳出页面,此时可以使用文章分页,将长篇幅的文章分成几页,一来可以对用户更加友好,另外也可以在一定程度上增加网站 PV,本文就介绍如何使用代码给 wordpress 站点增加文章分页功能。有时候博主们会发布一些篇幅较长的文章,再加上配图什么的,就会出现页面加载速度过慢,用户需要滚动很多次鼠标才能看完,对用户不是太友好。此时我们就需要给文章进行分页,其实 WordPress 程序自带文章分页功能,你知道么?

WordPress 自带分页功能函数,但是很多主题并没有调用此功能,就算是我们添加了分页符,也不会出现分页效果。我们只需要在你的主题文章模板(多为 single.php)添加一段代码就可以了。在文章页模板(single.php)里只找到类似这段代码:

  1. <?php the_content(); ?>

在其后面添加下面这段代码就可以了。

  1. <?php wp_link_pages(); ?>

在编辑文章时,切换到 HTML 模式,插入如下代码到相应位置,文章就会自动分页,缺点是默认的分页样式不太美观,且每次都要切换编辑模式,不太方便。

  1. <p><!--nextpage--></p>

为了方便使用,我们可以将分页按钮集成到文章编辑框,在网站根目录找到 /wp-includes/class-wp-editor.php 文件。查找 ‘wp_more’,在 ‘wp_more’, 后添加 ‘wp_page’, (含单引号和逗号)。修改后代码如下:

  1. $mce_buttons = array( 'bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'hr', 'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'wp_page', 'spellchecker' );

这时候你就可以看到在文章编辑器上多了一个按钮,形状类似 more 按钮,就在它后面,而在 html 编辑器里也会出现一个 nextpage 按钮,使用的时候点击按钮就可以快速插入分页符号了。
纯代码为WordPress添加文章分页功能-云模板上文所述只是简单的调取分页功能,如果你想让分页的样式美观,就需要我们稍微动动手了,下面以雅兮网的分页样式为例。首先将文章页的分页代码替换为如下代码(替换掉上文中的 <?php wp_link_pages(); ? >)

  1.     <!-- 文章分页 -->
  2.     <?php wp_link_pages(array('before' => '<div class="fenye">', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '<span>上一页</span>', 'nextpagelink' => "")); ?>
  3.     <?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'link_before' =>'<span>', 'link_after'=>'</span>')); ?>
  4.     <?php wp_link_pages(array('before' => '', 'after' => '</div>', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => "<span>下一页</span>")); ?>

然后在主题 style.css 样式表里添加下面的样式。

  1.     /*文章分页*/
  2.     .fenye{text-align: center;margin: 0px 10px;padding-right:20px;font-size: 16px;line-height: 50px;}
  3.     .fenye span{background: #2f889a; color: #fff; margin: 2px; line-height: 30px; cursor: pointer; padding: 0 12px; display: inline-block; border: 1px solid #2f889a; border-radius: 2px;}
  4.     .fenye a{text-decoration:none;}
  5.     .fenye a span{background-color:#F6F6E8;font-weight: normal;color: #000;text-decoration: none;}
  6.     .fenye a span:hover{background-color:#c73503;border:1px solid #c73503;color: #fff;}

之后效果就出来了,是不是美观很多呢?
纯代码为WordPress添加文章分页功能-云模板给长篇幅文章添加分页功能,可以在一定程度上减轻用户对长篇幅文字的抵触,对网站 PV 上也有好处,希望本文能够帮到大家。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/97768

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注