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

    推薦書單

    用生活常識就能看懂財務報表
    用生活常識就能看懂財務報表 ⭐⭐⭐⭐
    洞悉市場的人:量化交易之父吉姆‧西蒙斯與文藝復興公司的故事
    洞悉市場的人:量化交易之父吉姆‧西蒙斯與文藝復興公司的故事 ⭐⭐⭐⭐
    大仙術士李白 (1)
    大仙術士李白 (1) ⭐⭐⭐⭐⭐
    抗老化,你需要大重量訓練
    抗老化,你需要大重量訓練 ⭐⭐⭐⭐⭐

    發佈留言

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

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