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

使用示例

• 示例1

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

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

  您还可以为文章缩略图提供自己的类：

  // Give the Post Thumbnail a class "alignleft".
  echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' => 'alignleft' ) );
  

• 示例2

  示例用法

  <?php $pages = get_pages( array( 'child_of' => 1 ) ); ?> 
  <ul>
  	<?php foreach ( $pages as $page ) : ?>
  		<li>
  			<?php echo get_the_post_thumbnail( $page->ID, 'thumbnail' ); ?>
  			<h1><?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?></h1>
  			<?php echo apply_filters( 'the_content', $page->post_content ); ?>
  		</li>
  	<?php endforeach; ?>
  </ul>
  

• 示例3

  缩略图尺寸
  WordPress的默认图片尺寸为“thumbnail”、“medium”、“large”和“full”（原始尺寸）
  这些图像尺寸可以在 设置>媒体 中配置
  主题也可以添加“post-thumbnail”。以下是您如何将这些默认尺寸用于get_the_post_thumbnail()：

  // without parameter -> Post Thumbnail (as set by theme using set_post_thumbnail_size())
  get_the_post_thumbnail( $post_id );                   
  
  get_the_post_thumbnail( $post_id, 'thumbnail' );      // Thumbnail (Note: different to Post Thumbnail)
  get_the_post_thumbnail( $post_id, 'medium' );         // Medium resolution
  get_the_post_thumbnail( $post_id, 'large' );          // Large resolution
  get_the_post_thumbnail( $post_id, 'full' );           // Original resolution
  
  get_the_post_thumbnail( $post_id, array( 100, 100) ); // Other resolutions
  

  Register new image sizes for Post Thumbnails with: add_image_size().
  To set the default size for Post Thumbnails see: set_post_thumbnail_size().

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

• 示例4

  Post Thumbnail Linking to the Post Permalink

  Post缩略图链接到Post Permalink

  This example shows the 5 latest Post Thumbnails linked to their Post permalink.

  此示例显示了链接到其Post permalink的5个最新帖子缩略图。

  $posts = get_posts( array( 'posts_per_page' => 5 ) );
  foreach ( $posts as $_post ) {
  	if ( has_post_thumbnail( $_post->ID ) ) {
  		echo '<a href="' . get_permalink( $_post->ID ) . '" title="' . esc_attr( $_post->post_title ) . '">';
  		echo get_the_post_thumbnail( $_post->ID, 'thumbnail' );
  		echo '</a>';
  	}
  }
  

• 示例5

  从返回的html中删除宽度和高度属性

  get_the_post_thumbnail函数生成带有img标记的html，该标记包括宽度、高度、src、类、alt和标题属性。如果有人希望删除宽度和高度属性，以下代码段很有用。

  此函数在返回html之前提供'post_thumbnail_html'过滤器。

  add_filter( 'post_thumbnail_html', 'remove_thumbnail_width_height', 10, 5 );
  
  function remove_thumbnail_width_height( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
      $html = preg_replace( '/(width|height)="d*"s/', "", $html );
      return $html;
  }
  

• 示例6

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

  if ( has_post_thumbnail() ) {
  	$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
  	if ( ! empty( $large_image_url[0] ) ) {
  		echo '<a href="' . esc_url( $large_image_url[0] ) . '" title="' . the_title_attribute( array( 'echo' => 0 ) ) . '">';
  		echo get_the_post_thumbnail( $post->ID, 'thumbnail' ); 
  		echo '</a>';
  	}
  }
  

• 示例7

  另请参见：
  the_post_thumbnail()

• 示例8

  您可以设置的不仅仅是类，如果您想优化SrcSet值，可以这样做

   echo get_the_post_thumbnail($post->ID, 'WhateverSize-Large', array('title' => 'WhateverTitle', 'sizes' => '(max-width: 320px) 288px, (max-width: 375px) 343px, (max-width: 425px) 393px, (max-width: 540px) 493px, (max-width: 768px) 320px, (max-width: 999px) 435px, 288px')); 

  通常在网格中，srcset可以达到100vw–有时太大了–这种方法可以让你控制它。

• 示例9

  列表上下文中的文章缩略图通常链接到它们所代表的内容。不是每次都添加，而是可以添加一个过滤器，根据传入的“$attr”自动执行。

  /**
   * Link thumbnails to their posts based on attr
   *
   * @param $html
   * @param int $pid
   * @param int $post_thumbnail_id
   * @param int $size
   * @param array $attr
   *
   * @return string
   */
  
  function wpdev_filter_post_thumbnail_html( $html, $pid, $post_thumbnail_id, $size, $attr ) {
  
  	 if ( ! empty( $attr[ 'link_thumbnail' ] ) ) {
  
  		$html = sprintf(
  			'<a href="%s" title="%s" rel="nofollow">%s</a>',
  			get_permalink( $pid ),
  			esc_attr( get_the_title( $pid ) ),
  			$html
  		);
  	 }
  
  	return $html;
  }
  
  add_filter( 'post_thumbnail_html', 'wpdev_filter_post_thumbnail_html', 10, 5 );
  

  只需“将上述内容添加到functions.php文件中”（可能有更好的位置），并在模板文件中这样使用它：

   'my-custom-class', // classes
  		'link_thumbnail' => TRUE, // yes please link my thumbnail
  	]
  );
  ?>
  

• 示例10

  为特色图片文章缩略图添加类

  // Give the Post_Thumbnail a class "alignleft".
  echo get_the_post_thumbnail( $post_id, 'post_thumbnail', array( 'class' => 'alignleft' ) );
  

• 示例11

  获取全尺寸图像

  the_post_thumbnail( 'large','style=max-width:100%;height:auto;');