免插件wordpress缩略图完善版

2013年3月3日22:28:23 27 9,993

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

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

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

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

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

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

要这样显示图片其实很简单,当我们发布一篇带图的新文章,系统自动按150x150的尺寸剪切了图像的一部分作为列表缩略图,反正系统都会产生这样的图片,放在后台用就太浪费了,所以直接通过代码获取它的地址来作为首页的缩略图是再好不过了,由于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 } ?>

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

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:27   其中:访客  15   博主  12

    • 大发 5
      Firefox 19 Windows 7

      不喜欢自动裁剪。。。

        • 郑永 Admin
          Android Webkit 4 Android 4.1.2

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

          @大发

        • 小蝴蝶 7
          Mozilla Compatible iPhone iOS 6.1

          板凳好凉啊 呜

            • chojemmy 6
              Google Chrome 24 Windows 7

              技术达人小蝴蝶你好!

              @小蝴蝶

              • 小蝴蝶 7
                Google Chrome 25 Windows 7

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

                @小蝴蝶

              • huangjun 6
                Google Chrome 21 Windows XP

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

                  • 小蝴蝶 7
                    Google Chrome 25 Windows 7

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

                    @huangjun

                    • 郑永 Admin
                      Firefox 19 Windows XP

                      测试回复哈。

                      @小蝴蝶

                      • 郑永 Admin
                        Firefox 19 Windows XP

                        自己回复?

                        @郑永

                        • 郑永 Admin
                          Firefox 19 Windows XP

                          再次测试,哈哈。

                          @小蝴蝶

                          • 郑永 Admin
                            Firefox 19 Windows XP

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

                            @huangjun

                          • 所谓刚子 4
                            Google Chrome 25 Windows 7

                            :cool:

                              • 郑永 Admin
                                Firefox 19 Windows XP

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

                                @所谓刚子

                              • Louis Han 7
                                Firefox 19 Windows 7

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

                                我好自私

                                  • 郑永 Admin
                                    Firefox 19 Windows XP

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

                                    @Louis Han

                                  • 我的名字叫麒 4
                                    Google Chrome 25 Windows 7

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

                                    • hostgator 0
                                      Google Chrome 25 Windows XP

                                      不错,这是你一贯的风格

                                      • 夏宇轩网赚博客 2
                                        Internet Explorer 8 Windows XP

                                        我收藏过呢

                                        • 集趣 6
                                          Google Chrome 26 Windows 7

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

                                            • 郑永 Admin
                                              Firefox 19 Windows XP

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

                                              @集趣

                                            • SEO博客 3
                                              Firefox 19 Windows XP

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

                                                • 郑永 Admin
                                                  Firefox 19 Windows XP

                                                  嗯,经常一起肯德基~~

                                                  @SEO博客

                                                • 神经大爆炸 4
                                                  QQbrowser 7 Windows 7

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

                                                  我只看不说话了!

                                                    • 郑永 Admin
                                                      Wordpress App 2 Android 2.4.5

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

                                                      @神经大爆炸

                                                    • 有点蓝 4
                                                      Maxthon 4 Windows 7

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

                                                        • 郑永 Admin
                                                          Wordpress App 2 Android 2.5.1

                                                          还是这样啊。呵呵

                                                          @有点蓝