WordPress文章页左右两侧添加上下文翻页箭头按钮

 懿古今   2015-12-17 15:55:52 发布  技术文档

我不记得WordPress文章页左右两侧的上下文翻页箭头是从什么时候开始流行，不过我是从卢松松博客那里看到这个功能，原先我也一直都懒得折腾，直到无意中看到知更鸟博客的文章页也添加了这个上下文翻页功能，所以今天也顺便折腾一下，还是挺简单的。

WordPress文章页左右两侧添加上下文翻页箭头按钮

百度过相关内容，但是原先很多博客分享的技术都涉及到JS技术，今天研究了一番，其实实现这个WordPress文章页左右两侧的上下文翻页功能，根本就不需要用到JS技术，只需要用到几行代码和相应的CSS样式即可。

具体实现步骤如下（以Unite主题为例说明）：

1、打开Unite主题文件夹的single.php文件，找到以下代码：

  1. <nav class="nav-single">
  2.     <?php previous_post_link('<strong>上一篇：</strong> %link','%title',true,'') ?>
  3.     <?php next_post_link('<br/><strong>下一篇：</strong> %link','%title',true,'') ?>
  4.     <div class="clear"></div>
  5. </nav>

在上述代码下方添加以下代码：

  1. <nav class="nav-single-c">
  2.     <nav class="navigation post-navigation" role="navigation">
  3.         <h2 class="screen-reader-text">文章导航</h2>
  4.         <div class="nav-links">
  5.             <div class="nav-previous">
  6.                 <?php previous_post_link('%link','<span class="meta-nav-r" aria-hidden="true"><</span>',true,'') ?>
  7.             </div>
  8.             <div class="nav-next">
  9.                 <?php next_post_link('%link','<span class="meta-nav-l" aria-hidden="true">></span> ',true,'') ?>
  10.             </div>
  11.         </div>
  12.     </nav>
  13. </nav>

2、在Unite主题文件夹的style.css文件后面添加以下代码：

  1. /** 文章页左右翻页按钮 **/
  2. .nav-single-c a {
  3.     font-size: 50px;
  4.     color: #b6b6b6;
  5.     text-align: center
  6. }
  7. .nav-single-c a:hover {
  8.     color: #555
  9. }
  10. .meta-nav-l {
  11.     position: fixed;
  12.     right: 0;
  13.     top: 45%;
  14.     width: 50px
  15. }
  16. .meta-nav-r {
  17.     position: fixed;
  18.     left: 0;
  19.     top: 45%;
  20.     width: 50px
  21. }
  22. @media screen and (max-width:1300px) {
  23.     .nav-single-c a {
  24.         display: none
  25.     }
  26. }

至此，已经成功实现WordPress文章页左右两侧添加上下文翻页的功能。这个是比较简陋的，因为那个左右箭头是用英文状态的小于和大于号来代替的。如果我们使用了Font Awesome 4 Menus插件为导航菜单添加过个性化图标，那么我们就可以用个性化图标来代替那个小于号和大于号。只需要把第一步的代码改为以下代码即可：

  1. <nav class="nav-single-c">
  2.     <nav class="navigation post-navigation" role="navigation">
  3.         <h2 class="screen-reader-text">文章导航</h2>
  4.         <div class="nav-links">
  5.             <div class="nav-previous">
  6.                 <?php previous_post_link('%link','<span class="meta-nav-r" aria-hidden="true"><i class="fa fa-angle-left"></i></span>',true,'') ?>
  7.             </div>
  8.             <div class="nav-next">
  9.                 <?php next_post_link('%link','<span class="meta-nav-l" aria-hidden="true"><i class="fa fa-angle-right"></i></span> ',true,'') ?>
  10.             </div>
  11.         </div>
  12.     </nav>
  13. </nav>

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

你可能感兴趣的文章

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

