Breaking
Search
SCLIPPS
ajaxloadmore

WordPress Ajax Load Moreをアーカイブページで使用する方法

0
WordPress

WordPressでページネーションを使用せずAjax（非同期通信）で動的に読み込んで表示してくれるプラグイン「Ajax Load More – Infinite Scrol」、すごく便利で簡単に設置できるので重宝していますが、カテゴリーアーカイブ、タグアーカイブ、検索結果等に使用する方法です。個人的にはかなり使う機会の多いコードですので自分のメモ的な記事になります。
基本的な使用方法は検索すれば出てくるので割愛します。

Ajax Load More – Infinite Scrol
https://wordpress.org/plugins/ajax-load-more/

archive.phpにて使用する

<?php
  if ( is_category() ) {
    $cat = get_category( get_query_var( 'cat' ) ); $category = $cat->slug;
    echo do_shortcode('[ajax_load_more post_type="post" category="'.$category.'"]');
  } else if (is_tag() ) {
    $now_tag = single_tag_title('',false);
    $tag_properties = get_term_by('name', $now_tag, 'post_tag');
    $now_tag_slug = $tag_properties->slug;
    echo do_shortcode('[ajax_load_more post_type="post" tag="'.$now_tag_slug.'"]');
  }
?>

単純に、カテゴリー、タグのスラグを取得して変数で代入するだけですね。
簡単です。

search.phpにて使用する

<?php
$term = $_GET['term'];
echo do_shortcode('[ajax_load_more post_type="post" search="'. $term .'"]');
?>

フォームからタームを取得して代入。archive.phpとほとんど変わらないですね。

おまけ1: 記事数が設定件数に満たない場合にボタンを非表示にする

こちらはjsでボタンを非表示にしちゃいます。表示件数が10件の場合

if($('.article').length <= 8) {
  $('.alm-load-more-btn').hide();
}

おまけ2: 読み込む記事がこれ以上ない場合にボタンを非表示にする

これ以上読み込む記事がない場合はbuttonのクラスに.doneがつくのでcssで非表示にするだけです。

.alm-load-more-btn.done {
display: none !important;
}

以上です。

Tags:

Related Stories