Display Images With Native Lazy Loading In WordPress.jpg

使用Native Lazy Loading顯示WordPress文章圖片

目錄

    原始文章

    使用Native Lazy Loading顯示WordPress文章圖片


    原始文章

    顯示WordPress文章圖片,並使用Native Lazy Loading


     

    更新

    WordPress5.5版在2020年8月11日公佈,裡面內建了圖片Lazy-loading功能,且此設定預設為開啟,因此並不需要再手動修改程式碼,此版本也首次將Sitemap變成內建功能。詳細內容請見〈WordPress 5.5 Field Guide〉

     

    Native Lazy Loading Responsive Images in WordPress

    來吧,複製貼上

    function custom_the_post_thumbnail($image_id){
    	$image_url = wp_get_attachment_url($image_id);
    	$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);
    	$image_srcset = wp_get_attachment_image_srcset($image_id);
    	$return = '<img class="w-100" src="'.$image_url.'" srcset="'.$image_srcset.'" loading="lazy" alt="'.$image_alt.'">';
    	echo $return;
    }

    範例應用

    while ( have_posts() ) {
      the_post();
      $image_id = get_post_thumbnail_id(); ?>
      <div class="">
        <?php custom_the_post_thumbnail($image_id); ?>
      </div>
      <?php
    }

    推薦文章

    《WordPress內容訂閱》 訂閱新書通知



    推薦文章

    Aron

    搭載商業思維的資料科學家,工業設計系畢業,曾任職知名品牌行銷企劃。下班後寫機器學習模型,寫網站,也寫文章。興趣是把Side Project當成創業題目來玩,把人生當成遊戲破關。

    facebook telegram

    推薦書單

    消失的國界
    消失的國界 ⭐⭐⭐⭐⭐
    大人學選擇:成熟大人的獨立思考術(暢銷增訂版)
    大人學選擇:成熟大人的獨立思考術(暢銷增訂版) ⭐⭐⭐⭐⭐
    蘭亭序殺局 卷一:玄甲衛
    蘭亭序殺局 卷一:玄甲衛 ⭐⭐⭐⭐⭐
    智識份子:換新你的概念直覺,做個複雜的現代人
    智識份子:換新你的概念直覺,做個複雜的現代人 ⭐⭐⭐⭐⭐

    發佈留言

    • * 表示必填欄位
    • 您填寫的電子郵件不會被公開
    • 請確認您的電子郵件正確無誤,當您的留言收到新的回覆時,我們會寄送通知信件給您

    發佈留言必須填寫的電子郵件地址不會公開。