免插件wordpress缩略图完善版
图文并茂会给文章带来好的阅读体验,郑永博客很早就养成了给每篇文章放图片的习惯,就算没有也要给文章截取一张。既然文章有图片,少不了给首页文章列表也添加一道光彩,于是利用代码给首页和其他页面的文章列表配上一张缩略图,要想完美的控制页面排版,我们还要给这个缩略图代码设置一些功能,让它能自动判断各种类型的文章。
1.当文章有多张图片时,调用第一张图片作为缩略图。
2.当文章没有图片时,自动随机抽取一张我们准备好的图片,这是为了不让列表因为多篇没图的文章而重复显示一张图片。
3.当文章插入的是外链图片时,可以支持将它显示出来。
4.当文章设置了特色图片,那么就把特色图片作为首页文章列表的缩略图。
其实很多博客和我一样,早已用上这种方法,但最近发现一个问题,不同大小的图片有时候按比例缩放会很粗糙,所以决定不按比例缩放,直接按尺寸显示部分图像,这样看起来舒服多了。
要这样显示图片其实很简单,当我们发布一篇带图的新文章,系统自动按150x150的尺寸剪切了图像的一部分作为列表缩略图,反正系统都会产生这样的图片,放在后台用就太浪费了,所以直接通过代码获取它的地址来作为首页的缩略图是再好不过了,由于mg12分享过这种缩略图方法,我们在此基础上修改和添加一些代码,让它实现上面提到的4个功能,算是增强完善版。
把以下代码加入主题的function里:
# 缩略图,支持外链,特色图,
function the_first_img() {
global $post, $posts;
$args = array(
'numberposts' => 1,
'order'=> 'ASC',
'post_mime_type' => 'image',
'post_parent' => $post->ID,
'post_status' => null,
'post_type' => 'attachment'
);
$attachments = get_children($args);
$first_img = '';
if($attachments) {
$image = array_pop($attachments);
$imageSrc = wp_get_attachment_image_src($image->ID, 'thumbnail');
$first_img = $imageSrc[0];
}
else{
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];if(empty($first_img)){
$rand = mt_rand(1, 10);//10张图片,如果没有这么多,3张也行。
echo get_bloginfo ( 'stylesheet_directory' );
echo '/images/rand/'.$rand.'.jpg';//这个是随机图片的文件夹地址,图片应以1至最大图片数的数字来命名。
}
}
return $first_img;
}
然后在需要的地方调用如下代码:
<?php if (has_post_thumbnail()) { the_post_thumbnail('thumbnail'); }
else { ?>
<img src="<?php echo the_first_img() ?>" width="150px" height="150px" alt="<?php the_title(); ?>"/>
<?php } ?>
怎么样?简单吧?代码要要归功于小蝴蝶的修改,有了她的帮忙,想要什么样的效果折腾起来都事半功倍!
不喜欢自动裁剪。。。
貌似后台本来就会剪裁,而我只是调用出来。
板凳好凉啊 呜
技术达人小蝴蝶你好!
评论榜第二你好,哈哈 我是灌水王
只要不把裁剪的小图另存下来就是好的,否则太浪费空间了。
你看看多媒体里,缩略图已经被裁剪了,就是直接调用那个小图的,已经被wp自动浪费了空间,所以不调用白不调用啊
@小蝴蝶 测试回复哈。
@郑永 自己回复?
@小蝴蝶 再次测试,哈哈。
这篇文章字不多吧?还有这个问题,汗。
这个表情是江南style的主角吗?很像。
嗯 我之前也这么修改过 不过没有把代码分享出来
我好自私
哪里哪里,我这除草文,哈哈。
哈哈,我的博客主题自带。
那就省得折腾了。
不错,这是你一贯的风格
我收藏过呢
其实图片还是上传到自己空间比较好,比较安全
这是事实,可能你有经验了,哈哈。。。很多人被图床吓一跳就回来了。
你和小蝴蝶原来是好基友。。。。
@SEO博客 嗯,经常一起肯德基~~
XX 一不留神 看了侧边 一排评论…
我只看不说话了!
@神经大爆炸 随你说啊,呵呵,不影响美观。
勇哥现在的实现方式不是这样了吧?
@有点蓝 还是这样啊。呵呵