WordPress中给文章添加“上一篇 下一篇”功能

两天
两天
管理员
731
文章
0
粉丝
资源分享561,8046字数 1381阅读4分36秒阅读模式

在浏览别人的网站或博客的时候,经常会看到在文章的上方或文章下方有“上一篇 下一篇”这样的链接。如果你正在使用wordpress,而使用的主题又没有提供这样一个功能,在你看完这篇文章之后,就可以自己手动修改主题,实现这一功能。

需要用到函数

按照惯例,首先介绍一下需要用到的函数,如果你对函数不感兴趣,可以直接跳到下面的实现方法。文章源自两天的博客-https://2days.org/430.html

wordpress提供了不少函数可以实现这一功能,不过随着版本的升级,有些函数已经不被推荐使用。今天DDBug介绍的是两个最常用的函数previous_post_link和next_post_link:文章源自两天的博客-https://2days.org/430.html

previous_post_link的功能是显示上一篇文章,原型如下文章源自两天的博客-https://2days.org/430.html

  1. previous_post_link($format='« %link', $link='%title', $in_same_cat = false, $excluded_categories = '')  

第一个参数$format定义链接的格式或者说显示样式默认为    « %link  ,其中%link的内容在第二个参数中定义文章源自两天的博客-https://2days.org/430.html

第二个参数$link定义第一个参数中%link的显示内容,默认为%title,即文章标题,你也可以使用其它文字代替。文章源自两天的博客-https://2days.org/430.html

第三个参数$in_same_cat定义是否只显示同一分类下的文章,默认为否,即显示全部文章。文章源自两天的博客-https://2days.org/430.html

第四个参数$excluded_categories定义排除的分类ID,即不显示这些分类ID下的文章。文章源自两天的博客-https://2days.org/430.html

下面例举几个常用实例,来加深对这个函数的理解
代码:文章源自两天的博客-https://2days.org/430.html

  1. <?php previous_post_link(); ?>  

效果:« 上一篇文章标题文章源自两天的博客-https://2days.org/430.html

代码:文章源自两天的博客-https://2days.org/430.html

  1. <?php previous_post_link('上一篇: %link'); ?>  

效果:上一篇:上一篇文章标题

代码:

  1. <?php previous_post_link('%link','上一篇'); ?>  

效果:上一篇
另一个函数next_post_link的作用是显示下一篇文章的链接,原型如下:

  1. next_post_link($format='%link »', $link='%title', $in_same_cat = false, $excluded_categories = '')  

该函数的参数和previous_post_link函数的参数是一样的,请参看上面对previous_post_link参数的说明。结合上面的实例,下面是与其对应的显示下一篇文章链接的参考实例:

代码:

  1. <?php next_post_link(); ?>  

效果:下一篇文章标题»

代码:

  1. <?php next_post_link('下一篇:%link'); ?>

效果:下一篇:下一篇文章标题

代码:

  1. <?php next_post_link('%link','下一篇'); ?>  

效果:下一篇

如果你想进一步了解previous_post_link和next_post_link,可以参看它们的源代码:wp-includes\link-template.php

实现方法
在你的模板文件夹下找到single.php文件,用文本编辑器打开,先找到Loop循环的位置,一般以下面这段代码开始

  1. <?php if (have_posts()) : ?>  
  2. <?php while (have_posts()) : the_post(); ?>  

然后在其后的适当位置(一般在标题上面或者文章结束的下方)中加入如下代码

  1. <div class="nearbypost">    
  2. <div class="alignleft"><?php previous_post_link('« « %link'); ?></div>    
  3. <div class="alignright"><?php next_post_link('%link  » » '); ?></div>    
  4. </div> 

你可以通过CSS定义表现样式,比如我的CSS样式是这样定义的

  1. .alignleft {  
  2.  float:left;  
  3.  text-align:left;  
  4.  margin-right:10px;  
  5. }  
  6. .alignright {  
  7.  float:rightright;  
  8.  text-align:rightright;  
  9.  margin-left:10px;  
  10. }  

这样的效果就是:上一篇的链接对齐到左边,下一篇的链接对齐到右边,效果如下:

« « 上一篇文章标题 下一篇文章标题 » »

高级应用
或许你有这样一个想法:我不想显示文章标题,只显示“上一篇 下一篇”,当鼠标经过的时候在提示中显示文章标题.由于函数的源代码中,没有对链接添加”title”属性,所以要想实现这样一个功能,就需要修改源代码:

找到wp-includes目录下的link-template.php文件,并用文本编辑器打开
查找adjacent_post_link的函数定义位置

  1. function adjacent_post_link($format$link$in_same_cat = false, $excluded_categories = ''$previous = true) {  

在这个函数的定义体中,你会发现这样一行

  1. $string = '<a href="'.get_permalink($post).'">';</a><a title="'.$title.'" href="'.get_permalink($post).'">';</a>  

把它修改成

  1. $string = '<a title="'.$title.' href="'.get_permalink($post).'">';</a><a title="'.$title.'" href="'.get_permalink($post).'">';</a>   

这样修改以后,再调用previous_post_link和next_post_link函数时,就会在提示中显示文章标题。我们就可以这样调用

  1. <div>    
  2. <div><?php previous_post_link('«« %link','上一篇'); ?></div>    
  3. <div><?php next_post_link('%link  » » ','下一篇'); ?></div>    
  4. </div>    

这样就达成了我们的目的。

或许还有其它方法或以实现,欢迎讨论O(∩_∩)O~

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
312379857
微信号已复制
←QQ扫一扫添加QQ好友
版权声明:本站原创文章转载请注明文章出处及链接,谢谢合作!
广告也精彩
 最后更新:2014-6-4
  • wordpress
  • wp
  • 函数
  • 调用
  • 文章
  • 上一篇 下一篇
评论  5  访客  4  作者  1
    • caofun
      caofun 1

      评论模板能分享下吗

      • 鱼雁可
        鱼雁可 0

        comment” />

        • 两天
          两天

          怎么只调用地址哇???

          • 小编
            小编 0

            需要这个功能 , 膜拜一下 哈哈

            • pysklodzvb
              pysklodzvb 0

              垃圾评论。。。

            匿名

            发表评论

            匿名网友
            :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
            确定

            拖动滑块以完成验证