WordPress文章缩略图

好的文章需要一个配图,不仅仅是为文章增加可读性,也为网站的可用性和外观增色。很多人写博客的时候不怎么注重文章配图,更不用说添加推荐图片了。本文将给你一个更好的Wordpress文章缩略图解决方案。

WordPress文章缩略图的显示思路如下:

  1. 首先是文章的自定义字段“thumbnail”,如果有,则输出这个值
  2. 接着是文章的手动添加推荐图片,即特色缩略图,如果有,则输出缩略图地址
  3. 如果以上都找不到,那么使用正则寻找正文的所有内容,发现img标签时,则获取第一个匹配的图片地址
  4. 最后是上面都找不到图片,则使用随机数输出指定的图片,或者也可以干脆什么都不输出。

代码如下:

function post_thumbnail_src(){
//Post Thumbnail From qdkfweb.cn
global $post;
if( $values = get_post_custom_values("thumbnail") ) { //输出自定义域图片地址
$values = get_post_custom_values("thumbnail");
$post_thumbnail_src = $values [0];
} elseif( has_post_thumbnail() ){ //如果有特色缩略图,则输出缩略图地址
$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
$post_thumbnail_src = $thumbnail_src [0];
} else {
$post_thumbnail_src = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
if(!empty($matches[1][0])){
$post_thumbnail_src = $matches[1][0]; //获取该图片 src
}else{ //如果日志中没有图片,则显示随机图片
$random = mt_rand(1, 10);
$post_thumbnail_src = get_template_directory_uri().'/images/pic/'.$random.'.jpg';
//如果日志中没有图片,则显示默认图片
//$post_thumbnail_src = get_template_directory_uri().'/images/default_thumb.jpg';
}
};
echo $post_thumbnail_src;
}

在调用的时候,则可以跟平常一样,以上这个函数只是输出图片的地址。在需要缩略图的地方使用下面代码:

<img src="<?php post_thumbnail_src(); ?>" alt="<?php the_title(); ?>"/>

当然,如果你只需要显示有特色图片的文章缩略图,则可以使用Wordpress默认的缩略图代码:

<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail( 'caibaojian-featured', array( 'class' => 'single-featured' )); ?>
<?php endif; ?>

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流