如何在WordPress文章分页中添加「阅读全文」按钮

 懿古今   2018-11-28 15:23:59 更新  技术文档

我们大多数的 WordPress 主题都有文章分页的功能，但是都没有【阅读全文】的功能按钮，如果只是分页 1 到 3 页倒是无所谓，但是如果分成很多页的话，为了提高用户体验，个人认为很有必要在文章分页码旁边增加一个【阅读全文】的按钮。今天就跟大家说一说如何在 WordPress 文章分页中添加【阅读全文】按钮。

如何在 WordPress 文章分页中添加【阅读全文】按钮

大概的实现思路：

为分页文章增加一个【阅读全文】按钮，这个按钮的链接地址就是在该文章的链接地址后面增加/all，然后通过判断该文章的链接地址后面是否为 all，如果是就显示全文，去除分页代码；如果不是就跟平时一样显示分页代码。

在WordPress文章分页中添加【阅读全文】按钮的详细步骤：

PS：本文以Nana 主题为例说法，方法适用于懿古今折腾的主题，包括Unite 主题和Three 主题，其他主题请大家参考修改实现。

1、在主题的 functions.php 最后一个?>前面添加以下代码：

  1. /*
  2. * 懿古今博客分享
  3.  * 如何在 WordPress 文章分页中添加【阅读全文】按钮
  4.  * https://www.yigujin.cn/786.html
  5.  */
  6. add_filter('the_content', 'allpage_show', 0);
  7. function allpage_show($content) {
  8. global $posts,$domain;
  9. $url=home_url(add_query_arg(array()));
  10. $short_url = str_replace( array( 'http://', 'www.' ), '', $url );
  11. $short_url = untrailingslashit( $short_url );
  12. $strdomain = explode("/",$short_url);
  13. $domain = $strdomain[2];
  14. if ($domain=='all') {
  15. $content = $posts[0]->post_content;
  16. $content = str_replace( "<!--nextpage-->", '<div id="quanwen"></div>', $content );
  17. }
  18. return $content;
  19. }
  20. add_action('init', 'allpage_permalink', -1);
  21. function allpage_permalink() {
  22.     global $wp_rewrite;
  23.     $wp_rewrite->add_endpoint("all", EP_ALL);
  24.     $wp_rewrite->flush_rules();
  25. }

其中文章分页后的地址是 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 文件中找到以下代码：

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

替换为以下代码：

  1. <?php global $domain; if($domain != 'all'){?>
  2. <div class="page-links">
  3. <?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '<span>上一页</span>', 'nextpagelink' => "")); ?>
  4. <?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'link_before' =>'<span>', 'link_after'=>'</span>')); ?>
  5. <?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => "<span>下一页</span>")); ?>
  6. <?php if ( $numpages > '1' ) {?>
  7. <a href="<?php the_permalink() ?>/all#quanwen"><span>阅读全文</span></a>
  8. <?php } ?>
  9. </div>
  10. <?php } ?>

到了这里，我们就已经成功为 Nana 主题的文章分页功能添加了【阅读全文】的按钮。我们只需要在编辑文章的时候，把光标停放在想要分页的地方，点击一下“分页符”按钮即可分页。只要文章有分页的，就会出现【阅读全文】按钮。

如何在 WordPress 文章分页中添加【阅读全文】按钮 第 2 张

如何在 WordPress 文章分页中添加【阅读全文】按钮 第 3 张

添加【阅读全文】按钮后的效果图

本办法已经在懿古今和boke112 导航两个站点成功运行，具体效果请点击本文的【阅读全文】按钮试试。

温馨提示：

本办法于 2016 年 9 月 30 日更新代码以实现点击【阅读全文】按钮时直接跳转到第二页的内容，不用再重头看起，不过有一个缺点，那就是如果顶端的导航菜单是固定悬浮的话，会遮挡到第二页部分内容（遮挡多少视导航菜单高度而定），对于导航菜单不悬浮的站点无影响。

