WordPress小技巧：上一篇下一篇文章链接添加title属性

分类栏目：用户体验 - 前端开发

版权信息： 原创作品、版权所有，禁止匿名转载，分享请注明版权。

38095

发布于 34 条评论

wordpress-tips-next-post-title

最近有个朋友在学Wordpress时，期间问了我一个问题，当在文章页面添加上一篇和下一篇文章时，怎么没有title属性？我仔细一看还真没有，以前倒没注意到这个问题，于是在百度上搜索了一番，发现挺多人都有这方面的需求，但没有一个满意的答案，网上介绍的一种解决方法是修改Wordpress程序文件来实现，但我个人非常不喜欢。一则是程序的文件你最好别动，除非你想成为Wordpress的程序开发人员；二则是当你下次更新程序的时候，又得重新修改，太麻烦了，不适合我这种懒人。

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

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

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

<a href="……" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" > …… </a>
<a href="……" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" > …… </a>

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

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

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

替换成：

<?php
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
  <a title="<?php echo $prev_post->post_title; ?>" href="<?php%20echo%20get_permalink(%20$prev_post->ID%20);%20?>" rel="external nofollow"  rel="external nofollow" ><?php echo $prev_post->post_title; ?></a>
<?php endif; ?>
<?php
$next_post = get_next_post();
if (!empty( $next_post )): ?>
  <a title="<?php echo $next_post->post_title; ?>" href="<?php%20echo%20get_permalink(%20$next_post->ID%20);%20?>" rel="external nofollow"  rel="external nofollow" ><?php echo $next_post->post_title; ?></a>
<?php endif; ?>

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

好了，这个小技巧希望对大家有用。如果你有好的小技巧也可以和我们一起分享，让大家一起享受你的成就感。

相关推荐

全部评论 / 34

  1. 还可以用
    next_posts_link_attributes
    previous_posts_link_attributes
    两个函数

    phplog 2013-06-23
    20

  2. 这个有什么作用吗？个人觉得不重要！

    免费部落 2013-06-23
    19

  3. WP还是很给力的！以前常用他们家的！现在用的！比较少！

    罗曼诗 2013-06-23
    18

  4. 谷歌搜了下进来了。大牛。

    居里说 2013-06-23
    17

  5. 赶脚技术猿都是大神，领域内的大神， :cool:

    苏州亲密爱人 2013-06-23
    16

  6. :twisted: 感谢分享，可是试下

    那时年少 2013-06-23
    15

  7. 想没想过把最近文章的输出复制粘贴到日志下方？js取得文章Id判断前后，行不？

    小草元 2013-06-23
    14

  8. 主题自带，代码还是不要乱弄的好！

    我的名字叫麒 2013-06-23
    13

  9. 请问一下博主，标题滑动效果怎样制作，很酷啊！！

    sunny 2013-06-23
    12
    1. Javin

      是导航分类吗？用jquery实现。

      1号 Javin 2013-06-23

      1. 是随机文章和最新文章的标题向右滑动效果，求JS代码！！

        sunny 2013-06-23
        1. Javin

          这个不用js，是用css实现的，你可以看看样式代码。

          1号 Javin 2013-06-23

  10. 好久没更新了

    getlove 2013-06-23
    11

  11. 很多我们知晓的函数都有get_的形式来返回原内容，而不直接显示在网页上。

    tiandi 2013-06-23
    10
    1. Javin

      是啊。如果善于发现和使用这些函数，将可以可以实现更多人性化的东西。

      1号 Javin 2013-06-23

  12. 不错 学习了

    钻石画 2013-06-23
    9

  13. 好棒的一篇技术文，受教了

    ixwebhosting 2013-06-23
    8

  14. 不错

    萨顶顶 2013-06-23
    7

  15. 又学到一招了

    okgo社区 2013-06-23
    6

  16. :smile: 看了就回复一个 哈哈啊哈

    麦田一根葱 2013-06-23
    5

  17. 赞一个！
    用这种方法不仅可以加title，也可以用任意方式定义自己的翻页按钮了～

    哈哈胡子 2013-06-23
    4

  18. 我也写了一个上下文链接，不顾就是调用了默认函数

    大发 2013-06-23
    3
    1. Javin

      大发兄，推荐使用这种形式。嘿嘿！

      1号 Javin 2013-06-23

  19. 正缺解决方法，刚刚试用了一下，果然可以。赞一个，感谢javin的无私分享！

    攻城师 2013-06-23
    2