信科网络 · 11 年只做 WordPress | 建站 / 主题 / 插件 / 商城 / 迁移 / 托管 | 累计服务 3000+ 企业 | 源码全交付
服务热线:13280692153 邮箱:web@wordpressx.com
工作日 08:30-18:0013280692153 免费诊断
首页/WordPress 教程/the_post_thumbnail()函数和add_image_size()函数
BLOG

the_post_thumbnail()函数和add_image_size()函数

分类 发布 2022-08-19

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

the_post_thumbnail()函数和add_image_size()函数
  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="/uploads/img/" class="attachment-thumbnail wp-post-image" alt="" title="screenshot" />

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

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

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

INDUSTRIAL BELT

扎根中国制造产业带
懂工厂,才懂出海

从胶东半岛到珠三角,从长三角到中原腹地,每一片产业集群都有自己的出口节奏与买家画像。信科网络长期扎根产业一线,把工厂的产品语言翻译成海外采购商听得懂的搜索语言,让每一分投入都对着真实的询盘去。

jizhou

冀州外贸网站建设

冀州市隶属河北省衡水市,地处华北平原腹地,北距首都300公里,西距省会石家庄110公里,辖区总面积918平方公里,东与枣强县(衡水)为邻,南与南宫市、新河县(邢台)接壤,西与宁晋县(邢台)…

haiyuan

海原外贸网站建设

位于中国宁夏回族自治区中南部。1991年底人口31.15万。回族为主,有汉、满、蒙古、东乡等民族。西汉属安定郡。清同治十三年(1874)设海城县。民国三年(1914)改海原县。地形复杂,多山地。年…

banan

巴南外贸建站

巴南区的前身是千年历史名邑巴县。早在3000多年前的商代,巴人就在此繁衍生息,立国建都。秦代置巴郡,南朝齐代置垫江县,北周时改称巴县并沿袭至1995年。1995年经国务院批准撤县建区,成立巴…

fuling

涪陵外贸建站

重庆市涪陵区,邑枕长、乌两江,素为乌江流域物资集散地,有渝东南门户之称,是闻名遐迩的中国“榨菜之乡”。全区幅员面积2946平方公里,辖1个经济技术开发区、1个私营经济示范区和44个乡镇、街…

yuanzhou

原州WordPress建站

原州区,隶属于宁夏回族自治区固原市,地处宁夏南部,六盘山东北麓,黄土高原中西部,东邻彭阳县,南接泾源县,西连西吉县,北靠海原县、同心县,东北、西南分别与甘肃环县、隆德县毗壤,是固…

wuzhong

吴忠WordPress建站

吴忠市位于宁夏回族自治区中部,东邻陕西定边县,西北和东北与内蒙古自治区阿拉善左旗、鄂托克前期接壤,西南和东南与甘肃靖远县、环县毗邻,北连永宁、陶乐两县,南接海原、固原两县,面积339…

wushan

巫山Shopify建站

巫山位于重庆市东北部,三峡库区腹心,素有“渝东门户”之称,地跨长江巫峡两岸。东邻湖北省巴东县,西接奉节县,南与湖北省建始县毗连,北与巫溪县及神农架林区接壤。县城位于大宁河与长江交汇…

nanchuan

南川Shopify建站

南川地处四川盆地东南边缘与云贵高原过渡地带,位于重庆市南部,东南与贵州省道真、正安、桐梓县接壤,东北与武隆县为邻,北接涪陵区,西连巴南区、綦江县、万盛区。总面积2602平方千米。总人…

xiushan

秀山外贸推广

秀山土家族苗族自治县,位于重庆市东南部,武陵山脉中段,四川盆地东南缘的外侧,为川东南重门户。与湖南省、湖北省、贵州省毗邻,326国道和319国道贯穿全县。距长沙604公里、武汉656里、贵阳5…

beidaihe

北戴河外贸推广

北戴河海滨地处河北省秦皇岛市中心的西部。是秦皇岛的城市区之一!受海洋气候的影响,夏无酷暑,冬无严寒,常年保持一级大气质量,没有污染,没有噪音,城市森林覆盖率54%,人均绿地630平方米…

jiangbei

江北Google SEO

江北区,隶属于重庆市,是主城核心区之一。位于长江、嘉陵江交汇处北岸,东南西三面分别与巴南、南岸、渝中、沙坪坝四区隔江相望,北与渝北区接壤。至2015年底,江北区幅员面积为220.77平方千…

jiangjin

江津GEO优化

重庆市江津区,是一个历史文化悠久的城市,以地处长江要津而得名。江津位于重庆西南长江之滨,距渝中区公路里程50公里;铁路里程65公里;水路里程72公里。江津城区气候特征与重庆相近,但综合…

zaoqiang

枣强GEO优化

枣强县位于河北省东南部,衡水市南端,界于东经115°35′~58′,北纬37°08′~35′之间,总面积892.3平方公里。东隔清凉江与景县、故城相望,西临冀州市,南靠邢台地区南宫市,北接桃城区、武邑县。…

xinhua

新华谷歌SEM

新华区隶属于河北省沧州市,地处沧州市区东半部,与运河区以清池大道为界,行政区域总面积88.5平方千米。新华区属暖温带半湿润大陆性季风气候,四季分明,日照充足。截至2014年,新华区下辖5个…

lingwu

灵武谷歌SEM

灵武,古称灵州。地处宁夏引黄灌区的精华地带,素有“塞上江南”之美誉。全市总面积4639平方公里,总人口23.7万,其中回族人口11.1万人。全市非农业人口11.5万人,占总人口的48.5%。1996年5月灵武…

xingqing

兴庆Facebook广告

金凤区于2002年11月1日成立,是宁夏回族自治区首府银川市的市辖区之一,位于市区中部,东到唐徕渠,西到包兰铁路,南接永宁县,北临贺兰县,辖良田、丰登2个镇,上海西路、北京中路、长城中路…

guyuan

固原Facebook广告

固原地区位于宁夏回族自治区南部,东西南三面与甘肃毗邻,北部与本区中卫、同心两县接壤,总面积16783平方公里,辖固原、海原、西吉、隆德、彭阳、泾源县,总人口186.85万人,其中回族占47.6%,…

yuzhong

渝中Yandex推广

渝中区,位于长江上游地区、重庆大都市区,属重庆主城九区之一。地处在长江、嘉陵江交汇地带,由于两江环抱,形似半岛,又名渝中半岛。渝中区作为重庆市政治、经济、文化以及商贸流通中心,别…

xianxian

献县Yandex推广

献县历史悠久,夏商时期属冀州,春秋时属燕国,战国时属燕、赵、秦。早在春秋战国时期。境内就形成了具有一定影响力的城市——乐成。汉高祖六年(公元前201年)置河间郡,汉文帝二年…

qingtongxia

青铜峡TikTok推广

青铜峡市位于黄河上游宁夏平原中部,地势平坦,牛首、峡口两山对峙,黄河穿峡而过,山光水色相映,宛如开然铜镜,“青铜峡”由此而得名。地处西北内陆,东部季风区与西部干旱区域的交汇地带,属…

为什么一定要选懂产业带的出海服务商?建材丝网的欧洲建筑商看资质与交期,工业橡塑的中东工程商问耐温与工况,毛皮服饰的俄罗斯分销商算的是季节与毛利。买家不同,决策逻辑就不同;信科网络把这些差异拆进网站结构、关键词地图和投放策略里,用他们习惯的方式出现在他们搜索的地方。