添加無限滾動到Ajax加載（Wordpress）類別查詢

Question

已解決。請參閱以下更新。

以下幾個不同的在線教程，我已經設法創建一個函數，以通過Ajax基於從下拉菜單中選擇的類別來修改我的WordPress帖子顯示。

我現在想添加無限滾動到Ajax加載的內容，我似乎無法弄清楚該怎麼做。

我將不勝感激關於如何進行的任何想法。提前致謝。

這裏是我的WordPress的功能：

function ajax_filter_posts_scripts() { 
    // Register and enqueue script 
    wp_register_script('afp_script', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', false, null, false); 
    wp_enqueue_script('afp_script'); 

    // localize script 
    wp_localize_script('afp_script', 'afp_vars', array(
     'afp_nonce' => wp_create_nonce('afp_nonce'), 
     'afp_ajax_url' => admin_url('admin-ajax.php'), 
    )); 
} 

add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100); 

function wp_infinitepaginate() { 
    // Verify nonce 
    $nonce = $_POST['afp_nonce']; 
    if (!isset($nonce) || !wp_verify_nonce($nonce, 'afp_nonce')) 
     die ('Permission denied'); 

    if (is_front_page()) { 
     $paged = (get_query_var('page')) ? get_query_var('page') : 1; 
    } else { 
     $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
    } 
    $cat = $_POST['val']; 
    $args = array(
     'category_name' => $cat, 
     'post_status' => 'publish', 
     'posts_per_page' => '4', 
     'paged' => $paged, 
    ); 

    query_posts($args); 
    get_template_part('custom-loop'); 

    exit; 
} 

add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate');   // for logged in user 
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // if user not logged in 

下面是我用JS：

jQuery(document).ready(function($) { 

    jQuery("#la-chooser").change(function() { 
     loadArticlebyCat(this.value); 
    }); 

    function loadArticlebyCat(cat){ 

     data = { 
      action: 'infinite_scroll', 
      val: cat, 
      afp_nonce: afp_vars.afp_nonce, 
     }; 

     jQuery.ajax({ 
      url: afp_vars.afp_ajax_url, 
      type:'post', 
      data: data, 
      success: function(data, textStatus, XMLHttpRequest) { 
       jQuery("#tb-ajax-content").html(data); 
       console.log(textStatus); 
       console.log(XMLHttpRequest); 
      }, 
      error: function(MLHttpRequest, textStatus, errorThrown) { 
       console.log(MLHttpRequest); 
       console.log(textStatus); 
       console.log(errorThrown); 
       jQuery("#tb-ajax-content").html('No posts found'); 
      } 
     }); 

     return false; 
    } 

}); 

這裏的類別下拉式過濾器：

Filter by Category: <select id="la-chooser" style="padding:5px 10px;margin-left:5px;"> 
    <option value="">All Categories</option> 
     <?php 
      $categories = get_categories(); 
      foreach ($categories as $category) { 
       $option = '<option value="'.$category->category_nicename.'">'; 
       $option .= $category->cat_name; 
       $option .= '</option>'."\n"; 
       echo $option; 
      } 
     ?> 
</select> 

Answer 1

更新...這是爲我工作的最終代碼

這可能並不完美，但它似乎對我沒有任何錯誤，對我來說很好。如果您有任何建議，請隨時添加任何改進建議。

JS代碼

jQuery(document).ready(function($) { 

    var count = 2; 

    jQuery("#la-chooser").change(function() { 
     loadArticlebyCat(this.value); 
    }); 

    function loadArticlebyCat(cat){ 

     data = { 
      action: 'infinite_scroll', 
      val: cat, 
      afp_nonce: afp_vars.afp_nonce, 
     }; 

     jQuery.ajax({ 
      url: afp_vars.afp_ajax_url, 
      type:'post', 
      data: data, 
      success: function(data, textStatus, XMLHttpRequest) { 
       jQuery("#tb-ajax-content").html(data); 
       jQuery('#infinitBtn span').html('Load More Entries'); 
       console.log(textStatus); 
       console.log(XMLHttpRequest); 
       count = 2; 
      }, 
      error: function(MLHttpRequest, textStatus, errorThrown) { 
       console.log(MLHttpRequest); 
       console.log(textStatus); 
       console.log(errorThrown); 
       jQuery("#tb-ajax-content").html('No posts found'); 
      } 
     }); 

     return false; 
    } 

    jQuery('#infinitBtn').click(function(){ 
     loadArticle(count); 
     count++; 
     return false; 
    }); 

    function loadArticle(pageNumber) { 

     var cat = jQuery("#la-chooser").val(); 

     jQuery.ajax({ 
      url: afp_vars.afp_ajax_url, 
      type:'POST', 
      data: "action=infinite_scroll&page_no="+ pageNumber + "&loop_file=loop&val="+ cat +"&afp_nonce="+afp_vars.afp_nonce, 
      success: function(html) { 
       if(html=="") { 
        jQuery('#infinitBtn span').html('All Entries Loaded'); 
       } else { 
        jQuery('#infinitBtn span').html('Load More Entries'); 
       } 
       jQuery("#tb-ajax-content").append(html); 
      } 
     }); 

     return false; 
    } 

}); 

WordPress的功能

請注意我在一家兒童主題用這個，所以你可能會想使用得到的模板目錄的URI，而不是get_stylesheet_directory_uri如果你沒有使用兒童主題。

function ajax_filter_posts_scripts() { 

    // Register and enqueue script 
    wp_register_script('afp_script', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', false, null, false); 
    wp_enqueue_script('afp_script'); 

    // localize script 
    wp_localize_script('afp_script', 'afp_vars', array(
     'afp_nonce' => wp_create_nonce('afp_nonce'), 
     'afp_ajax_url' => admin_url('admin-ajax.php'), 
    )); 

} 

add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100); 

function wp_infinitepaginate() { 

    // Verify nonce 
    $nonce = $_POST['afp_nonce']; 
    if (!isset($nonce) || !wp_verify_nonce($nonce, 'afp_nonce')) 
     die ('Permission denied'); 

    $paged = $_POST['page_no']; 
    $cat = $_POST['val']; 
    $args = array(
     'category_name' => $cat, 
     'post_status' => 'publish', 
     'posts_per_page' => '6', 
     'paged' => $paged, 
    ); 

    query_posts($args); 
    get_template_part('custom-loop'); 
    wp_reset_query(); 

    exit; 
} 

add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate');   // for logged in user 
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // if user not logged in 

主循環代碼下拉式類別選擇

<div class="latest-article-chooser clearfix"> 
    <h1>Latest Blog Posts</h1> 
    <p> 
     <span>Filter Posts by Category:</span> <select id="la-chooser"> 
      <option value="">All Categories</option> 
       <?php 
        $categories = get_categories(); 
        foreach ($categories as $category) { 
         $option = '<option value="'.$category->category_nicename.'">'; 
         $option .= $category->cat_name; 
         $option .= ' ('.$category->count.')'; 
         $option .= '</option>'."\n"; 
         echo $option; 
        } 
       ?> 
     </select> 
    </p> 
</div> 

<div id="tb-ajax-content"> 

<?php 
    if (is_front_page()) { 
     $paged = (get_query_var('page')) ? get_query_var('page') : 1; 
    } else { 
     $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
    } 
    $count = 1; 
    query_posts(array(
     'post_status' => 'publish', 
     'posts_per_page' => '6', 
     'paged' => $paged, 
    )); 

    get_template_part('custom-loop'); 
?> 

</div> 

<div class="post-clear"></div> 

<a class="button sc blue" href="#" id="infinitBtn"><span>Load More Entries</span></a> 

自定義迴環文件（定製loop.php）

還有這裏包括一些特定主題功能所以你想用自己的功能（或本地WordPress功能）替換它們。

<?php 
    $count = 1; 
    if (have_posts()) : while (have_posts()) : the_post(); 
?> 

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost"> 

     <div class="entry-wrap"> 

      <div class="entry-media"> 
       <?php 
        if (tb_option('medium_thumb')) { 
         themebeagle_medium_thumbnail(); 
        } else { 
         themebeagle_large_thumbnail(); 
        } 
       ?> 
      </div> 

      <div class="entry-container"> 

       <header class="entry-header"> 
        <?php 
         themebeagle_entry_title(); 
         themebeagle_entry_meta(); 
        ?> 
       </header><!-- .entry-header --> 

       <div class="entry-content" itemprop="text"> 
        <?php themebeagle_excerpt(); ?> 
       </div><!-- .entry-content --> 

      </div> <!-- .entry-container --> 

      <footer class="entry-footer"> 
       <?php themebeagle_entry_meta_bottom(); ?> 
      </footer><!-- .entry-footer --> 

     </div> <!-- .entry-wrap --> 

    </article> <!-- article.post --> 

<?php 
    $count = $count + 1; 
    endwhile; 
    endif; 
    wp_reset_query(); 
?>