こんにちは。
今回は記事一覧ページでもっと見るを実装できるWordPressプラグイン「PBD AJAX Load Posts」！です。
記事一覧ページでページャーや「次へ」のボタンを付けるのではなく、「もっと見る」などのボタンを付けてページを変えずに次の記事一覧を取得できるWordPressプラグンを紹介します。
※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。
記事一覧ページでもっと見るを実装できるWordPressプラグイン「PBD AJAX Load Posts」！
PBD AJAX Load Posts
WordPressプラグイン「PBD AJAX Load Posts」のダウンロード
http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/からプラグイン一式をダウンロードします。
ダウンロードしたプラグイン「pbd-ajax-load-posts」を「wp-content」→「plugins」にアップロードしますよ。
[プラグイン]→[インストール済みプラグイン]をクリックし、「PBD AJAX Load Posts」を有効化します。
WordPressプラグイン「PBD AJAX Load Posts」の設定
[プラグイン]→「プラグイン編集」で「PBD AJAX Load Posts」を選択します。
その中の「pbd-ajax-load-posts/js/load-posts.js」を編集しますよ。
[javascript]
if(pageNum <= max) {
// Insert the "More Posts" link.
$('#content')
.append('
‘)
.append(‘
‘);
// Remove the traditional navigation.
$(‘.navigation’).remove();
}
[/javascript]
記事一覧の包含ボックス部分が#contentとなっているので、使っているテーマに合わせて書き換えます。
ボタンも「Load More Posts」になっているので、「もっと見る」などの好きな文言に変更できますよ。
[javascript]
/**
* 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...');
$('.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('
‘)
// 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;
});
});
[/javascript]
一つの記事の包含ボックス部分が.postとなっているので、こちらも使っているテーマに合わせて書き換えます。
もう表示する記事がない場合「No more posts to load.」と表示されるようになっているので、こちらも好きな文言に変更できますよ。
[javascript]
// Update the button message.
if(pageNum <= max) {
$('#pbd-alp-load-posts a').text('Load More Posts');
} else {
$('#pbd-alp-load-posts a').css('display', 'none');
}
[/javascript]
もう表示する記事がない時は何も表示しないという場合は、上記のようにCSSで表示しないようにするといいですね。
ボタンのスタイルはpbd-ajax-load-posts/css/style.cssに記述してあるので、デザインを変えたい時はこちらを編集します。
機能がシンプルなので、カスタマイズしやすいのがいいですね。
以上で記事一覧ページでもっと見るを実装できるWordPressプラグイン「PBD AJAX Load Posts」！でした。
