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

  • A+
所属分类:资源分享

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

需要用到函数

按照惯例,首先介绍一下需要用到的函数,如果你对函数不感兴趣,可以直接跳到下面的实现方法。

wordpress提供了不少函数可以实现这一功能,不过随着版本的升级,有些函数已经不被推荐使用。今天DDBug介绍的是两个最常用的函数previous_post_link和next_post_link:

previous_post_link的功能是显示上一篇文章,原型如下

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

第一个参数$format定义链接的格式或者说显示样式默认为    « %link  ,其中%link的内容在第二个参数中定义

第二个参数$link定义第一个参数中%link的显示内容,默认为%title,即文章标题,你也可以使用其它文字代替。

第三个参数$in_same_cat定义是否只显示同一分类下的文章,默认为否,即显示全部文章。

第四个参数$excluded_categories定义排除的分类ID,即不显示这些分类ID下的文章。

下面例举几个常用实例,来加深对这个函数的理解
代码:

  1. <?php previous_post_link(); ?>  

效果:« 上一篇文章标题

代码:

  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
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar
埃微I5plus
十年沉船,苍苔不生。
十年·肖申克的救赎影评
被禁忌的游戏评论: 我是否该写一篇悲伤的乐评

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:5   其中:访客  4   博主  1

    • avatar caofun 0

      评论模板能分享下吗

      • avatar 鱼雁可 0

        评论” />

        • avatar 两天 Admin

          怎么只调用地址哇???

          • avatar 小编 0

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

            • avatar pysklodzvb 0

              垃圾评论。。。