WordPressにTwitterウィジェットのLazyloadを実装する

「WordPressなら世界中の誰かがやっている、プラグインで対応できる」と考えていましたが存在しませんでしたので自作することにしました。

作成に至るまでの経緯はこちら ↓

Twitterウィジェットを遅延読み込みする「Twitter Lazyload」はこちら ↓ この記事ではTwitter Lazyloadを作成するに至った経緯から、コードを試行錯誤した内容までをテキトーに書いています。ネットに成功が転がっ...

諸注意
Twitter Lazyload

諸注意

後述するコードは初心者が作成したものです。コードの使用により起こった全ての事象につきまして本サイトは責任を負いません。
本サイトに記載されたコードの転載は固く禁じます。改変する場合はリンクを併記するようお願いいたします。

Twitter Lazyload

WordPressの管理画面からテーマファイルエディタを開きます。

functions.phpにはこちらのコードを記述

add_filter('the_content', function($content) {
    $content = str_replace('class="twitter-tweet"', 'class="lazy-tweet"', $content);
    $content = str_replace('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>', '', $content);
    return $content;
    });

javascript.jsにはこちらのコードを記述します

window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));


const loadTarget = document.getElementsByClassName("lazy-tweet");

const loadOption = {
    root: null,
    rootMargin: "100% 0px 100% 0px",
    threshold: 0
};

const loadCallback = (entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
                entry.target.classList.add("twitter-tweet");
        }
    });
};

const loadObserver = new IntersectionObserver(loadCallback, loadOption);

for (let i = 0; i < loadTarget.length; i++) {
    loadObserver.observe(loadTarget[i]);
};


window.addEventListener('load', function(){
    twttr.widgets.load(
        document.getElementsByClassName("lazy-tweet")
    );
});

window.addEventListener('scroll', function(){
    twttr.widgets.load(
        document.getElementsByClassName("lazy-tweet")
    );
});

これでTwitterウィジェットが遅延読み込みされるはずです。お疲れ様でした。

リンク

コードの解説についてはこちら ↓