WordPress上一篇、下一篇文章链接优化大全

投稿  龙笑天下 2016-09-05 阅读 286 次 评论 21 条

本文综合介绍 WordPress上一篇、下一篇文章链接的细节优化,如:给上一篇、下一篇文章链接加上title标题或缩略图;实现wordpress文章页调用同分类上/下一篇文章,以及优化当文章处于首篇或末篇时,上一篇、下一篇文章链接的显示空白。

WordPress上一篇、下一篇文章链接优化大全

1 上一篇、下一篇文章链接加上Title标题或缩略图

在wordpress中,文章页面添加的上一篇和下一篇文章链接,是没有title属性。那么如何加上title,甚至加上缩略图呢?@觉唯设计

好吧,仔细研究一下吧,一般我们添加上一篇和下一篇文章时的代码是这样子的:

  1. <?php previous_post_link('%link','<<') ?>
  2. <?php next_post_link('%link','>>') ?>

该代码最终解析出来的代码大概如下:

  1. <a href="……" rel="external nofollow" > …… </a>
  2. <a href="……" rel="external nofollow" > …… </a>

这样子的结构是非常简单,如果我要增加title、target等属性值时,单靠上面两个函数是办不到的。其实要解决这个问题很简单,不知道大家有没有接触到这两个函数:get_previous_postget_next_post。通过这两个函数我们可以获取到上一篇和下一篇文章的相关信息。大家可以到官网看看这两个函数的介绍。

好了,下面就来干货,说下解决问题的方法。只要将:

  1. <?php previous_post_link('%link','<<') ?>
  2. <?php next_post_link('%link','>>') ?>

替换成:

  1. <?php
  2. $prev_post = get_previous_post();
  3. if (!emptyempty$prev_post )): ?>
  4.   <a title="<?php echo $prev_post->post_title; ?>" href="<?php echo get_permalink( $prev_post->ID ); ?>" rel="prev"><?php echo $prev_post->post_title; ?></a>
  5. <?php endif; ?>
  6. <?php
  7. $next_post = get_next_post();
  8. if (!emptyempty$next_post )): ?>
  9.   <a title="<?php echo $next_post->post_title; ?>" href="<?php echo get_permalink( $next_post->ID ); ?>" rel="next"><?php echo $next_post->post_title; ?></a>
  10. <?php endif; ?>

通过上面的替换,问题就完美解决了。除了可以添加title属性外,大家如果有需要也可以加上新窗口打开的属性:target="_blank"

