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

WordPress
スポンサーリンク

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

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

WordPressでTwitterウィジェットの遅延読み込みがしたい
Twitterウィジェットを遅延読み込みする「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ウィジェットが遅延読み込みされるはずです。お疲れ様でした。

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

WordPress版 Twitter Lazyloadを解説する
こちらの記事に記載したコードについての解説です。 TwitterのLazyloadが必要な方はリンク先を参照してください。functions.phpについてTwitter Lazyloadに使用しているPHPのコー...
タイトルとURLをコピーしました