Help us understand the problem. What is going on with this article?

無限スクロールを実装する個人メモ【infinite scroll】

なにこれ?

無限スクロールを実装する。
たまに使うけど、よく忘れるのでメモ。
自分以外絶対参考にならないと思う。

①ファイルの読み込み

公式サイトからファイルのダウンロードなどをする。(CDNでも可)
functions.phpに読み込みの記述をする。
※wp enqueue scriptを使ったファイルの読み込み方法はここにはメモしないので必要であればググってくれ。

functions.php
wp_enqueue_script('infinite-scroll', get_template_directory_uri().'/js/infinite-scroll.js', '','',true);

②記事を作成する

最初に表示しておく数以上の記事を作成しておく。
12個初期表示、ボタンを押したら12個追加で表示・・・となるので、
記事が10個しかなかったら検証しようがないので注意。
(たまに忘れてて「あれ?」ってなる。)

③プラグインのインストール

WP-PageNaviをWordPressにインストール。

④ファイルをあれこれする

無限スクロールのphpファイル(テンプレート)を作成。(コードは確認とって後日ここに載せる。)
archives.phpのページナビの上に読み込みをする。

archives.php
<?php get_template_part( 'template-parts/infinite-scroll' ); ?>
  <?php 
   if (function_exists('wp_pagenavi')) {
      wp_pagenavi();
  }?>

⑤scripts.jsに記述

scripts.js
//無限スクロール
var infScroll = new InfiniteScroll('.archives--inner', { //記事を囲っているクラス
    append: '.archives--item', // 記事のクラス
    path: '.nextpostslink', //WP-PageNaviの次ページリンクのクラス
    hideNav: '.wp-pagenavi', // WP-PageNaviを指定
    button: '#more-button', //もっと読むボタンのID
    scrollThreshold: false, // ページを読み込んだ時にURLを変更するかどうか(ちょっと曖昧)
    status: '.scroller-status',// ローディングのクラス
    history: 'push',// ページの変更ごとに新しい履歴エントリを作成
});

⑥_infinite-scroll.scssを追加する。

他の案件からコピペでOK。そのうち解説かく。

リンク

Codex

wp enqueue script:スクリプトファイルがまだインクルードされていない場合、また、すべての依存するスクリプトが登録済みの場合、依存関係に従った適切なタイミングでファイルを生成されたページにリンクします。

a_ChAn
ひよっこフロントエンドエンジニア。頑張らねばならぬ。自分のメモとして記載しますが間違ってたらごめんなさい・・・こっそり教えてください。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした