Wordpress投稿タイプ無制限スクロール/ロードmoreボタン

Question

私は現在、WPに特定の量（24）のカスタム投稿タイプを表示するために、またプロジェクトカテゴリを使って投稿を動的にフィルタリングするために、次のコードを使用しています。

これは、アイソトープフィルタリングを使用して、これらの命令からいくつかの変更を加えて作成されました。 https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/

更新：Marissaコメントの後、これは私のコードがフィルタをどのように見えるかです。

<div class="loadMore" data-offset="0" data-total="25"> 
Load More 
</div> 

「データ・オフセット」負荷よりボタンは、「データ・トータル」とにもたらしている出力HTMLで

<?php 
global $post; 
$the_offset = trim(sanitize_text_field(wp_unslash($_POST['pOffset']))); 
$the_total = trim(sanitize_text_field(wp_unslash($_POST['totalPosts']))); 

$args = array('post_type' => 'bw_projects', 'posts_per_page' => 12, 'offset' => $the_offset); 
$posts_shown = $the_offset; //Increment this every time you display a project 
?> 

       <?php while ($the_query->have_posts()) : $the_query->the_post(); 
        $termsArray = get_the_terms($post->ID, "project_categories"); //Get the terms for this particular item 
        $termsString = ""; //initialize the string that will contain the terms 
        foreach ($termsArray as $term) { // for each term 
        $termsString .= $term->slug.' '; //create a string that has all the slugs 
        } 
        ?> 
        <li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?> 
          <a href="<?php echo get_permalink($post->ID); ?>"> 
           <?php the_post_thumbnail(); ?> 
           <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span> 
          </a> 
        </li> <!-- end item --> 
         <?php endwhile; ?> 
         </ul> <!-- end isotope-list --> 
       <?php endif; ?> 
<?php } ?> 

<?php //Then check if we've shown all the posts or not, and we're done. 
if ($posts_shown >= $the_total) { ?> 
    <div id="all-posts-shown"></div> 
<?php } ?> 

：

<?php $args = array('post_type' => 'bw_projects', 'posts_per_page' => 18); ?> 

<?php $the_query = new WP_Query($args); ?> 

<?php if ($the_query->have_posts()) : ?> 
<ul class="img-list" id="isotope-list"> 

<?php $total_posts = wp_count_posts('bw_projects'); 
$total_posts = $total_posts->publish; 
$number_shown = 0; ?> 

<?php while ($the_query->have_posts()) : $the_query->the_post(); 
$termsArray = get_the_terms($post->ID, "project_categories"); //Get the terms for this particular item 
$termsString = ""; //initialize the string that will contain the terms 
foreach ($termsArray as $term) { // for each term 
$termsString .= $term->slug.' '; //create a string that has all the slugs 
} 
?> 
<li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?> 
    <a href="<?php echo get_permalink($post->ID); ?>"> 
     <?php the_post_thumbnail(); ?> 
     <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span> 
    </a> 
</li> <!-- end item --> 
<?php endwhile; ?> 
</ul> <!-- end isotope-list --> 
<?php endif; ?> 
      <?php if ($number_shown < $total_posts) { ?> 
<div class="loadMore" data-offset="<?php echo $number_shown; ?>" data-total="<?php echo $total_posts; ?>"> 
     Load More 
</div> 
<?php } ?> 

マイloadmoreファイルには、この現在の状態になっています

以上の負荷がオフセットの変更をクリックします

<div class="loadMore" data-offset="12" data-total="25"> 
Load More 
</div> 

余分な投稿は表示されません。私は何かを逃したに違いないと思う。

Answer 1

ボタンをクリックするかスクロールすると、次のラウンドの記事をプルすることができます。あなたはまだ物事のハングを取得している場合、ボタンのクリックは少し追跡するのが簡単です。

あなたのループが投稿を表示する前に、あなたのカスタム投稿タイプに合計投稿数が表示されていることと、あなたが表示した数を把握するためのカウンタを調べてください。

$total_posts = wp_count_posts('bw_projects'); 
$total_posts = $total_posts->publish; 
$number_shown = 0; 

プロジェクトを表示するたびに増分番号が表示されます。その後、ループの後で、表示するプロジェクトがさらにあるかどうかを確認し、オフセット（既に表示されている投稿の数）と合計を格納するデータ属性を持つloadmoreボタンを追加します。

<?php if ($number_shown < $total_posts) { ?> 
    <div class="loadMore" data-offset="<?php echo $number_shown; ?>" data-total="<?php echo $total_posts; ?>"> 
       Load More 
    </div> 
<?php } ?> 

次に、次の投稿を取得するためにAJAXを使用できます。あなたが最初にあなたのAJAX機能を登録する：あなたがボタンの上にあなたのAJAX機能を設定したいその後

<?php 
/** 
* Put the following code in your functions.php file 
* get_loadmore is the name of the ajax function we are registering 
* projects-loadmore.php is the file with the contents which will be loaded 
* when the ajax call is made. 
*/ 

      add_action('wp_ajax_get_loadmore', 'get_loadmore'); 
      add_action('wp_ajax_nopriv_get_loadmore', 'get_loadmore'); 
      function get_loadmore() { 

       include(get_template_directory().'/projects-loadmore.php'); 
       wp_die(); 

      } 
?> 

<script> 
/**--- 
    Notes: 
    When loadMore button is clicked 
    This passes information to and pulls content dynamically from the template: projects-loadmore.php 
    The returned php and html code is inserted at the end of the #isotope-list div's content 
    variables are pulled from the loadmore button's data attributes. 
    Variables Passed: 
     - postOffset : how many posts have already been displayed 
     - totalPosts : The total number of published posts in this post type. 
---**/ 

$('.loadMore').click(function() { 

    //get the offset 
    var postOffset = $(this).attr('data-offset'); 
    var totalPosts = $(this).attr('data-total'); 
    var thisObj = $(this); 

    //get Page Template and put on page 
    var ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>'; 

    $.ajax({ 
     type: 'POST', 
     url: ajax_url, 
     data: { 
      action: 'get_loadmore', 
      pOffset: postOffset, 
      totalPosts: totalPosts, 
     }, 
     dataType: "html", 
     success: function(data) { 
      $('#isotope-list').append(data); 
      $new_offset = parseInt (thisObj.attr('data-offset')) + 24; 
      thisObj.attr('data-offset', $new_offset) //set the new post offset. 
      if ($('#all-posts-shown')[0]) { 
       thisObj.slideUp(); //hide loadmore if all posts have been displayed. 
      } 
     }, 

     error: function(MLHttpRequest, textStatus, errorThrown){ 
      alert("error"); 
     } 
    }); 
}); //end of click function 
</script> 

をクリックして次に残っているすべては、あなたのプロジェクト-loadmore.phpファイルに行くことです、クエリを微調整、変数をつかむ、との記事を表示：

<?php 
global $post; 
$the_offset = trim(sanitize_text_field(wp_unslash($_POST['pOffset']))); 
$the_total = trim(sanitize_text_field(wp_unslash($_POST['totalPosts']))); 

$args = array('post_type' => 'bw_projects', 'posts_per_page' => 24, 'offset' => $the_offset); 
$posts_shown = $the_offset; //Increment this every time you display a project 
?> 

//Get your posts and insert your while loop and display code here 

<?php //Then check if we've shown all the posts or not, and we're done. 
if ($posts_shown >= $the_total) { ?> 
    <div id="all-posts-shown"></div> 
<?php } ?> 

あります、より多くのあなたがアニメーションと微調整の面でこれを行うことができますが、これはあなたを取得するのに十分でなければなりません開始しました。