Twitterのように、ページ遷移せずに次のページの記事を自動で読み込ませるWordPressプラグイン「WP-AutoPagerize」

  • 22064
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Facebook やTwitter などのサイトでもよく目にする「次のページの記事を自動で読み込ませる」仕組み。

Ajax を利用してWordPress 上でも実装できるみたいですが、やや仕様に制限が出るかもしれないものの、ここは WP-AutoPagerize というWordPressプラグインを利用する方が便利かと思います。

但し複雑なレイアウト(たとえばギャラリーのようなサイト)の場合、期待した動作にもっていくのはちょっと難しいかもしれません。あくまで縦方向に下へ下へと記事が続いていくような、一般的なブログ形式のサイトで使われる方が良いかと思います。
※当ブログでも試験的に実装してみましたが、運用するかどうかはまた考えます。。。

WP-AutoPagerize のインストール

以下のサイトから WP-AutoPagerize のプラグインファイルをダウンロードしてWordPress 管理画面で有効化します。

プラグインのインストールと有効化が完了したら、WP-AutoPagerize の設定画面へ移動します。


WP-AutoPagerize の動き

WP-AutoPagerize プラグインを設定すると、従来のページャーの上に青い■とページナビ付きで表示されます。
Twitterのように、ページ遷移せずに次のページの記事を自動で読み込ませるWordPressプラグイン「WP-AutoPagerize」

青い■の画像をクリックすると、以下のように読み込みが始まります。loading…
Twitterのように、ページ遷移せずに次のページの記事を自動で読み込ませるWordPressプラグイン「WP-AutoPagerize」

2 ページ目の記事がページ下部に表示されます。
Twitterのように、ページ遷移せずに次のページの記事を自動で読み込ませるWordPressプラグイン「WP-AutoPagerize」

WP-AutoPagerize の機能と特徴

静止画だと分かり辛いのですが…試しに使用してみた上での感触は概ね以下の感じです。
■自動表示させるエリア(例えば <div class=”post”></div> など)を管理画面から設定。
■次のページの記事を読み込んで表示させる処理を「ボタンクリック」か「マウススクロールによる自動読込」のいずれかから選択。
■従来のページャーと自動読込ボタンを併設可能なので、page-2、page-3…というページ送りも残せる。
WordPressの管理画面で1 ページの記事表示数を「10件」と設定している場合、「次を読む」リンクをクリックすると次のページの10 記事をそのままページ下部に表示し続けていきます。

WP-AutoPagerize の設定画面で「マウススクロールによる自動読込」にしていると、ページを下って行くごとに自動で記事が表示され続けて行きます。表示する記事がなくなった時点でようやくフッターに辿り着きます。
※見てもらいたいコンテンツをフッターに配置している場合、特に「マウススクロールによる自動読込」の設定にしていると…多分見てもらえません。。。



WP-AutoPagerize の設定(1)

WP-AutoPagerize の設定画面のポイントは以下の通りです。
Twitterのように、ページ遷移せずに次のページの記事を自動で読み込ませるWordPressプラグイン「WP-AutoPagerize」

取得対象

取得追加する要素をclassセレクタで指定します。指定できるセレクタは一つです。投稿記事を <div class=”post”></div> で指定している場合は「div.post」と入力します。

要素の挿入位置

取得した要素の挿入位置はデフォルトではページャーの前になりますが、指定要素の前にすることができます。指定した要素の前に追加されます。要素はIDでのみ指定することができます。
※ここは設定しなくても動かすことはできます。

ページ番号

「ページャーより下にカーソルをもっていくと自動読み込み」か「ボタンクリックで次ページの記事一覧を下に追加」のいずれかを選択します。


WP-AutoPagerize の設定(2)

設定画面の後半部分はこんな設定値です。
Twitterのように、ページ遷移せずに次のページの記事を自動で読み込ませるWordPressプラグイン「WP-AutoPagerize」

