こんにちは。
今回は記事一覧ページでもっと見るを実装できる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」を編集しますよ。
1 2 3 4 5 6 7 8 9 | 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(); } |
記事一覧の包含ボックス部分が#contentとなっているので、使っているテーマに合わせて書き換えます。
ボタンも「Load More Posts」になっているので、「もっと見る」などの好きな文言に変更できますよ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /** * 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('<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; }); }); |
一つの記事の包含ボックス部分が.postとなっているので、こちらも使っているテーマに合わせて書き換えます。
もう表示する記事がない場合「No more posts to load.」と表示されるようになっているので、こちらも好きな文言に変更できますよ。
1 2 3 4 5 6 | // 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'); } |
もう表示する記事がない時は何も表示しないという場合は、上記のようにCSSで表示しないようにするといいですね。
ボタンのスタイルはpbd-ajax-load-posts/css/style.cssに記述してあるので、デザインを変えたい時はこちらを編集します。
いかがでしたか。機能がシンプルなので、カスタマイズしやすいのがいいですね。
以上で記事一覧ページでもっと見るを実装できるWordPressプラグイン「PBD AJAX Load Posts」！でした。
