乌徒帮技术范WordPressWordPress内核 › wordpress缩略图thumbnail尺寸控制

wordpress缩略图thumbnail尺寸控制

分类:WordPress内核

wordpress特色图片功能本站乌徒帮在之前的文章中已经讲的很详细,这一功能非常好的帮助我们为一篇文章创建缩略图,吸引读者进入到文章的内页。不过,当我们在使用这些图片的时候,我们常常会困惑于wordpress内部图片尺寸的问题,我们到底如何使用不同尺寸的图片呢?本文将全面的解析这一问题。

1、通过后台,控制wordpress缩略图尺寸

我们在上传图片的时候,wordpress会为我们创建图片副本,不过它们都是经过内部调整的,或进行缩小,或进行裁剪。那么怎么去控制这些创建时对图片尺寸的规定呢?

首先,我们在wordpress的后台设置中能对上传图片的尺寸做规定。如图:

wordpress上传图片时,会根据上传图片的大小来对图片进行副本的创建,就像上图中的设置一样,如果图片宽度或高度大于1024像素那么就会创建三个副本:150px*150px、300px*300px、1024px*1024px;加上图片本身,服务器上就会保存四张图片。而当图片宽度或高度大于300像素,小于1024像素时,不会创建1024px*1024px的那张,以此类推,图片越小创建副本的张数就可能减少。上图中的缩略图大小会作为文章post_thumbnail的缩略图,可以用the_post_thumbnail('thumbnail')调用,(the_post_thumbnail可不带参数,效果相同。)

当我们在插入一张图片之后,可以在插入选项中发现,由于这张图片大小小于1024像素,因此没有创建大的缩略图,不能选择“大”。如果这张图再小于300像素的话,连中等都没得选择。

在缩略图大小下面有一个选项,是否裁剪到这个尺寸。选择时,wordpress会按照所填写的大小,裁剪出一个150px*150px的图片,这个图片将会按照小边的宽度,大边的居中部位裁剪(下图演示)。如果不选择,就会把图片最大的那条边缩小到150px,但图片的长宽比不变。这里的宽度和高度是可变的,不一定要相等。

这张图可以很好的说明勾选缩略图下的裁剪选项与否的效果,左侧是原图,右上角为勾选后裁剪得到的一个150px*150px的缩略图,裁剪时图片的顶部和底部被剪掉了。而右下角的图片为不勾选的效果,图片只是按比例将最大边缩小到150px,没有进行裁剪。

只有小图缩略图在勾选之后会进行裁剪,而中等、大等缩略图是不会进行裁剪的,只会按比例缩放副本。

我们也可以不需要创建这么多的副本,甚至不需要创建缩略图副本,在设置中,删除所有的大小设置,全部留空。这时不会创建副本,插入图片的地方也无法进行选择,只能插入原图。

2、通过增加缩略图型号控制尺寸

上文讨论了wordpress后台可设置的部分,而在主题制作中,我们还有不可见的缩略图尺寸控制。我们知道,只有在wordpress主题的functions.php中规定了add_theme_support('post-thumbnails');才能正常使用wordpress的文章缩略图(特色图片功能,上文讨论的可以不用特色图片功能就能实现,但如果前台要调用而非仅仅进行插入的话,必须增加该功能。),同时,我们在规定该功能之后,还能配置我们自己想要的图片尺寸。

wordpress文章特色图片功能详解一文中,我也已经谈到了缩略图的尺寸问题,不过并不尽全。在默认情况下,wordpress有下面几种缩略图尺寸:

  • 缩略图(Thumbnail)
  • 小图(Small)
  • 中等图(Medium)
  • 大图(Large)
  • 原图(Full)

它们是针对调用的,在没有进行型号的增加时,我们即可用the_post_thumbnail()调用这几种尺寸(对应的图片存在才会调用,不存在会自动降一级或使用原图)。这几个默认的尺寸,其实正好对应后台设置尺寸,他们调用到的大小正式后台设置的情况。不过也有例外,当我们已经有了一些副本的时候,我们竟然改动了后台的设置,这个时候遗憾的是,系统将会调用原图,无论你选择哪种尺寸,因为尺寸大小对应的图片已经不存在了(wordpress按照图片的尺寸保存副本)。

