首页 > 新闻资讯 > 为不同位置的文章缩略图设置不同尺寸

为不同位置的文章缩略图设置不同尺寸

25条评论
标签:
更多

文章缩略图和推荐图片可以丰富页面内容,也是图片类博客和杂志类博客随处可见的风景。简单地说,给WordPress主题添加推荐图片功能后,你就可以上传与某篇文章相关的图片,然后图片会显示在文章的一侧。

如果你的网站首页是最近发表文章的摘要,文章的推荐图片会和文章一同显示出来,点击阅读文章后,同样的图片又会显示在文章页上。为推荐图片设置不同大小以适应它们的所在位置(比如文章页上显示大图,首页上显示小图),可以让你的网站排版更合理,也能达到更好的观看效果。

那么要怎样才能让WordPress自动为文章附图生成缩小剪裁版以放在首页呢?

1. 新建主题函数

打开主题的functions.php文件,加入下面的代码:

// post thumbnail support      
if ( function_exists( 'add_image_size' ) ) add_theme_support( 'post-
thumbnails' );        

if ( function_exists( 'add_image_size' ) ) {      
add_image_size( 'post-thumb', 700, 270 );      
add_image_size( 'home-thumb', 203, 203, true );  
}    

上面的代码让主题支持文章缩略图并让WordPress生成2个不同尺寸的缩略图。

“post-thumb”的宽度和高度分别是700px和270px ,“home-thumb”的宽度和高度分别是203px和203px,你可以根据主题手动修改这些数字。

如果有必要,你还可以给图片添加用在其他位置(比如存档页或侧栏文章列表)的尺寸。

home-thumb的最后一个变量是“true”——意识是让WordPress裁剪当前图片并另存为新图片。

2. 把图片添加到主题中

把图片放到主页里,请打开index.php文件,然后在主循环(关于主循环的介绍请看这里)内添加以下内容:

<?php if ( has_post_thumbnail()) the_post_thumbnail('home-thumb'); ?>    

把图片放到文章页里,请打开single.php文件,然后在主循环内添加以下内容:

<?php if ( has_post_thumbnail()) the_post_thumbnail('post-thumb'); ?>

3. 上传文章缩略图

把代码添加到主题的functions.php之后你就可以在后台“添加新文章”菜单下看见一个新选项——“推荐图片(Featured Image)”,点击“Set Featured Image”链接,出现WordPress图片上传框。

图片上传成功后,点击“Set as featured image”然后你就可以发现下面这样的新图片了:

大功告成!

来源

WordPress啦编译

* 版权声明:作者WordPress啦! 转载请注明出处。

#1
好,我试一下,看看效果如何。
#2
这个可以丰富网站,让用户更好的体验,给用户更好的体验,
#3
学习了
#4
WordPress功能好强啊,特别是插件,俺现在都还不会用呢!
#5
学习了……方法很好!
#6
好好学习来了
#7
没事过来坐坐
#8
真的不错,来学习一下。
#9
把图片添加到主题中
#10
原来这样就行了啊。谢谢
#11
可以了。我也用到了。
#12
看看再说
#13
不错,已经成功。。。 看看?http://www.ewao.cn
#14
这个方法很好啊。。
#15
brand are the best suit to travel,and when you learn about the true religion jeans product,you will like very much.
#16
Once you shopping here wholesale polo shirts, our detailed shopping guide, well structured online store will lead you buying suitable Polo shirts in a happy mood.
#17
This is my first time i visit here . I found so many interesting stuff in your blog especially Fake Oakleys discussion.
#18
怎样把一个页面的缩略图显示在首页,比如我想让它显示在首页幻灯片中
#19
看了这么多文章缩略图设置的方法,但还是没能解决我的问题,不是显示不了,就是配置有问题
#20
一直在用这个功能,但是还真不知道可以这样,,太感谢了。。
#21
实际这样的做法没有多大作用,还要把图片裁剪成固定的尺寸,显示才不会混乱。
#22
但这个功能就不用裁减哦,不管上传什么尺寸的图最后都会自己生成设定的尺寸的。