the_post_thumbnail( string|int[] $size = 'post-thumbnail', string|array $attr = '' )

使用示例

• 示例1

  文章缩略图尺寸：

  //Default WordPress
  the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 hard cropped)
  the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
  the_post_thumbnail( 'medium_large' );  // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
  the_post_thumbnail( 'large' );         // Large resolution (1024 x 1024 max height 1024px)
  the_post_thumbnail( 'full' );          // Full resolution (original size uploaded)
  
  //With WooCommerce
  the_post_thumbnail( 'shop_thumbnail' ); // Shop thumbnail (180 x 180 hard cropped)
  the_post_thumbnail( 'shop_catalog' );   // Shop catalog (300 x 300 hard cropped)
  the_post_thumbnail( 'shop_single' );    // Shop single (600 x 600 hard cropped)
  

  硬裁剪尺寸具有固定的高度和宽度

• 示例2

  下面是使用数组的attr参数示例：

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

  使用数组的键和值填充不同的属性。您可以使用它将类添加到文章缩略图。

• 示例3

  文章缩略图链接到文章固定链接

  注意：不要在同一主题中同时使用这两个示例。

  示例1。要将文章缩略图链接到特定循环中的文章固定链接，请在主题的模板文件中使用以下内容：

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

  示例2。要将网站上的所有文章缩略图链接到文章固定链接，请将其放入当前主题的functions.php文件：

  /**
   * Link all post thumbnails to the post permalink.
   *
   * @param string $html          Post thumbnail HTML.
   * @param int    $post_id       Post ID.
   * @param int    $post_image_id Post image ID.
   * @return string Filtered post image HTML.
   */
  function wpdocs_post_image_html( $html, $post_id, $post_image_id ) {
  	$html = '<a href="' . get_permalink( $post_id ) . '" alt="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
  	return $html;
  }
  add_filter( 'post_thumbnail_html', 'wpdocs_post_image_html', 10, 3 );
  

• 示例4

  缩略图尺寸

  WordPress的默认图像尺寸为“thumbnail”、“medium”、“large”和“full”（原始尺寸）。这些图像尺寸可以在WordPress 媒体管理界面（设置>媒体）中设置。以下是您如何将这些默认尺寸用于the_post_thumbnail()：

  the_post_thumbnail();                  // without parameter -> 'post-thumbnail'
   
  the_post_thumbnail( 'thumbnail' );       // Thumbnail (default 150px x 150px max)
  the_post_thumbnail( 'medium' );          // Medium resolution (default 300px x 300px max)
  the_post_thumbnail( 'large' );           // Large resolution (default 640px x 640px max)
  the_post_thumbnail( 'full' );            // Full resolution (original size uploaded)
   
  the_post_thumbnail( array(100, 100) );  // Other resolutions
  

  使用add_image_size()注册文章缩略图的新图像尺寸
  要设置文章缩略图的默认尺寸，请参阅：set_post_thumbnail_size()

• 示例5

  如果您想删除缩略图上“height”和“width”属性的硬编码，这通常会影响自适应/响应/流体CSS样式表，您可以将此片段添加到functions.php，

  // remove width & height attributes from images
  //
  function remove_img_attr ($html)
  {
      return preg_replace('/(width|height)="d+"s/', "", $html);
  }
  
  add_filter( 'post_thumbnail_html', 'remove_img_attr' );

• 示例6

  文章缩略图样式

  文章缩略图被赋予一个类“wp-post-image”，并根据所显示缩略图的尺寸获得一个类。您可以使用以下CSS选择器设置输出样式：

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

  你也可以给文章缩略图自己的类
  使用类“alignleft”显示文章缩略图：

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

• 示例7

  如果您担心尺寸属性对于您的使用来说太大，您可以这样做：

  the_post_thumbnail( 'large', array( 'sizes' => '(max-width:320px) 145px, (max-width:425px) 220px, 500px' ) );

  'sizes'数组由媒体查询组成，所以第一个参数是你的媒体查询，第二个参数是在该视口尺寸下应该渲染什么尺寸的图像。最后一个参数是默认尺寸，如果给定的媒体查询都不适用。

  如果使用基于列的栅格，而不希望在较小的视口中渲染100vw图像，则此选项非常有用。

• 示例8

  默认用法

  // Check if the post has a Post Thumbnail assigned to it.
  if ( has_post_thumbnail() ) {
  	the_post_thumbnail();
  } 
  the_content();
  

  注意：要返回文章缩略图以在PHP代码中使用，而不是显示它，请使用：get_the_post_thumbnail()。

• 示例9

  $attr:

  $attr = array(
      'src'   => $src,
      'class' => "your-css-class",
      'alt'   => "your alt text"
  );
  

• 示例10

  禁用文章缩略图的延迟加载

  如果您想防止WordPress添加延迟加载，请在主题调用缩略图的地方使用此行：

  the_post_thumbnail( '', array( 'loading' => '' ) );
  

• 示例11

  您还可以显式设置缩略图的即时加载（如果您不想让浏览器来决定）：-

  the_post_thumbnail( '', array( 'loading' => 'eager' ) );

• 示例12

  另请参见：
  get_the_post_thumbnail()

• 示例13

  将缩略图链接到大图像尺寸

  此示例链接到“large”文章缩略图图像尺寸，必须在循环中使用。

  if ( has_post_thumbnail() ) {
  	$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
  	if ( ! empty( $large_image_url[0] ) ) {
  		printf( '<a href="%1$s" alt="%2$s">%3$s</a>',
  			esc_url( $large_image_url[0] ),
  			esc_attr( get_the_title_attribute( 'echo=0' ) ),
  			get_the_post_thumbnail()
  		);
  	}
  }