免插件wordpress缩略图完善版

网络博客 郑永 8634℃ 27评论 显示侧边栏

图文并茂会给文章带来好的阅读体验,郑永博客很早就养成了给每篇文章放图片的习惯,就算没有也要给文章截取一张。既然文章有图片,少不了给首页文章列表也添加一道光彩,于是利用代码给首页和其他页面的文章列表配上一张缩略图,要想完美的控制页面排版,我们还要给这个缩略图代码设置一些功能,让它能自动判断各种类型的文章。

1.当文章有多张图片时,调用第一张图片作为缩略图。

2.当文章没有图片时,自动随机抽取一张我们准备好的图片,这是为了不让列表因为多篇没图的文章而重复显示一张图片。

3.当文章插入的是外链图片时,可以支持将它显示出来。

4.当文章设置了特色图片,那么就把特色图片作为首页文章列表的缩略图。

其实很多博客和我一样,早已用上这种方法,但最近发现一个问题,不同大小的图片有时候按比例缩放会很粗糙,所以决定不按比例缩放,直接按尺寸显示部分图像,这样看起来舒服多了。

要这样显示图片其实很简单,当我们发布一篇带图的新文章,系统自动按150×150的尺寸剪切了图像的一部分作为列表缩略图,反正系统都会产生这样的图片,放在后台用就太浪费了,所以直接通过代码获取它的地址来作为首页的缩略图是再好不过了,由于mg12分享过这种缩略图方法,我们在此基础上修改和添加一些代码,让它实现上面提到的4个功能,算是增强完善版。

gt_1_600_300

把以下代码加入主题的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 } ?>

怎么样?简单吧?代码要要归功于小蝴蝶的修改,有了她的帮忙,想要什么样的效果折腾起来都事半功倍!

转载请注明:郑永博客 » 免插件wordpress缩略图完善版

历史上的今天:

(27)个小伙伴在吐槽
Loading...
  1. 大发2013-03-04 00:37 Firefox 19 Windows 7 回复

    不喜欢自动裁剪。。。

    沙发!
    • 郑永2013-03-04 00:44 Android Webkit 4 Android 4.1.2 回复

      貌似后台本来就会剪裁,而我只是调用出来。

  2. 小蝴蝶2013-03-04 02:49 Mozilla Compatible iPhone iOS 6.1 回复

    板凳好凉啊 呜

    板凳!
    • chojemmy2013-03-05 09:23 Google Chrome 24 Windows 7 回复

      技术达人小蝴蝶你好!

    • 小蝴蝶2013-03-05 10:57 Google Chrome 25 Windows 7 回复

      评论榜第二你好,哈哈 :twisted: 我是灌水王

  3. huangjun2013-03-04 04:56 Google Chrome 21 Windows XP 回复

    只要不把裁剪的小图另存下来就是好的,否则太浪费空间了。

    地板!
    • 小蝴蝶2013-03-04 08:13 Google Chrome 25 Windows 7 回复

      你看看多媒体里,缩略图已经被裁剪了,就是直接调用那个小图的,已经被wp自动浪费了空间,所以不调用白不调用啊

    • 郑永2013-03-19 21:24 Firefox 19 Windows XP 回复

      测试回复哈。

    • 郑永2013-03-19 21:25 Firefox 19 Windows XP 回复

      自己回复?

    • 郑永2013-03-19 23:27 Firefox 19 Windows XP 回复

      再次测试,哈哈。

    • 郑永2013-03-04 09:13 Firefox 19 Windows XP 回复

      这篇文章字不多吧?还有这个问题,汗。

  4. 所谓刚子2013-03-04 07:48 Google Chrome 25 Windows 7 回复

    :cool:

    4楼
    • 郑永2013-03-04 09:20 Firefox 19 Windows XP 回复

      这个表情是江南style的主角吗?很像。

  5. Louis Han2013-03-04 14:46 Firefox 19 Windows 7 回复

    嗯 我之前也这么修改过 不过没有把代码分享出来

    我好自私

    5楼
    • 郑永2013-03-04 16:50 Firefox 19 Windows XP 回复

      哪里哪里,我这除草文,哈哈。

  6. 我的名字叫麒2013-03-05 04:22 Google Chrome 25 Windows 7 回复

    哈哈,我的博客主题自带。

    6楼
  7. hostgator2013-03-05 09:06 Google Chrome 25 Windows XP 回复

    不错,这是你一贯的风格

    7楼
  8. 我收藏过呢

    8楼
  9. 集趣2013-03-09 05:40 Google Chrome 26 Windows 7 回复

    其实图片还是上传到自己空间比较好,比较安全

    9楼
    • 郑永2013-03-09 09:31 Firefox 19 Windows XP 回复

      这是事实,可能你有经验了,哈哈。。。很多人被图床吓一跳就回来了。

  10. SEO博客2013-03-29 06:17 Firefox 19 Windows XP 回复

    :razz: :razz: 你和小蝴蝶原来是好基友。。。。

    10楼
    • 郑永2013-03-30 11:41 Firefox 19 Windows XP 回复

      嗯,经常一起肯德基~~

  11. 神经大爆炸2013-11-26 21:53 Internet Explorer 9 Windows 7 回复

    XX 一不留神 看了侧边 一排评论…

    我只看不说话了!

    11楼
    • 郑永2013-11-27 19:24 Wordpress App 2 Android 2.4.5 回复

      随你说啊,呵呵,不影响美观。

  12. 有点蓝2014-01-03 11:18 Maxthon 4 Windows 7 回复

    勇哥现在的实现方式不是这样了吧?

    12楼
gravatar
发表我的评论
取消评论


Hi,请填写昵称和邮箱!

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