也可以给上一篇、下一篇文章链接加上缩略图,给个参考例子:@segmentfault

  1. <?php
  2.     $current_category=get_the_category();
  3.     $prev_post = get_previous_post($current_category,'');
  4.     $next_post = get_next_post($current_category,'');
  5. ?>
  6. <div class="previous_post_link fl">
  7.     <?php if (!emptyempty$prev_post )): ?>
  8.         <a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php echo get_the_post_thumbnail( $prev_post->ID, '''' ); ?></a>
  9.  上一篇: <a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php echo $prev_post->post_title; ?></a>
  10.     <?php endif; ?>
  11. </div>
  12. <div class="next_post_link fr">
  13.     <?php if (!emptyempty$next_post )): ?>
  14.         <a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo get_the_post_thumbnail( $next_post->ID, '''' ); ?></a>
  15.  上一篇: <a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a>
  16.     <?php endif; ?>
  17. </div>

2 优化当文章处于首篇或末篇时,上一篇、下一篇文章链接显示空白的问题

如果调用的是wordpress的默认函数,当文章处于首篇或末篇时,上一篇、下一篇文章链接会显示空白,那么如何优化呢?

其实只需增加一个判断就行:@博客吧

  1. <?php if (get_previous_post()) { previous_post_link('上一篇: %link');} else {echo "已是最后文章";} ?>
  2. <?php if (get_next_post()) { next_post_link('下一篇: %link');} else {echo "已是最新文章";} ?>

方法1也需要此优化,这里就不赘述了,照着这个方法修改就行了。

3 WordPress文章页调用同分类上/下一篇文章

WordPress如何实现同一分类的上下篇功能呢?

我们绝大部分WordPress博客,在每一篇文章的尾部都有这么一个功能,那就是“上一篇”和“下一篇”,但是绝大部分都是直接使用默认的功能,也就是按post_ID排的,导致“上一篇”和“下一篇”与看到的文章并不是同一分类。而对于想连续浏览同分类的文章的上一篇或下一篇时,这种方式是不大适合的!所以今天就跟大家分享一下WordPress如何实现同一分类的上下篇功能。@boke112

首先我们需要了解 next_post_link() 和 previous_post_link() 这两个函数的用法(更具体的用户及说明请找度娘哦),如next_post_link()的定义:

  1. function next_post_link($format='%link &raquo;', $link='%title', $in_same_cat =false,$excluded_categories = '') {
  2.    adjacent_post_link($format$link$in_same_cat,$excluded_categories,false);
  3.    }

从定义可以看到有4个参数,第一个参数是指定格式,第二个参数是指定标题,第三个参数就表示在不在同一类中寻找,默认为false即不同类,第四个参数表示是不是排除某一类;previous_post_link() 的定义也是类似的。

例如:把 next_post_link(‘下一篇:%link’) 改成 next_post_link(‘下一篇:%link’,’%title’,true,’’) 就可以在同一类中跳转了。previous_post_link() 也是同样的办法,直接改为 previous_post_link(‘上一篇:%link’,’%title’,true,’’) 。

下面提供一个完整的调用同分类上一篇/下一篇文章的例子:

  1. <?php
  2. $categories = get_the_category();
  3.         $categoryIDS = array();
  4.         foreach ($categories as $category) {
  5.             array_push($categoryIDS$category->term_id);
  6.         }
  7.         $categoryIDS = implode(","$categoryIDS);
  8. ?>
  9. <?php if (get_previous_post($categoryIDS)) { previous_post_link('上一篇: %link','%title',true);} else { echo "已是最后文章";} ?>
  10. <?php if (get_next_post($categoryIDS)) { next_post_link('上一篇: %link','%title',true);} else { echo "已是最新文章";} ?>

友情提示:如果要加上title、缩略图,请参考方法1。

4 调用同分类上/下一篇文章且加上Title和优化了空白

懒人专用版...

  1. <?php
  2.     $current_category=get_the_category();
  3.     $prev_post = get_previous_post($current_category,'');
  4.     $next_post = get_next_post($current_category,'');
  5. ?>
  6. <div class="navigation-left">
  7.     <?php if (!emptyempty$prev_post )): ?>
  8.         <span>上一篇:<a title="<?php echo $prev_post->post_title; ?>" href="<?php echo get_permalink( $prev_post->ID ); ?>" rel="prev" ><?php echo $prev_post->post_title; ?></a></span>
  9.     <?php else: ?>
  10.         <span>上一篇:没有了,已经是第一篇了</span>
  11.     <?php endif; ?>
  12. </div>
  13. <div class="navigation-right">
  14.     <?php if (!emptyempty$next_post )): ?>
  15.         <span>下一篇:<a title="<?php echo $next_post->post_title; ?>" href="<?php echo get_permalink( $next_post->ID ); ?>" rel="next" ><?php echo $next_post->post_title; ?></a></span>
  16.     <?php else: ?>
  17.         <span>没有了,已经是最新一篇了</span>
  18.     <?php endif; ?>
  19. </div>

好了,具体效果参考本站的文章页,这个小技巧希望对大家有用。

本文地址:http://boke112.com/3451.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙笑天下 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana
CPA教学与引流技巧

发表评论

呲牙憨笑坏笑偷笑色微笑抓狂睡觉酷流汗鼓掌大哭可怜疑问晕惊讶得意尴尬发怒奋斗衰骷髅啤酒吃饭礼物强弱握手OKNO勾引拳头差劲爱你

表情

  1. Koolight
    Koolight 【省长】 @回复

    添加按钮,可怎么显示得漂亮就不好调了。

    • boke112导航
      boke112导航【站长】 @回复

      @Koolight CSS的调整确实是最繁琐的,调样式比实现功能更耗时

  2. 博主叟
    博主叟 【村长】 @回复

    另外,开始使用博主叟留言

  3. 本质游戏
    本质游戏 【村长】 @回复

    首先,这是我最后一次用本质游戏留言

  4. 金榜台博客
    金榜台博客 【县长】 @回复

    挺实用的,可惜用不上啊

  5. 明月登楼
    明月登楼 【总理】 @回复

    值得收藏的代码!

  6. 雅兮网
    雅兮网 【省长】 @回复

    这个攻略很强大,上下页这一块的内容基本上覆盖了,赞~!

  7. 小萝博客
    小萝博客 【市长】 @回复

    自带有吧

  8. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

    [微笑] 我对于自己博客目前的样式还算满意,更深层次的优化和美化暂时不考虑了。

  9. benen005
    benen005 【镇长】 @回复

    确实不错

  10. 管家婆
    管家婆 【镇长】 @回复

    php都是大神啊

  11. 微西风博客
    微西风博客 【市长】 @回复

    Zblog不能在文章页面,调用同分类的文章

  12. 小韭菜
    小韭菜 【农民】 @回复

    感谢分享

  13. 爱时尚
    爱时尚 【市长】 @回复

    虽然不一定用的上,还是要感谢分享

  14. 爱眼博客
    爱眼博客 【农民】 @回复

    来学习一下

  15. 博客114导航
    博客114导航 【镇长】 @回复

    感谢分享

  16. 刘传鹏博客
    刘传鹏博客 【镇长】 @回复

    写的很好,感谢分享