Load Next WordPress Posts With AJAX
WordPressの記事一覧は、デフォルトでは指定の表示数以上になると「次のページへ」のリンクを表示、クリックすることで次の記事一覧を表示させます。
今回紹介するプラグインはページ遷移をさせずに、そのページのままで次の記事一覧を取得できるようにします。
なんだか言葉にするとややこしいですね…。
twitterを一番下までスクロールするとページ遷移なしで、過去の投稿が読み込まれますよね。基本的にそれと同じことをWordpressで出来るようになるためのプラグインです。
（”自動”で読み込まれる部分は今回は書きません）
用意するもの
Load Next WordPress Posts With AJAXからプラグイン一式をダウンロードしましょう。基本的な使い方もこのページに全部書いてあります。
まずはダウンロードしたプラグイン一式の入ったフォルダ「pbd-ajax-load-posts」を
下記のwordpressのpluginsフォルダの中に入れてしまいましょう。
wp-content/plugins/
プラグインを有効化しよう
pluguinsフォルダに一式を入れると、管理画面のプラグインにpbd-ajax-load-postsが表示されるので、有効化しましょう。有効化して、きちんとプラグインが動いていれば、ページのソース内に下記のようなscriptタグが挿入されているはずです。
<script type='text/javascript'>
/* <![CDATA[ */
var pbd_alp = {
startPage: "1",
maxPages: "6",
nextLink: "http://サイトのURL/page/2/"
};
/* ]]> */
</script>
ここに挿入されたデータを使用して、次の記事一覧を取得することができます。
startPageは、はじめに表示されるページなので大体”1″です。
maxPageは、記事一覧ページの最大数になります。
nextLinkは、次の記事一覧を表示するurlです。
ここで一番重要なのはnextLinkです。
このurlを取得出来れば、あとはAjaxで必要な要素を取得するだけです。
load-post.jsをカスタマイズしよう
このプラグインで、個別にカスタマイズする必要がある部分はこのload-post.jsです。
これはpbd-ajax-load-postsフォルダの中のjsフォルダに入っています。
このjsについては少し詳しく解説しましょう。
公式の「jQuery – The Heart of our Plugin」の項を追っていく形で記述していきます。
jQuery(document).ready(function($) {
// The number of the next page to load (/page/x/).
var pageNum = parseInt(pbd_alp.startPage) + 1;
// The maximum number of pages the current query can return.
var max = parseInt(pbd_alp.maxPages);
// The link of the next page of posts.
var nextLink = pbd_alp.nextLink;
まず最初に書いてあるこの3行は、前述したプラグインによって追加された stargPge, maxPage, nextLink を取得しています。これからこの値を使って、Ajaxを実行していくわけです。
/**
* Replace the traditional navigation with our own,
* but only if there is at least one page of new posts to load.
*/
if(pageNum <= max) {
// Insert the "More Posts" link.
$('#content')
.append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
.append('<p id="pbd-alp-load-posts"><a href="#">Load More Posts</a></p>');
// Remove the traditional navigation.
$('.navigation').remove();
}
英語でも書いてありますが、この記述でデフォルトのページナビゲーションを消して、プラグインによるAjax読み込み用のボタンを追加しています。ちなみに「Load More Posts」のテキストは「もっとみる」とか画像など任意のものに変更できます。
class名が「pbd-alp-placeholder」の方は、読み込んだ記事を囲むタグ部分、
id名が「pbd-alp-load-posts」の方は、読み込みボタンを生成しています。
ここで注意したい点がひとつ。
wordpressのデフォルトテーマを使っている方はこのままでも問題ありませんが、テーマを自作した方はこれだとうまくいかない場合があります。
感のいい人はもう気付いたかもしれませんが、囲むタグもボタンも#contentに追加するように書かれています。もし自作テーマで、記事一覧が表示領域を囲んでいるタグが#content以外の場合は、使用しているid名またはclass名に変更しなければなりません。
/**
* Load new posts when the link is clicked.
*/
$('#pbd-alp-load-posts a').click(function() {
// Are there more posts to load?
//読み込むページがまだあるか判定する
if(pageNum <= max) {
// Show that we're working.
//ボタンのテキストを任意のもの（”読み込み中”など）に書き換える。
$(this).text('Loading posts...');
//最初にセットした次のページのURLを使って、次の記事部分のhtmlをloadする。
$('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
function() {
// Update page number and nextLink.
pageNum++;
nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);
// Add a new placeholder, for when user clicks again.
//ここで更に次の記事一覧を読み込ませるタグを生成
$('#pbd-alp-load-posts')
.before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
// Update the button message.
//ここで読み込む記事がまだあるかどうかを判定している。
if(pageNum <= max) {
$('#pbd-alp-load-posts a').text('Load More Posts');
} else {
$('#pbd-alp-load-posts a').text('No more posts to load.');
}
}
);
} else {
$('#pbd-alp-load-posts a').append('.');
}
return false;
});
});
この部分は、ところどころ上記のコメントに書いたように、追加した「次の記事を読み込むボタン」をクリックした際の挙動について記述しています。
中身を読んでそれぞれの処理を分解してみれば、そこまで難しいことはしていません。要するにjQueryに標準搭載されているload( url, data, callback )を使用して、次の記事一覧ページのhtmlから記事の書かれたタグを読み込んでいるだけです。
ちなみにここでも、前述と同じように自作テーマを使用している人は「load(nextLink + ‘ .post’,」部分の’.post’は自身で設定した記事を囲んだタグに変更する必要があります。
Styleはボタンの装飾だけ
公式サイトに書かれているstyle部分の記述を見れば、cssに関してはボタンの装飾に関するものだけだとわかります。
装飾に関しては、各自のサイトデザインに合わせてそれぞれカスタマイズするのが良いでしょう。元のファイルをがんがん改変してしまって問題ないと思います。
このプラグインは基本的にイレギュラーなことはしておらず、基本的な機能を組み合わせているため自分の都合に合わせてカスタマイズもしやすいと思います。
例えば「ページを最後までスクロールしたら自動で次の記事一覧を読み込む」なんて実装にも手が届くんじゃないでしょうか。
基礎からのWordPress 改訂版 (BASIC LESSON For Web Engineers)
– Amazonで見る