我们可以增加一些型号,补充我们对文章缩略图的尺寸需求。例如,我们并不需要很多尺寸,只需要原图,和将原图缩略为600*250的一张图,只需两张即可,我们可以把后台所有选项设置为空,在add_theme_support('post-thumbnails');后紧接着加上一句:

set_post_thumbnail_size(600,250,true);

这样,wordpress将为我们创建一张600*250经过裁剪的副本(将上面第三个参数设置为false表示不进行裁剪,只按比例缩小),而在调用时,我们需要用the_post_thumbnail('post-thumbnail');而非the_post_thumbnail();。虽然post-thumbnail型号也算是内置的,但是它需要set_post_thumbnail_size声明后才能用。

由于我们采用的是set_post_thumbnail_size的方法,并把后台设置设为空,因此,在后台插入图片时,没有其他尺寸的图片可以选择,只能插入原图。为了可以有选择的余地,你可以不用set size,而是将后台缩略图一项设置为600*250即可,这样既可以生成一张缩略图副本,又可以插入这个副本到文章中。

--------------------------------

这里需要插入说明的一点是,the_post_thumbnail();不带参数(默认参数为thumbnail)的缩略图调用,会自动调用出一张后台设置了大小的可用的最小的一张缩略图,如果没有设置,则调用原图。它不会调用set_post_thumbnail_size设置的大小的那张图。

默认型号thumbnail和small的区别在于,当图片很小很小,甚至比最小设置的那个尺寸还小时,thumbnail所指的是原图。其他大多数情况下,thumbnail为参数调用都会调用后台设置了大小的可用的最小的一张缩略图。

--------------------------------

除此之外,我们还可以增加其他型号的缩略图,不过和set_post_thumbnail_size一样,新增的型号不能用在插入文章和直接调用中。例如,我们可以用下面的方法来增加一个缩略图副本:

add_image_size('test-cover',450,250,true);

如果增加这一条的话,我们在上传一张图片之后,还会创建一张450*250的副本,前提是这张图片的长或宽比这个值更大。注意最后一个参数,仍然为强制裁剪的意思。在主题中,我们可以用the_post_thumbnail('test-cover');调用这个副本。用这种方法,我们可以创建任意的副本。

3、调用不同尺寸的缩略图

我们一直谈到the_post_thumbnail来调用,其实,在之前的这篇文章中,我已经介绍了多个可以调用缩略图的函数。在wordpress主题文制作中,我们将这些调用函数放在文章LOOP循环内,并把型号当做参数赋给它,就能调用出不同型号的图片。

例如the_post_thumbnail('large');调用大尺寸的图片,the_post_thumbnail('test-cover');调用增加的尺寸副本。它将直接打印出不带链接的图片<img>。

能够进行缩略图调用的函数有:

the_post_thumbnail()
get_the_post_thumbnail()
wp_get_attachment_image_src()

它们的具体用法就不详细解说,你可以通过wordpress官方了解它们。通过这几个函数,我们就可以非常方便的调用出我们的各个尺寸型号的缩略图。

已有5条评论 快速评论
  1. […] 扩展阅读:wordpress缩略图thumbnail尺寸控制 […]

  2. 否子戈 #1571楼 回复给@1552楼 2012/08/23 12:32:35 回复

    抱歉,我好像没有写什么会员登录收藏系统,不知道你看的是哪一段代码

  3. kojog #1553楼 2012/08/19 19:09:08 回复

    是help88488#qq.com,不知道你对这个email有没有印象呢?

  4. kojog #1552楼 2012/08/19 19:08:12 回复

    在谷歌code里面看到你写了一个会员登陆收藏系统,但是没有写怎么显示在用户界面。如果可以请给我emailhelp88488#qq.com 。谢谢

  5. […] 在上文的调用代码&lt;?php the_post_thumbnail(? ); ?&gt;中,()内无内容或为thumbnail时为默认状态,调用的是特色图特色图(高198px),换为其他几个我想您已经知道效果了吧。在wordpress缩略图thumbnail尺寸控制一文中,乌徒帮对wordpress缩略图的尺寸进行了详细的剖析。 […]

填写个人信息,赶快回复吧!