注册 登录
  • 亦之博客- 最专业的wordpress主题免费收集分享平台,WordPress免费主题应有尽有!http://yizhiboke.com
  • 公告:网站最近做了下固定链接,如有访问却看不到的文章可以在网址后缀加.html.
  • 秀人蜜| 秀人网倾力打造最有视觉效果的美女图片网站——www.xiuren.me
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏 亦之博客
  • 一秒钟记住我们的网址:www.yizhiboke.com

WordPress文章如何实现上下篇按钮并带有特色图像

我们大多数 WordPress 站点的文章上下篇都是只显示相应的标题而已,因为我们大多数主题都是直接使用 WordPress 官方提供的 previous_post_link() 与 next_post_link() 这两个函数标签来制定当前文章的上下篇文章。如果想要上下篇实现带有特色图像,我们应该如何实现呢?
WordPress文章如何实现上下篇按钮并带有特色图像

上图就是简单的对比图,CSS 样式还没有调整,大家喜欢这个功能的话,可以根据自己站点的特色调整相应的 CSS 样式,今天本文只跟大家分享如何实现上下篇带有特色图像。

1、自定义一个获取特色图像的函数

WordPress 的 get_the_post_thumbnail 函数只能获取文章的特色图像,如果文章没有特色图像的话就没有图像显示,这样看起来会很别扭,所以我们需要重新定义一个函数:存在特色图像就显示特色图像,不存在特色图像就显示文章第一张图片;文章没有特色图像和图片的情况下,就显示随机问题。

将以下代码添加到当前主题的 functions.php 文件即可

//上下篇缩略图
function ygj_catch_image($id){
    if (has_post_thumbnail($id)) {  echo get_the_post_thumbnail( $id, '', '' );
        } else {
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', get_post( $id )->post_content, $matches);
    $first_img = $matches [1] [0];
  if(empty($first_img)){ //Defines a default image
        $random = mt_rand(1, 10);
        $first_img= get_bloginfo ( 'stylesheet_directory' ).'/images/random/'.$random.'.jpg';
  }
  echo '<img class="home-thumb" src="'.$first_img.'" alt="'.get_post( $post_id )->post_title.'" />';
        }
}

其中随机图片是放在当前使用主题的 /images/random/ 文件夹下面,后缀名是 .jpg,总共 10 张图片,命名为 1、2、3、…、10。

2、在 single.php 文件的适当位置添加以下代码:

<div class="nav-single">
    <?php
        $current_category = get_the_category();//获取当前文章所属分类ID
        $prev_post = get_previous_post($current_category,'');//与当前文章同分类的上一篇文章
        $next_post = get_next_post($current_category,'');//与当前文章同分类的下一篇文章
    ?>
    <div class="meta-nav">
        <?php if (!empty( $prev_post )): ?>
        <a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php ygj_catch_image($prev_post->ID);?></a> <i class="fa fa-angle-left"></i> 上一篇 <a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php echo $prev_post->post_title; ?></a>
        <?php endif; ?>
    </div>
    <div class="meta-nav">
        <?php if (!empty( $next_post )): ?>
        <a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php ygj_catch_image($next_post->ID);?></a> 下一篇 <i class="fa fa-angle-right"></i> <a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a>
        <?php endif; ?>
    </div>
</div>

以上代码是显示同一分类的上下篇,如果不想显示同一分类的上下篇,可以直接把以下代码

<?php
    $current_category = get_the_category();//获取当前文章所属分类ID
    $prev_post = get_previous_post($current_category,'');//与当前文章同分类的上一篇文章
    $next_post = get_next_post($current_category,'');//与当前文章同分类的下一篇文章
?>

改为:

<?php
    $prev_post = get_previous_post();
    $next_post = get_next_post();
?>

即可。

总结

其实实现带有特色图像的方法还是很简单,只需要分别获得上下篇文章的链接地址、文章标题、特色图像,然后就可以自由组合了。本文重点分享的是方法和思路,其中获取特殊图像的函数还可以增加获取指定图片作为上下篇缩略图等,具体更多的做法和样式就靠大家发挥自己的想象了。

喜欢 (6)
[]
分享 (0)
admin
关于作者:
网络虽无边,处处皆是缘。君若有空余,不妨常来玩 www.yizhiboke.com
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址