发表评论

  1. videoclub
    videoclub @回复
    发表于2015-12-17 19:49  沙发

    很好的功能支持

    • 懿古今
      懿古今2015-12-18 09:01  回复

      @videoclub[呲牙] 一切为了方便大家连续阅读多篇文章

  2. 钓鱼小站
    钓鱼小站 @回复
    发表于2015-12-17 21:53  板凳

    很好的功能 博主高大上。。收下了

  3. 雅兮网
    雅兮网 @回复
    发表于2015-12-17 21:59  地板

    你还别说 我最近真的准备添加这个功能呢，感觉用户体验还是不错的

    • 懿古今
      懿古今2015-12-18 09:00  回复

      @雅兮网有空可以折腾一下，实现起来还是挺简单的，而且也挺方便用户连续看文章的

      • 雅兮网
        雅兮网2015-12-18 09:15  回复

        @懿古今哈哈，昨晚回去就添加了这个功能，老古有时间可以去帮忙测试一下 [偷笑]

        • 懿古今
          懿古今2015-12-18 12:38  回复

          @雅兮网今天早上回访的时候已经看到了，效果不错哦

  4. 辛永宝SEO博客
    辛永宝SEO博客 @回复
    发表于2015-12-17 22:21  4楼

    很细致 感谢分享 欢迎回访！

  5. 中国历史
    中国历史 @回复
    发表于2015-12-18 13:41  5楼

    不错，先收了

  6. 李阳博客
    李阳博客 @回复
    发表于2015-12-18 14:11  6楼

    挺实用的~

  7. 好书网
    好书网 @回复
    发表于2015-12-20 14:03  7楼

    这个都是通用的麽

  8. 守心斋
    守心斋 @回复
    发表于2015-12-26 13:47  8楼

    使用功能，先收藏了

    • 懿古今
      懿古今2015-12-27 22:30  回复

      @守心斋[流汗] 你们使用知更鸟Begin正版的主题，已经包含有这个功能了，我这个功能还是从你们那个主题搞过来的 [呲牙]

      • 守心斋
        守心斋2015-12-27 23:31  回复

        @懿古今呵呵，有和知道怎么弄是两回事 [得意] 。有你这个，去反查知更鸟的代码修改也快得多。

  9. 我爱动感单车网
    我爱动感单车网 @回复
    发表于2016-02-17 23:23  9楼

    [抓狂] 我的博客使用的是欲思主题模板，尝试着使用博主提供的这些代码，但显示出错（只能在同一个分类目录下的文章出现左右翻页尖头），不知问题究竟出在了哪，好不令人郁闷啊！

    • 懿古今
      懿古今2016-02-18 08:44  回复

      @我爱动感单车网[疑问] 这个还真不太了解，毕竟我对欲思主题不熟悉，或者到欲思作者博客看看是否有提供左右翻页的相关文章？

      • 我爱动感单车网
        我爱动感单车网2016-02-18 23:03  回复

        @懿古今限于自己的技术弄不来就算了吧，加上折腾来折腾去实在很花时间，倒不如利用这些时间干点别的事。

      • 我爱动感单车网
        我爱动感单车网2016-02-18 23:05  回复

        @懿古今再有，就我个人爱好，我觉得原来的“卢松松博客左右翻页功能”更符合我的心意，比较大气和引人注目！

  10. elvis
    elvis @回复
    发表于2016-02-25 14:12  10楼

    three主题添加了上面的代码，没用

    • 懿古今
      懿古今2016-02-26 08:40  回复

      @elvis请确保没有修改过主题，并按文章所示进行添加代码。PS：代码中默认是显示器的分辨率在1300像素以上才会显示哦。

  11. 余子酱
    余子酱 @回复
    发表于2016-04-26 14:55  11楼

    按你提供的代码是达不到和你的一样的效果，应该是最初的代码。我做了简单修改，但就是不知道，另外为什么有些文章，它不显示呢。你的网站不错，折腾够久，却实要做减法，回归初心。

    • 懿古今
      懿古今2016-04-26 15:19  回复

      @余子酱我现在的主题就是使用这些代码来实现的，没想修改过。

      • 余子酱
        余子酱2016-04-26 18:49  回复

        @懿古今知道原因了。这段代码的上下页，是针对当前文章分类目录下的所有文章。

  12. 烂番茄
    烂番茄 @回复
    发表于2017-01-22 22:54  12楼

    nice~ 不错哟！

  13. dddd
    dddd @回复
    发表于2017-08-16 13:46  13楼

    不错，谢谢分享~~~