WordPress自定义大小图片

  • A+
所属分类:wordpress函数

在制作WordPress主题时,我们可能有这样的需求:在后台上传一张图片,在前端主题中调用时使用不从尺寸大小的缩略图。

其实,WordPress的内置函数add_image_size(),可以让您指定图像大小,并为您提供裁剪选项。

第一步、开启图像自定义剪裁功能

将如下的代码按照你的需求修改添加到主题的Function.php文件中即可开启

  1. add_theme_support( 'post-thumbnails' );

第二步、添加图像自定义剪裁尺寸

在主题的Function.php文件中添加函数add_image_size()注册添加图像自定义剪裁大小的尺寸。

add_image_size函数的用法是这样的:

add_image_size('name-of-size',width,height,crop mode);

示例如下:

  1. add_image_size( 'sidebar-thumb', 120, 120, true ); // 硬剪裁模式
  2. add_image_size( 'home-thumb', 220, 180 ); // 软剪裁模式

对涉及参数解释如下:

  1. name-of-size
    图片剪裁名称。你按照该图所用的位置对其命名,比如:home-img、cate-img……
  2. width
    图片剪裁的宽度。
  3. height
    图片剪裁的高度
  4. crop mode
    剪裁模式,有true-硬剪裁和false-软剪裁(默认值)两个选项。
    true-硬剪裁
    按照图片剪裁自定义的高度和宽度对图片进行剪裁,100%得到预设的图片尺寸(比如示例中120*120的图片),不会压缩图片的宽高比,但是会在原图的基础上进行裁剪,同时不能控制图片剪裁的起始点。
    WordPress自定义大小图片false-软剪裁(默认值)
    按照图片的原始长宽比进行剪裁,不会缺失图片的内容。但缺点是,如果图片原始的长宽比与你要剪裁的长宽比不同,可能最终得不到你要的图片尺寸。
    WordPress自定义大小图片

第三步、在模版中调用

在模版中调用时,只需要添加以下代码:

  1. <?php the_post_thumbnail( 'name-of-size' ); ?>

注意:该位代码必须粘贴在Post循环中。

无限高图片剪裁模式

有时,我们会有粘贴长图的需求,我们希望固定图片的宽度、保持图片比例不变、同时图片内容不被剪裁。

这时,我们可以参考软剪裁的模式,设置无限高图片的剪裁,如下:

  1. add_image_size( 'max-height-thumb',600, 9999 ); // 无限高图片剪裁模式

特别说明

  1. 使用WordPress的内置函数add_image_size()设置自定义图片剪裁,只会影响到今后新上传的图片,而不会对已有图片有影响。
  2. 尽可能少的去使用add_image_size()函数,应为每一次上传图片之后,无论是否需要,系统都会自动的按照add_image_size()设置进行剪裁,有可能造成大量无用图片占据网站空间;
  3. add_image_size()函数生成的图片仅能够在主题模版中使用,在编辑文章页内容时不能被使用。
亮享

发表评论

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