記事一覧ページでもっと見るを実装できるWordPressプラグイン「PBD AJAX Load Posts」!

2016/11/09

こんにちは。
今回は記事一覧ページでもっと見るを実装できるWordPressプラグイン「PBD AJAX Load Posts」!です。

記事一覧ページでページャーや「次へ」のボタンを付けるのではなく、「もっと見る」などのボタンを付けてページを変えずに次の記事一覧を取得できるWordPressプラグンを紹介します。

※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。

記事一覧ページでもっと見るを実装できるWordPressプラグイン「PBD AJAX Load Posts」!

PBD AJAX Load Posts

load-next-wordpress-posts-with-ajax

 

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(‘

Load More Posts

‘);

// 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のカスタマイズがわかる本
一歩先にいくWordPressのカスタマイズがわかる本

 

機能がシンプルなので、カスタマイズしやすいのがいいですね。
以上で記事一覧ページでもっと見るを実装できるWordPressプラグイン「PBD AJAX Load Posts」!でした。

Topへ戻る