プラグインに頼らないajax通信のページ送り

先日更新した内容に伴うネタです。
本テーマでTOPページのみに採用したajax通信を使ったページ送り。ツイッター等にある、同ページ内で新しい記事を読み込ませる方法です。

ajaxを使ってコンテンツを抜き取ります

ajax通信を使うと、同ページ以外のデータやHTMLを読み取り表示する事が出来ます。
ただし、クロスドメインは無理!!　(JSONPは除く)
でそれを使ってページ送りにするワケですが、少し段取りがいります。

wordpressの場合、まずajax通信で表示したい記事数を2ページ目の記事数にします。

    function my_query($query){
        if ( is_admin() || ! $query->is_main_query() ){
            return;
        }
        $query->set('posts_per_page', '2');
    }
    add_action('pre_get_posts', 'my_query');

こーゆーのです。
上のままだと全ての記事数が２件になるので、コピペはダメです。
1ページ目と2ページ目以降の表示件数を変える場合、ifで分岐させる必要があります。
コチラのサイト様が参考になります→http://ounziw.com/2014/07/11/wordpress-pre_get_posts/

全ての件数を統一して、ページ送りで出力する件数も同じにする場合上のコードの【2】の部分を好みにしても良いし、ダッシュボード→設定からでも表示件数を変えられます。

そして出力したい記事数のセットが終わったら、テンプレートに少し加えます。

    <?php if ( have_posts() ) : ?>
        <div id="moreajax">
            <?php while ( have_posts() ) : the_post(); ?>
                <?php　get_template_part( 'content', get_post_format() ); ?>
            <?php endwhile; ?>
            <?php if(!is_paged()): ?><div id="more"></div><?php endif; ?>
            <div id="more_disp"><a>もっと表示</a></div>
        </div>
    <?php endif; ?>

index.phpだったり、front-page.phpだったりテーマによりけりだと思いますが、記事を出力する部分があると思いますので、そこに特定のIDと【もっと表示する】を追加します。

上のコードだと、2ページ目の【id=”moreajax”】の中にある部分を引き抜き、
引き抜いたHTMLを【id=”more”】の中に収める感じです。

次はJS。

var now_post = 2;
var sec_post = 1;
    $("#more_disp a").live("click", function() {
    $("#more_disp").html('ロード中のHTML');  
  $.ajax({
      url      : "自分のドメイン/?paged=" + now_post,
        })
      .done(function(data) { 
        now_post_num = now_post + sec_post;
        $("#more_disp").remove();
        $('#more').append($(data).find('#moreajax').html()); })
      .fail(function( data ) {
        $("#more_disp").html('<div id="more_disp"><a>次の記事はありません</a></div>'); });
  });

こんな感じです。
wordpressはデフォルトのパーマリンクでアクセスがあると、カスタムパーマリンクでもリダイレクトするので自分のドメイン/?paged=&にページ数があれば記事を取りに行きます。
あとはHTMLをごっそり引き抜いて表示させて終わり。
ちなみに3ページ目とか4ページ目が無ければ404になるので記事は見つからないって事になります。

最初はSQLを使って記事を取得するって方法を参考にしていたのですが、何でも脆弱性があるとかであまり良くないという意見がフォーラムにありました。それにヨクヨク考えた結果、わざわざdbからデータととって整形するよりHTMLをごっそり取ったほうが簡単じゃね？
って事でこんな感じになりました。

ではでは

---

---