当前浏览:首页 / WordPress函数 / get_the_post_thumbnail()

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

检索文章缩略图

postmore...

themore...

thumbnail 缩略图


描述

当主题添加“post-thumbnail”支持时,会注册一个特殊的“post-thumbnail”图像尺寸,它不同于通过 设置>媒体 管理的“缩略图”图像大小。

使用the_post_thumbnail()或相关函数时,默认情况下使用“post-thumbnail”图像尺寸,但可以根据需要指定不同的尺寸。


参数

$post

(int|WP_Post) (可选) Post ID或WP_Post对象。默认值为全局$post

默认值: null

$size

(string|int[]) (可选) 图片尺寸。接受任何注册的图片尺寸名称,或以像素为单位的宽度和高度值数组(按该顺序)。

默认值: 'post-thumbnail'

$attr

(string|array) (可选) 查询字符串或属性数组。

默认值: ''


返回

(string) 文章缩略图图片标签。


说明

如果当前主题的functions.php文件中add_theme_support( 'post-thumbnails' );被附加到一个钩子,必须在触发init钩子之前调用它。对于某些功能来说,init钩子可能太晚了。如果连接到挂钩,则必须为after_setup_theme



源码

查看源码 官方文档


更新日志

版本描述
4.4.0$post可以是post ID或WP_Post对象
2.9.0开始引入

使用示例

  • 示例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;');