WordPress 常用函数 / the_post_thumbnail

Denis | 邓鸿华 函数参考 14444 2013年02月18日

简介

显示当前文章的缩略图（Post Thumbnail）。

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

用法

<?php the_post_thumbnail( $size, $attr ); ?>

参数

$size
(string/array) (Optional) 图片大小，可以是以下几个关键字：thumbnail, medium, large, full，或者通过函数 add_image_size() 自定义尺寸的关键字。或者宽和高的一个大小，比如：[32,32].
Default: 'post-thumbnail'，当前主题通过函数 set_post_thumbnail_size 设置的。

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 传递给函数 wp_get_attachment_image用来设置 img 标签的属性。
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 代码。

实例

基本用法

获取文章缩略图的 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() 设置默认缩略图尺寸。

文章缩略图链接到当前文章

注意：下面两个例子不能一起使用。

例子1：在主题中使用下面的代码：

<a href="" title="" >
    
  </a>

例子2：使用 hook：

add_filter( 'post_thumbnail_html', 'wpjam_post_image_html', 10, 3 );
function wpjam_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;
}

文章缩略图链接到大图

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

<?php 
if ( has_post_thumbnail()) {
  $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
  echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '">';
  the_post_thumbnail('thumbnail');
  echo '</a>';
}
?>

样式化文章缩略图

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

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

我们还能给日志缩略图添加自定义的 class：比如加上 "alignleft":

'alignleft')); ?>

修改记录

Since: 2.9.0

源文件

wp-includes/post-thumbnail-template.php