如何啓用AJAX的Wordpress WP Page-Navi插件

我正在關注如何爲我創建的kids toys site的AJAX wordpress分頁Pippin Williamson's tutorial。如何啓用AJAX的Wordpress WP Page-Navi插件

使用下面的JavaScript：

jQuery(document).ready(function(){ 
    jQuery('.pagination_container a').live('click', function(e) { 
    e.preventDefault(); 
    var link = jQuery(this).attr('href'); 
    jQuery('.content').fadeOut(500).load(link + '.content .prodlist_container', function() { 
    jQuery('.content').fadeIn(500); }); 
    }); 
});

...我設法讓分頁的工作，但我遇到了以下問題：

在加載頁面分頁長時間的延遲（考慮小圖像尺寸）
所有產品圖片奇怪地被賦予懸停狀態（藍色圖形）
分頁按鈕不長呃正常工作。

任何建議/建議讚賞，因爲我已經繞圈了一段時間。

下面是情況下，HTML/PHP的幫助：

<div class="content"> 


     <div class="breadpage_container group"> 

      <div id="breadcrumb_container"> 


      </div><!-- end breadcrumb_container --> 

      <div class="pagination_container"> 


      </div><!-- end pagination container --> 

     </div><!--end breadpage_container --> 

     <div class="prodlist_container"> 

      <ul class="products group"> 

      <!-- loop to show products list --> 

      <?php $args = array(
       'post_type' => 'products', 
       'orderby' => 'title', 
       'order' => 'DES', 
       'posts_per_page' => 8, 
       'paged' => get_query_var ('page'), 
       'post_parent' => $parent 
       ); ?> 

      <?php query_posts($args); ?> 

      <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

       <li> 

        <a href="<?php the_permalink() ?>" class="product_image"> 
         <?php echo get_post_meta($post->ID, 'ProductImage', true);?> 
         <span class="overlay"></span> 
        </a> 

        <h3 class="product_tit"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h3> 
        <p class="price_tag"><?php echo get_post_meta($post->ID, 'ProductPrice', true); ?></p> 

       </li> 

      <?php endwhile; ?> 

      <?php else :?> 

       <p>There are no products to display</p> 

      <?php endif; ?> 


      </ul> 



     <div class="breadpage_container group" id="lower_breadpage_container"> 

      <div class="pagination_container"> 

       <?php wp_pagenavi(); ?> 

       <?php wp_reset_query(); ?>     

      </div><!-- end pagination container --> 

     </div><!--end breadpage_container --> 

     </div><!-- prodlist_container --> 


</div><!-- end content -->

來源

2011-07-06 nfrost21

我認爲有幾個不同的問題在這裏。首先，它看起來像你的load()函數有一個小錯誤。加載頁面片段時，您需要傳入URL後跟選擇器，但是您的字符串在URL和選擇器之間沒有空格。它應該閱讀：

jQuery('.content').fadeOut(500).load(link + ' .content .prodlist_container', function() {

這應該解決的加載速度慢和分頁問題（目前它可能試圖解析一堆.prodlist_container的div和感到困惑）。

至於懸停問題，我的猜測是你已經在$(document).ready()上的jQuery中發起了這個，但是當通過AJAX加載頁面片段時，這不會被觸發。你可能不得不$(document).ready()下添加目前你有東西到頁面起始功能，並呼籲該load()完成時，像這樣：

jQuery('.content').fadeOut(500).load(link + ' .content .prodlist_container', function() { 
    pageInit(); // New function with content of $(document).ready() 
    jQuery('.content').fadeIn(500); }); 
});

記住，你現在得叫pageInit()在$(document).ready()雖然！

來源

2011-07-07 21:23:46 JunkMyFunk

非常感謝JunkMyFunk先生 - 我添加了空間，使您的分頁工作成爲可能，並創建了一個單獨的pageinit函數，每次觸發分頁鏈接時都會調用它。它現在工作完美。我會給你一個綠色的勾號，但不能直到我有15個聲望點:( - 非常感謝你的幫助先生。 – nfrost21

對於我來說圖片加載速度不夠快，但延遲可能是因爲你加載jquery分頁插件，可能會增加幾秒鐘。

我認爲hoover問題需要在每次加載新頁面時重置事件，因爲當您執行$（document）.ready（）時，第二頁和第三頁的< li>未加載。

1,2,3分頁按鈕對我很好，但>>停在第二頁。您需要更新該按鈕的HREF每次你加載了新的一頁，但我不知道分頁插件是如何工作的？

來源

2011-07-08 10:32:44 alez

稍微改變了@ JunkMyFunk代碼的伎倆，我的版本：

//AJAX PAGINATION 
jQuery('.wp-pagenavi a').on('click', function(e){ 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    jQuery('#property-results').load(link + ' #property-results', function() { 
     jQuery('#property-results').fadeIn(500); 
    }); 
});

來源

2012-12-28 22:03:37

如何啓用AJAX的Wordpress WP Page-Navi插件

回答

相關問題