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

2021-05-22 0 1,365 百度已收录

篇幅较长的文章阅读起来不是很利便,容易引起读者阅读疲劳而跳出页面,此时可以使用文章分页,将长篇幅的文章分成几页,一来可以对用户加倍友好,另外也可以在一定水平上增添网站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上也有利益,希望本文能够帮到人人。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 纯代码为WordPress添加文章分页功能 https://zhutizhen.com/14515.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章