我们大多数的 WordPress 主题都有文章分页的功能,但是都没有【阅读全文】的功能按钮,如果只是分页 1 到 3 页倒是无所谓,但是如果分成很多页的话,为了提高用户体验,个人认为很有必要在文章分页码旁边增加一个【阅读全文】的按钮。今天就跟大家说一说如何在 WordPress 文章分页中添加【阅读全文】按钮。
大概的实现思路:
为分页文章增加一个【阅读全文】按钮,这个按钮的链接地址就是在该文章的链接地址后面增加/all,然后通过判断该文章的链接地址后面是否为 all,如果是就显示全文,去除分页代码;如果不是就跟平时一样显示分页代码。
在WordPress文章分页中添加【阅读全文】按钮的详细步骤:
PS:本文以Nana 主题为例说法,方法适用于懿古今折腾的主题,包括Unite 主题和Three 主题,其他主题请大家参考修改实现。
1、在主题的 functions.php 最后一个?>前面添加以下代码:
- /*
- * 懿古今博客分享
- * 如何在 WordPress 文章分页中添加【阅读全文】按钮
- * https://www.yigujin.cn/786.html
- */
- add_filter('the_content', 'allpage_show', 0);
- function allpage_show($content) {
- global $posts,$domain;
- $url=home_url(add_query_arg(array()));
- $short_url = str_replace( array( 'http://', 'www.' ), '', $url );
- $short_url = untrailingslashit( $short_url );
- $strdomain = explode("/",$short_url);
- $domain = $strdomain[2];
- if ($domain=='all') {
- $content = $posts[0]->post_content;
- $content = str_replace( "<!--nextpage-->", '<div id="quanwen"></div>', $content );
- }
- return $content;
- }
- add_action('init', 'allpage_permalink', -1);
- function allpage_permalink() {
- global $wp_rewrite;
- $wp_rewrite->add_endpoint("all", EP_ALL);
- $wp_rewrite->flush_rules();
- }
其中文章分页后的地址是 https://www.yigujin.cn/659.html/2 这种格式的(就是页码在第二个斜杠/后面的)就不用修改,要不然请自行修改代码$domain = $strdomain[2]; 中的 2,如是在第三个斜杠/后面,就将 2 改为 3,以此类推。
PS:WordPress 的固定连接是自定义结构:https://www.yigujin.cn/%post_id%.html,经测试有效可用,其他结构的请自行测试。
2、在主题的 single.php 文件中找到以下代码:
- <?php wp_link_pages(array('before' => '<div class="page-links">', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '<span>上一页</span>', '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' => "<span>下一页</span>")); ?>
替换为以下代码:
- <?php global $domain; if($domain != 'all'){?>
- <div class="page-links">
- <?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '<span>上一页</span>', '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' => '', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => "<span>下一页</span>")); ?>
- <?php if ( $numpages > '1' ) {?>
- <a href="<?php the_permalink() ?>/all#quanwen"><span>阅读全文</span></a>
- <?php } ?>
- </div>
- <?php } ?>
到了这里,我们就已经成功为 Nana 主题的文章分页功能添加了【阅读全文】的按钮。我们只需要在编辑文章的时候,把光标停放在想要分页的地方,点击一下“分页符”按钮即可分页。只要文章有分页的,就会出现【阅读全文】按钮。
本办法已经在懿古今和boke112 导航两个站点成功运行,具体效果请点击本文的【阅读全文】按钮试试。
温馨提示:
本办法于 2016 年 9 月 30 日更新代码以实现点击【阅读全文】按钮时直接跳转到第二页的内容,不用再重头看起,不过有一个缺点,那就是如果顶端的导航菜单是固定悬浮的话,会遮挡到第二页部分内容(遮挡多少视导航菜单高度而定),对于导航菜单不悬浮的站点无影响。
《如何在WordPress文章分页中添加阅读全文按钮》第二页测试内容:
其实,WordPress 文章分页功能及阅读全文功能,早已有相应的插件,比如 WordPress 文章分页插件:Multi-page Toolkit,它就有这个【阅读全文】的功能按钮,如果不想折腾代码的建议直接安装这个插件就行。不过由于这个插件的很多页码样式我都不喜欢,而我只想在文章分页中添加一个【阅读全文】按钮而已。所以我就提取这个 Multi-page Toolkit 插件关于【阅读全文】按钮的部分代码,然后反复折腾而成。
发表于2016-06-10 09:37 沙发
不的教程工具
发表于2016-06-10 13:17 板凳
不错!等需要时拿走!
发表于2016-06-10 13:44 地板
厉害!现在会分享实用技巧的博文不多了!
@Koolight[呲牙] 我都是折腾什么就分享什么
发表于2016-06-10 14:50 4楼
因为篇幅不是很多,用到的很少,谢谢分享了
@野人摊是的,现在的文章一般都避免出现太长的内容,一般人还真没耐心看完太长的文章
发表于2016-06-10 19:12 5楼
这个可以有,加了个全局变量和一个if语句判断,适用于任何主题。不错,有时间加上!
@热腾网如果经常发表长篇文章的的,增加一个阅读全文的按钮还是挺有必要的
发表于2016-06-10 19:37 6楼
[强]
发表于2016-06-11 18:25 7楼
[微笑] 前阶段一直想找个页面分页教程,然后都没去找。
@橘子书 一般主题都有文章分页功能,只是缺少这个【阅读全文】的按钮而已
发表于2016-06-12 10:37 8楼
最讨厌文章分页,现在这个年代,多加载的那点文章内容根本消耗不了多少资源,图片可以动态加载……
@瑾瑜一般情况下都不用分页,因为文章内容一般都不是很多,只有长篇大论的时候才建议用分页
发表于2016-06-15 16:05 9楼
分页功能是歧途,希望你不要在错误的道路上越走越远。
@大致[呲牙] 我的绝大部分文章都不会很长,所以也用不上分页功能,这个只是无聊之余折腾一下而已
发表于2016-09-04 22:44 10楼
我的已经确认可行了!
刚写了篇文章,有点长,就借鉴了这篇文章,OK!
@南通SEO虽然很少用到这个,但是个人觉得有好过没有,毕竟有时候也是要分页的
发表于2016-09-29 22:34 11楼
已添加,就是咳咳,分页的CSS……嘿嘿,可否分享下? [坏笑]
@破小懿CSS代码直接查看元素就可以看到了
发表于2016-09-29 22:45 12楼
这里有个BUG,嗯,算是BUG吧……就是点击阅读全文,应该是接着第一页阅读余下全文,这里点击的话,是加载了全文,等于又从头开始阅读了……这能解决么? [可怜]
@破小懿已经更新代码,可以从第二页接着阅读
发表于2017-01-06 09:51 13楼
固定连接必须像你这样的,否则404;回后台“保存设定”方可恢复…
@…本文是适应我这种固定连接结构,其他结构的请自行研究