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

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

显示文章缩略图

postmore...

themore...

thumbnail 缩略图


描述

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

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

另见


参数

$size

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

默认值: 'post-thumbnail'

$attr

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

默认值: ''



源码

查看源码 官方文档


更新日志

版本描述
2.9.0开始引入

用户贡献的笔记

  • 贡献者:shramee

    文章缩略图尺寸:

    //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)
    

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

  • 贡献者:sheepysheep60Joseph Dickson

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

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

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

  • 贡献者:Barbara Ford

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

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

    示例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 );
    
  • 贡献者:Barbara Ford

    缩略图尺寸

    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()

  • 贡献者:brettalton

    如果您想删除缩略图上“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' );
  • 贡献者:Barbara Ford

    文章缩略图样式

    文章缩略图被赋予一个类“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' ) ); 
  • 贡献者:jesperstender

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

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

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

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

  • 贡献者:Barbara Ford

    默认用法

    // 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()

  • 贡献者:pablolopezmestre

    $attr:

    $attr = array(
        'src'   => $src,
        'class' => "your-css-class",
        'alt'   => "your alt text"
    );
    
  • 贡献者:julianoe

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

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

    the_post_thumbnail( '', array( 'loading' => '' ) );
    
  • 贡献者:smartyp

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

    the_post_thumbnail( '', array( 'loading' => 'eager' ) );
  • 贡献者:Anthony Hortin
  • 贡献者:Barbara Ford

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

    此示例链接到“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()
    		);
    	}
    }