WordPress的Ajax負載更多文章

Question

我使用wordpress，我想不使用默認分頁dinamically加載更多的帖子。我正在使用以下JS。

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

    // The number of the next page to load (/page/x/). 
    var pageNum = parseInt(pbd_alp.startPage) + 1; 

    // The maximum number of pages the current query can return. 
    var max = parseInt(pbd_alp.maxPages); 

    // The link of the next page of posts. 
    var nextLink = pbd_alp.nextLink; 

    var loadMore = pbd_alp.loadMore; 

    var loadingPosts = pbd_alp.loadingPosts; 

    var noMorePosts = pbd_alp.noMorePosts; 

    /** 
    * Replace the traditional navigation with our own, 
    * but only if there is at least one page of new posts to load. 
    */ 
    if(pageNum <= max) { 
     // Insert the "More Posts" link. 
     $('#ec-main') 
      .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>') 
      .append('<p id="pbd-alp-load-posts"><a href="#">'+ loadMore +'</a></p>'); 

     // Remove the traditional navigation. 
     $('nav[role=pagination]').remove(); 
    } 


    /** 
    * 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(loadingPosts); 

      $('.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(loadMore); 
        } else { 
         $('#pbd-alp-load-posts a').text(noMorePosts); 
        } 
       } 
      ); 
     } else { 
      $('#pbd-alp-load-posts a').append('.'); 
     } 

     return false; 
    }); 
}); 

這PHP代碼

function pbd_alp_init() { 
    global $wp_query; 

    // Add code to index pages. 
    if(!is_singular()) { 
     // Queue JS and CSS 
     wp_enqueue_script(
      'pbd-alp-load-posts', 
      get_template_directory_uri() . '/js/ajax-posts.js', 
      array('jquery'), 
      '1.0', 
      true 
     ); 

     wp_enqueue_style(
      'pbd-alp-style', 
      get_template_directory_uri() . '/css/ajax-posts.css', 
      false, 
      '1.0', 
      'all' 
     ); 

     // What page are we on? And what is the pages limit? 
     $max = $wp_query->max_num_pages; 
     $paged = (get_query_var('paged') > 1) ? get_query_var('paged') : 1; 

     // Add some parameters for the JS. 
     wp_localize_script(
      'pbd-alp-load-posts', 
      'pbd_alp', 
      array(
       'startPage' => $paged, 
       'maxPages'  => $max, 
       'nextLink'  => next_posts($max, false), 
       'loadMore'  => __('Load More', 'met'), 
       'loadingPosts' => __('Loading...', 'met'), 
       'noMorePosts' => __('No More Posts to Load', 'met'), 
      ) 
     ); 
    } 
} 
add_action('template_redirect', 'pbd_alp_init'); 

此代碼工作正常，但如果我嘗試加載更多的職位，我都如。 1圖庫文章，這種類型的post post使用的函數。可能是因爲主腳本沒有再次加載。

你有解決方案來避免這個問題嗎？

謝謝。

Answer 1

您是否嘗試過插件Jetpack，它具有無限滾動支持，非常棒！