WordPress 常用函数 / the_post_thumbnail

简介

显示当前文章的缩略图(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 代码。

实例

基本用法

<?php 
if ( has_post_thumbnail() ) { // 检查当前文章是否有缩略图
  the_post_thumbnail();
} 
?>
<?php the_content(); ?>

获取文章缩略图的 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:在主题中使用下面的代码:

<?php if ( has_post_thumbnail()) : ?>
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
    <?php the_post_thumbnail(); ?>
  </a>
<?php endif; ?>

例子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":

<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>

修改记录

Since: 2.9.0

源文件

wp-includes/post-thumbnail-template.php

热门文章