描述
当主题添加“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 | 开始引入 |
使用示例
设置文章缩略图的样式
文章缩略图被赋予“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' ) );
示例用法
<?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>
缩略图尺寸
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()
。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>'; } }
从返回的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; }
文章缩略图链接到大图像尺寸
此示例链接到“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>'; } }
另请参见:
the_post_thumbnail()您可以设置的不仅仅是类,如果您想优化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–有时太大了–这种方法可以让你控制它。
列表上下文中的文章缩略图通常链接到它们所代表的内容。不是每次都添加,而是可以添加一个过滤器,根据传入的“$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 ] ); ?>
为特色图片文章缩略图添加类
// Give the Post_Thumbnail a class "alignleft". echo get_the_post_thumbnail( $post_id, 'post_thumbnail', array( 'class' => 'alignleft' ) );
获取全尺寸图像
the_post_thumbnail( 'large','style=max-width:100%;height:auto;');