描述
当主题添加“post-thumbnail”支持时,会注册一个特殊的“post-thumbnail”图像尺寸,它不同于通过 设置 > 媒体 管理的“缩略图”图像大小。
使用the_post_thumbnail()或相关函数时,默认情况下使用“post-thumbnail”图像尺寸,但可以根据需要指定不同的尺寸。
另见
参数
- $size
-
(string|int[]) (可选) 图片尺寸。接受任何注册的图片尺寸名称,或以像素为单位的宽度和高度值数组(按该顺序)。
默认值: 'post-thumbnail'
- $attr
-
(string|array) (可选) 查询字符串或属性数组。
默认值: ''
源码
更新日志
版本 | 描述 |
---|---|
2.9.0 | 开始引入 |
使用示例
文章缩略图尺寸:
//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)
硬裁剪尺寸具有固定的高度和宽度
下面是使用数组的attr参数示例:
the_post_thumbnail('post-thumbnail', ['class' => 'img-responsive responsive--full', 'title' => 'Feature image']);
使用数组的键和值填充不同的属性。您可以使用它将类添加到文章缩略图。
文章缩略图链接到文章固定链接
注意:不要在同一主题中同时使用这两个示例。
示例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 );
缩略图尺寸
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()如果您想删除缩略图上“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' );
文章缩略图样式
文章缩略图被赋予一个类“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' ) );
如果您担心尺寸属性对于您的使用来说太大,您可以这样做:
the_post_thumbnail( 'large', array( 'sizes' => '(max-width:320px) 145px, (max-width:425px) 220px, 500px' ) );
'sizes'
数组由媒体查询组成,所以第一个参数是你的媒体查询,第二个参数是在该视口尺寸下应该渲染什么尺寸的图像。最后一个参数是默认尺寸,如果给定的媒体查询都不适用。如果使用基于列的栅格,而不希望在较小的视口中渲染100vw图像,则此选项非常有用。
默认用法
// 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()。
$attr
:$attr = array( 'src' => $src, 'class' => "your-css-class", 'alt' => "your alt text" );
禁用文章缩略图的延迟加载
如果您想防止WordPress添加延迟加载,请在主题调用缩略图的地方使用此行:
the_post_thumbnail( '', array( 'loading' => '' ) );
您还可以显式设置缩略图的即时加载(如果您不想让浏览器来决定):-
the_post_thumbnail( '', array( 'loading' => 'eager' ) );
将缩略图链接到大图像尺寸
此示例链接到“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() ); } }