post_thumbnail_html,WordPress 常用函数 / the_post_thumbnail

简介

显示当前日志的缩略图(Post Thumbnail)。

这个模板函数必须使用在主循环中，如果要获取任意日志的缩略图，使用 get_the_post_thumbnail($id, $size, $attr ) 函数代替。

用法

参数

$size

(string/array) (Optional) 图片大小，可以是以下几个关键字：thumbnail, medium, large, full，或者通过函数 [function]add_image_size()[/function] 自定义尺寸的关键字。或者宽和高的一个大小，比如：(32,32).

Default: 'post-thumbnail'，当前主题通过函数 [function]set_post_thumbnail_size[/function] 设置的。

PLEASE NOTE: The crop does not work in WP 3.0+. All that is needed for WP 3.0+ is the call for the thumbnail to post. Then proceed to media in the dashboard and set your thumbnail to crop to the size you wish to use.

$attr

(array) (Optional) 属性/值的一个数组，the_post_thumbnail 传递给函数 [function]wp_get_attachment_image[/function]用来获取图。

Default: None

$default_attr = array(

'src' => $src,

'class' => "attachment-$size",

'alt' => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )),

'title' => trim(strip_tags( $attachment->post_title )),

);

返回值

无返回值，直接显示当前日志缩略图的 HTML 代码。

实例

基本用法

the_post_thumbnail($size,$attr );

获取日志缩略图的 HTML 代码而不是显示出来，请使用 get_the_post_thumbnail($id, $size, $attr ) 函数代替

缩略图的大小

WordPress 默认的图片大小关键字有："thumbnail", "medium", "large" 和 "full" (你上传图片的大小)，这小图片的大小可以在 WordPress 后台多媒体管理面板设置，下面就是你如何在函数 the_post_thumbnail() 中使用这些默认的图片大小：the_post_thumbnail(); // 没有输入参数，默认是 -> 'post-thumbnail'

the_post_thumbnail('thumbnail'); // Thumbnail (默认最大是 150px x 150px)

the_post_thumbnail('medium'); // Medium resolution (默认最大是 300px x 300px)

the_post_thumbnail('large'); // Large resolution (默认最大是 640px x 640px)

the_post_thumbnail('full'); // Full resolution (原始上传图片的大小)

the_post_thumbnail( array(100,100) ); // 其他尺寸

使用函数 add_image_size() 自定义图片尺寸。

使用函数 set_post_thumbnail_size() 设置默认缩略图尺寸。

日志缩略图链接到大图

下面的代码必须在主循环中使用：

the_post_thumbnail('thumbnail');

样式化日志缩略图

日志缩略图默认就会有 class："wp-post-image"，另外他们还会根据缩略图的大小还有不同的 class：

img.wp-post-image

img.attachment-thumbnail

img.attachment-medium

img.attachment-large

img.attachment-full

我们还能给日志缩略图添加自定义的 class：

the_post_thumbnail('post-thumbnail', ['class' =>'img-responsive responsive--full','title' =>'Feature image']);

修改记录

Since: 2.9.0

源文件

wp-includes/post-thumbnail-template.php