wordpress文章页下一篇和上一篇功能代码

作者: bkbtp 分类: 脚本 发布时间: 2018-06-03 13:22

wordpress提供了函数可以实现文章页的上一篇或下一篇功能,如下:

  • 上一篇
    <?php previous_post_link(); ?>
    或者
    <?php previous_post_link('上一篇: %link'); ?>
  • 下一篇
    <?php next_post_link(); ?>
    或者
    <?php next_post_link('下一篇:%link'); ?>

然而,由于 previous_post_linknext_post_link 函数的链接不带有 Title 属性,导致在点开“上一篇” “下一篇”之前并不知道文章的标题,用户体验不太好

这里分享一个自用的代码块解决方案:

  1. single.php 文件中加入如下代码
<nav class="post-navigation clearfix">
  <?php
  $prev_post = get_previous_post();
  if(!empty($prev_post)):?>
  <div class="nav-previous clearfix">
    <a title="<?php echo $prev_post->post_title;?>" href="<?php echo get_permalink($prev_post->ID);?>">< 上一篇</a>
  </div>
  <?php endif;?>
  <?php
  $next_post = get_next_post();
  if(!empty($next_post)):?>
  <div class="nav-next">
    <a title="<?php echo $next_post->post_title;?>" href="<?php echo get_permalink($next_post->ID);?>">下一篇 ></a>
  </div>
  <?php endif;?>
</nav>
  1. 自定义如下css样式
.post-navigation .nav-previous {
  float: left;
  text-align: left;
  max-width: 50%;
  background-color: rgba(255,255,255,0.6);
  border: 1px solid #e0e0e0;
  padding: 7px 18px;
}
.post-navigation .nav-next {
  float: right;
  text-align: right;
  max-width: 50%;
  background-color: rgba(255,255,255,0.6);
  border: 1px solid #e0e0e0;
  padding: 7px 18px;
}
.post-navigation a {
  color: #555;
}
如果想只显示当前分类下的上一篇和下一篇文章,可以使用 get_previous_post(TRUE)get_next_post(TRUE)
如果使用的 previous_post_link()next_post_link() 函数的话,把第三个参数设置为 TRUE 也可现实显示当前分类上下篇。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。