WordPressの無限スクロールが動かない? Ajax Pagination and Infinite Scrollが動作しない時の対処法

WordPressの無限スクロールが動かない? Ajax Pagination and Infinite Scrollが動作しない時の対処法

どうも、イソップです。

WordPressでの無限スクロール実装は、「Ajax Pagination and Infinite Scroll」というプラグインを使うと便利なんですが、
先日IE11で動作しなかったため、バグ対策をしてみました。

Ajax Pagination and Infinite Scrollとは

Ajax Pagination and Infinite Scroll

記事一覧ページで、Ajaxによる無限スクロールを実装できる、WordPressプラグインです。
ページの下までスクロールしたら、次のページへのリンクのコンテンツを自動的に取得して、今いるページの下に追加します。
みなさんもうお馴染みではないでしょうか。

Ajax Pagination and Infinite Scroll

設定ページから各設定が行なえて、何よりシンプル設計で便利なんですよね。

IE11やAndroidで動かない時の対処法

実はちゃんと動作テストされていないのか、IEやAndroidで動かなくて、読み込みが止まってしまうんです。
プラグインが正常に動作してくれないと困りますので、バグを解決します。

  1. プラグインをダウンロードします。
  2. ダウンロードしたファイル内の /js/main.js を編集します。
  3. 下のコードをファイルの先頭に追記します。
  4. サーバーにアップロードします。
(function () {
    function customevent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createevent( 'customevent' );
        evt.initcustomevent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
    }

    customevent.prototype = window.event.prototype;

    window.customevent = customevent;
})();

window.CustomEventに問題があるので、定義しなおしています。

もし動かない時に試してみてください。

参考サイト

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.