WordPress常用函数 the_post_thumbnail()和add_image_size()

the_post_thumbnail()函数用于获取文章的特色图像缩略图。如果文章没有添加特色图像功能,可以查看add_theme_support()函数文章学习。

语法结构

the_post_thumbnail( string|array $size = 'post-thumbnail', string|array $attr = '' )

参数

$size(string|array) 图片大小,可以是以下几个关键字:thumbnail, medium, large, full。或者通过函数 add_image_size()函数定义尺寸的关键字。或者自定义宽和高的大小,比如:(32,32)。默认值是 ‘post-thumbnail’。

$attr(string|array)属性/值的一个数组,比如设置默认的class属性

实例

直接使用
if(has_post_thumbnail()){
    the_post_thumbnail();
}

自定义缩略图的大小
if(has_post_thumbnail()){ 
    the_post_thumbnail(array(200,200)); // 显示200X200尺寸的缩略图 
}
这种方法的优点的灵活,可以随时通过代码的调用显示不同尺寸的图片,缺点是如果有多处代码则修改起来麻烦

预置尺寸
用到此方法请先看下面的函数介绍

add_image_size()函数是设置 WordPress 中上传图片缩略图大小的一个函数

语法结构

add_image_size( string $name, int $width, int $height, bool|array $crop = false )

参数

$name,要设置的缩略图名称,可接受thumbnail, medium, large, full等
$width, 设定的最大宽度
$height, 设定的最大高度
$crop,是否切割,如果设置为true则按照图片剪裁自定义的高度和宽度对图片进行剪裁,100%得到预设的图片尺寸,不会压缩图片的宽高比,但是会在原图的基础上进行裁剪,同时不能控制图片剪裁的起始点。false按照图片的原始长宽比进行剪裁,不会缺失图片的内容

TIPS

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

实例

比如我们想在首页和分类页面使用不同的缩略图大小,就可以先预置homepage-thumb和category-thumb这两大小。方法是在functions.php文件中加入以下代码

if ( function_exists( 'add_image_size' ) ){  
    add_image_size( 'category-thumb', 200, 200 ); // 预置一个名为’category-thumb’,200*200的缩略图大小  
    add_image_size( 'homepage-thumb', 220, 180); //预置一个名为’homepage-thumb’,220*180的缩略图大小  
}

在首页调用
the_post_thumbnail(‘homepage-thumb’); //显示220*180的缩略图
在分类页面调用
the_post_thumbnail(‘category-thumb’); //显示200*180的缩略图

the_post_thumbnail函数输出的html结构

<img width="150" height="150" src="" alt="" title="screenshot" />

由此可以看出,我们可以用css定义类attachment-thumbnail的样式就可以了。但是如果我想分别为首页和分类页面定义不同的样式,该怎么做呢?可以给缩略图添加一个属性,如

the_post_thumbnail(‘thumbnail’,array(‘class’ => ‘homepage-thumb’));
输出的html结构为
<img width="150" height="150" src="" 
class="homepage-thumb wp-post-image" alt="" title="screenshot" />

感兴趣的朋友可以多多测试不同的方式,这篇文章就写到这里。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress常用函数 add_theme_page()

2022-1-6 14:41:18

WordPress教程

WordPress常用函数 wp_get_attachment_image_src()

2022-1-7 2:16:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索