如何将SRCSET与GET_THE_POST_THMBILINE()一起使用?

时间:2021-09-08 作者:Aditya Agarwal

我的wordpress主题使用get\\u the\\u post\\u thumbnail()在帖子上显示缩略图。

我已经设置了自定义图像大小,但在Lighthouse中运行会出现以下错误。

为低分辨率图像提供服务图像的自然尺寸应与显示大小和像素比成比例,以最大限度地提高图像清晰度。

我最初的做法是用

get_the_post_thumbnail($ID, \'large\');

这会影响我最大的内容绘制,并增加页面大小,从而影响我的性能。

我需要取得平衡。

那么,他们是不是可以包含多个缩略图尺寸,让wordpress选择最适合用户显示的尺寸,并向用户显示完美的尺寸?

1 个回复
最合适的回答,由SO网友:Aditya Agarwal 整理而成

我自己找到了解决方案。

defauly的Wordpress有多种尺寸。我们只需要添加src。

的第三个参数get_the_post_thumbnail 有一个数组,我们可以在其中设置属性,包括src set。

没有直接的方法可以在SRC集中为图像URL添加代码。所以我们需要使用wp_get_attachment_image_url 内部get_the_post_thumbnail 获取SRCSET的不同图像大小。

在单独找到合适的尺寸后,我们根据其宽度添加它们,如下所示。。

这里我们不使用px,因为设备使用不同的缩放比例和不同的像素密度,并且使事情变得复杂。取而代之的是w,它允许用户的浏览器自动从以下内容中选择合适的一个。

get_the_post_thumbnail(
                        null,
                        \'large\',
                        array( 
                            \'srcset\' => wp_get_attachment_image_url( get_post_thumbnail_id(), \'neve-blog\' ) . \' 480w, \' .
                                wp_get_attachment_image_url( get_post_thumbnail_id(), \'thumbnail\' ) . \' 640w, \' .
                                wp_get_attachment_image_url( get_post_thumbnail_id(), \'MedLarge\') . \' 960w\'
                        )
                    );

相关推荐

Single.php页面中无限的下一个/上一个帖子

我有一个关于这个代码的问题。当最后一个条目出现在“then”中时;“下一步”;我总是显示同一页。此外,我想添加下一篇文章的缩略图和标题。有可能吗?<?php if( get_adjacent_post(false, \'\', true) ) { previous_post_link(\'%link\' , \'%title\', \'&larr; \'); } else { $first