将类名称添加到帖子缩略图

时间：2013-06-06 作者：Simon Cooper

我正在使用post缩略图链接到页面。

是否可以将类名添加到后期缩略图图像中。

<li><a href="<?php the_permalink(); ?>" ><?php the_post_thumbnail(); ?></a></li>

4 个回复
最合适的回答,由SO网友:sabreuse 整理而成

是的-你可以通过你想要使用的课程the_post_thumbnail() 例如，作为attributes参数的一部分<?php the_post_thumbnail(\'thumbnail\', array(\'class\' => \'your-class-name\')); ?>

参考号：http://codex.wordpress.org/Function_Reference/the_post_thumbnail#Styling_Post_Thumbnails

SO网友:s_ha_dum

您可以过滤这些类。

function alter_attr_wpse_102158($attr) {
  remove_filter(\'wp_get_attachment_image_attributes\',\'alter_attr_wpse_102158\');
  $attr[\'class\'] .= \' new-class\';
  return $attr;
}
add_filter(\'wp_get_attachment_image_attributes\',\'alter_attr_wpse_102158\');
在调用之前添加筛选器the_post_thumbnail. 过滤器将自动移除。

去那里有点费劲，但是the_post_thumbnail 使用get_the_post_thumbnail 其中使用wp_get_attachment_image 应用该过滤器。

SO网友:Dave

对于我网站中的大多数图像，我在图像周围添加了一个图形元素，如下所示。这样，我就可以保持所有内容不变，并且仍然可以使用CSS中的类调用元素。

<?php if ( has_post_thumbnail() ) { ?>
    <figure class="your-class">
        <?php echo get_the_post_thumbnail(); ?>
    </figure>
<?php } ?>

SO网友:Dexter

2021年5月WordPress 5.7 ✔

默认值the_post_thumbnail() 将从WordPress输出所有必需的属性。

<?php the_post_thumbnail(); ?>

<!-- DOM -->
<img 
    src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg" 
    class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
    alt=""
    loading="lazy" 
    srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w" 
    sizes="(max-width: 1500px) 100vw, 1500px" 
    width="1500" 
    height="800"
    >

使用class 数组属性

使用class 没有$size 参数或$size 像thumbnail 将删除srcset 属性。因为当你的尺寸只有150 x 150.

<?php the_post_thumbnail(array(\'class\' => \'classname\')); ?>
<?php the_post_thumbnail(\'thumbnail\' array(\'class\' => \'classname\')); ?>

<!-- DOM -->
<img 
    src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-150x150.jpg"
    class="classname wp-post-image"
    alt="" 
    loading="lazy"
    width="150"
    height="150"
    >
srcset 将提供thumbnail. 可用尺寸为thumbnail, medium, large, full. 可以在WordPress的仪表板中调整大小>；设置（>）；媒体\'

thumbnail:  150px
medium:     300px
large:      1024px
full:       Your original uploaded size
使用medium 大小相同。

<?php the_post_thumbnail(\'medium\' array(\'class\' => \'classname\')); ?>

<!-- DOM -->
<img 
    src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg" 
    class="classname img-fluid wp-post-image" 
    alt=""
    loading="lazy" 
    srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w" 
    sizes="(max-width: 300px) 100vw, 300px"
    width="300"
    height="160"
    >

使用函数

可以使用函数将类包含到帖子中（函数由@s\\u ha\\u dum提供）。Iam添加引导img-fluid 在这里小心！完全阅读

// using function to add class to `the_post_thumbnail()`
function alter_attr_wpse_102158($attr) {
    remove_filter(\'wp_get_attachment_image_attributes\',\'alter_attr_wpse_102158\');
    $attr[\'class\'] .= \' img-fluid\';
    return $attr;
}
add_filter(\'wp_get_attachment_image_attributes\',\'alter_attr_wpse_102158\');
注意引导类img-fluid 添加到类属性中。

<?php the_post_thumbnail(); ?>

<!-- DOM -->
<img 
    src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg" 
    class="attachment-post-thumbnail size-post-thumbnail img-fluid wp-post-image" 
    alt="" 
    loading="lazy" 
    srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w,
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w" 
    sizes="(max-width: 1500px) 100vw, 1500px" 
    width="1500" 
    height="800"
    >

功能class 使用函数时，在第2个post上消失class 只在第一个帖子上有效，在第二个帖子上消失了。直接在上使用该类the_post_thumbnail()

<?php the_post_thumbnail(\'full\' array(\'class\' => \'img-fluid\')); ?>
记住srcset 属性对于thumbnail.

结束
标签： post-thumbnails   小码农  

相关推荐