<?php the_post_thumbnail( \'medium-thumbnail\', array( \'loading\' => false ), [ \'alt\' => esc_html ( get_the_title() ) ] ); ?>
在pagespeed上获取诊断信息最大的有内容绘制图像未延迟加载
我怎么了?
<?php the_post_thumbnail( \'medium-thumbnail\', array( \'loading\' => false ), [ \'alt\' => esc_html ( get_the_title() ) ] ); ?>
在pagespeed上获取诊断信息最大的有内容绘制图像未延迟加载
我怎么了?
single-post.php:
<img src="<?php the_post_thumbnail_url(\'medium\') ?>" class="img-fluid rounded shadow-3 mb-1" alt="<?php the_title() ?>" loading="lazy">
启用对帖子和页面上帖子缩略图的支持:https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ add_filter( \'post_thumbnail_html\', \'wpdd_modify_post_thumbnail_html\', 10, 5 );
/**
* Add `loading="lazy"` attribute to images output by the_post_thumbnail().
*
* @param string $html The post thumbnail HTML.
* @param int $post_id The post ID.
* @param string $post_thumbnail_id The post thumbnail ID.
* @param string|array $size The post thumbnail size. Image size or array of width and height values (in that order). Default \'post-thumbnail\'.
* @param string $attr Query string of attributes.
*
* @return string The modified post thumbnail HTML.
*/
function wpdd_modify_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
return str_replace( \'<img\', \'<img loading="lazy"\', $html );
}
source: https://wpdevdesign.com/native-lazy-loading-responsive-images-in-wordpress/
我有一些图片在一个容器中,我想添加一个覆盖和图标。这不是现成的,但我找到了一些有用的代码:HTML:<div class=\"main\"> <span class=\"featured\"><img src=\"http://joshrodg.com/IMG_001-258x258.jpg\" title=\"\" alt=\"\"></span> </div> CSS:.featured {