本文地址：https://www.yigujin.cn/786.html

1 2 下一页阅读全文

你可能感兴趣的文章

文章标签： ,   ,   ,  
版权声明：本文为原创文章，版权归 懿古今 所有，欢迎分享本文，转载请保留出处！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请发邮件至[email protected]，确认后马上更正、删除，谢谢！

发表评论

  1. sugarhosts
    sugarhosts @回复
    发表于2016-06-10 09:37  沙发

    不的教程工具

  2. 小C博客
    小C博客 @回复
    发表于2016-06-10 13:17  板凳

    不错！等需要时拿走！

  3. Koolight
    Koolight @回复
    发表于2016-06-10 13:44  地板

    厉害！现在会分享实用技巧的博文不多了！

  4. 野人摊
    野人摊 @回复
    发表于2016-06-10 14:50  4楼

    因为篇幅不是很多,用到的很少,谢谢分享了

    • 懿古今
      懿古今2016-06-10 16:39  回复

      @野人摊是的，现在的文章一般都避免出现太长的内容，一般人还真没耐心看完太长的文章

  5. 热腾网
    热腾网 @回复
    发表于2016-06-10 19:12  5楼

    这个可以有，加了个全局变量和一个if语句判断，适用于任何主题。不错，有时间加上！

    • 懿古今
      懿古今2016-06-10 21:07  回复

      @热腾网如果经常发表长篇文章的的，增加一个阅读全文的按钮还是挺有必要的

  6. 微西风博客
    微西风博客 @回复
    发表于2016-06-10 19:37  6楼

    [强]

  7. 橘子书
    橘子书  @回复
    发表于2016-06-11 18:25  7楼

    [微笑] 前阶段一直想找个页面分页教程，然后都没去找。

    • 懿古今
      懿古今2016-06-12 10:45  回复

      @橘子书 一般主题都有文章分页功能，只是缺少这个【阅读全文】的按钮而已

  8. 瑾瑜
    瑾瑜 @回复
    发表于2016-06-12 10:37  8楼

    最讨厌文章分页，现在这个年代，多加载的那点文章内容根本消耗不了多少资源，图片可以动态加载……

    • 懿古今
      懿古今2016-06-12 10:42  回复

      @瑾瑜一般情况下都不用分页，因为文章内容一般都不是很多，只有长篇大论的时候才建议用分页

  9. 大致
    大致 @回复
    发表于2016-06-15 16:05  9楼

    分页功能是歧途，希望你不要在错误的道路上越走越远。

    • 懿古今
      懿古今2016-06-18 20:45  回复

      @大致[呲牙] 我的绝大部分文章都不会很长，所以也用不上分页功能，这个只是无聊之余折腾一下而已

  10. 南通SEO
    南通SEO @回复
    发表于2016-09-04 22:44  10楼

    我的已经确认可行了！
    刚写了篇文章，有点长，就借鉴了这篇文章，OK！

    • 懿古今
      懿古今2016-09-05 11:04  回复

      @南通SEO虽然很少用到这个，但是个人觉得有好过没有，毕竟有时候也是要分页的

  11. 破小懿
    破小懿 @回复
    发表于2016-09-29 22:34  11楼

    已添加，就是咳咳，分页的CSS……嘿嘿，可否分享下？ [坏笑]

  12. 破小懿
    破小懿 @回复
    发表于2016-09-29 22:45  12楼

    这里有个BUG，嗯，算是BUG吧……就是点击阅读全文，应该是接着第一页阅读余下全文，这里点击的话，是加载了全文，等于又从头开始阅读了……这能解决么？ [可怜]

  13. …
    … @回复
    发表于2017-01-06 09:51  13楼

    固定连接必须像你这样的,否则404;回后台“保存设定”方可恢复…

    • 懿古今
      懿古今2017-01-06 14:21  回复

      @…本文是适应我这种固定连接结构，其他结构的请自行研究