说明：如果the_post_thumbnail不加任何参数，则输出如下HTML代码：

<img 
width="1000" height="350" 
src="mysite.com/wp-content/uploads/2020/03/img_fjords_wide-1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
alt="" 
srcset="http://127.0.0.1/startbootstrap/wp-content/uploads/2020/03/img_fjords_wide-1.jpg 1000w, http://127.0.0.1/startbootstrap/wp-content/uploads/2020/03/img_fjords_wide-1-300x105.jpg 300w, 
http://127.0.0.1/startbootstrap/wp-content/uploads/2020/03/img_fjords_wide-1-768x269.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" />

说明：

由此可以看出，我们可以用css定义类attachment-thumbnail的样式就可以了。

但是如果我想分别为首页和分类页面定义不同的样式，该怎么做呢？

方法一是增加一个div，针对不同的div定义不同的样式，在此不多做介绍

我要介绍的是另一种方法：给缩略图添加属性

你可以测试一下，如果把the_post_thumbnail(“thumbnail”)修改为下面这样的代码，看看输出的html结果是什么？

the_post_thumbnail(‘thumbnail’,array(‘class’ => ‘homepage-thumb’));

我这边输出的html为

<img width="150" height="150" src="http://domety.com/wp-content/uploads/2010/10/screenshot-150x150.png" 
class="homepage-thumb wp-post-image" alt="" title="screenshot" />  

可以和之前的html对比一下，不难发现class属性变成了我们设置的’homepage-thumb’。可以通过这种方法，把首页缩略图和分类页面的缩略图设置为不同的class属性。

改变the_post_thumbnail的html输出

我们可以使用filter来改变缩略图的html输出结果，下面的这段代码为缩略图加了一个文章链接

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );  
function my_post_image_html( $html, $post_id, $post_image_id ) {  
    $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';  
    return $html;  
}  

当你点击缩略图的时候就会跳转到相应的文章内页。

补充阅读： 《 img元素srcset属性浅析 》

srcset： 用于浏览器根据宽、高和像素密度来加载相应的图片资源

<img width=”1000″ height=”350″