初期設定

「タイプ」の項目で「AutoPagerize」を選択した場合に有効になります。Disabled にするとデフォルトで自動読み込みをしません。

読み込みボタンテキスト

「タイプ」の項目で「ButtonPagerize」を選択した場合に有効になります。追加読み込みボタンのValue 値です。

ページャー次ページ
ページャー前ページ

ページャーの「次ページ」「前ページ」のそれぞれのリンクのテキストです。

※「要素追加前の処理」「コールバック(要素追加後の処理)」については特別な設定をしなくても動くかと思います。この辺りの詳細は プラグイン配布先のサイト様 にて説明がされておりますので参照してみてください。


フロント画面の設定・カスタマイズ

管理画面で設定を終えると、以下のコードをテーマファイル(index.php やarcives.php など)の任意の場所に設置します。

従来のページャーがある付近に設置することが多いと思いますので、例えばトップページであれば index.php の <div class=”navigation”></div> 付近に以下のPHP コードを設置します。
<?php if(function_exists('wp_autopagerize')) { wp_autopagerize(); } ?>
<div class="navigation">
…
</div>
あとは任意で「loading…」のgif画像を変えれば設置は完了です。

Loading 画像を簡単に生成できるサービス

以下のサイトでローダーの画像を自由に作ることができますので、
ここでローダー画像を作成→ダウンロードします。
Twitterのように、ページ遷移せずに次のページの記事を自動で読み込ませるWordPressプラグイン「WP-AutoPagerize」


ダウンロードしたローダーのGIF 画像をリネームして、
wp-content/plugins/wp-autopagerize/
フォルダ内に画像をアップロードすれば、オリジナルのローダー画像が表示されます。
※但し、プラグインのアップグレード時には注意が必要です。
Twitterのように、ページ遷移せずに次のページの記事を自動で読み込ませるWordPressプラグイン「WP-AutoPagerize」

IE 対策を中心に、注意すべき3つのポイント

WP-AutoPagerize が正常に動かない…という場合は、以下の3つのポイントを確認してみてください。

<?php wp_headerr(); ?>、<?php wp_footer(); ?> の記述漏れ

これは他のプラグインにも言えることだと思いますので、
まずはテーマファイルの header.php、footer.php の記述を確認してみてください。

他のプラグインとの干渉

他のプラグインなどが干渉している可能性がありますので、WP-AutoPagerize が動かない場合は
・他のプラグインファイルを無効にして動作させてみる。
・他のjQuery などのJavascript ファイルを外して動作させてみる。
などをしてみてください。

HTML 5のタグを使用している場合は、IE で正常に動作しない可能性あり

個人的に一番はまったのがこの問題。。。

当ブログもHTML 5ベースで組んでいるため、<section></section> などのタグで投稿記事をマークアップしています。

どうやらこの WP-AutoPagerize プラグイン、IE では <sectionsection class=”post” id=”posyt-id-111″></section> のようなHTML 5タグでマークアップされた投稿記事の場合だと、次のページの記事を読み込んで表示してくれない…ようでした。
jQueryや他のプラグインを外して、もまったく動かない。> <;

ですので仕方なく、
<sectionsection class="post" id="posyt-id-111">
投稿記事
</section>
の記述を
<div class="post" id="posyt-id-111">
<section class="entry">
投稿記事
</section>
</div>
と変更した上で、管理画面の WP-AutoPagerize 設定画面で「div.post」と設定変更しました。これでどうやらIE 8でも正常に動作するようになるみたい。(IE7以下、IE9では未検証です。)

Chrome、Firefox、Safari、Oprea などの他のブラウザでは <section></section> のようなHTML 5タグでも問題なく自動読み込みしてくれるのですが、IE はまだまだ利用者も多いため、この点はプラグイン導入時に注意が必要だと思います。

  • 22064
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

この投稿と関連する記事一覧

この記事に関するコメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください