2015-05-09 83 views
0

我設法實現在WordPress砌築無限滾動和它的工作,但我有一對夫婦的bug:砌體+ Infintine滾動實施問題

的職位都應該在阿賈克斯被打開,但它不工作了現在添加項目,只爲前幾個。

所有帖子顯示後,控制檯輸出錯誤: GET http://www.jcvergara.com/working/page/3/?_=1431138637809 404(未找到)。 我不確定它與什麼有關。我將不勝感激任何想法如何解決它。

這裏是我的代碼:

<div class="main"> 
    <div id="content" class="container"> 
     <div class="right-line"></div> 

     <!-- List of categories, only on the first page --> 
     <?php 
       $cur_url = $_SERVER['REQUEST_URI']; 
       if ($cur_url == '/working/') { 
        echo '<div class="item tags">'; 
        echo '<div class="item-title">'; 
        echo '<span class="tag">Tags</span>'; 
        echo '<ul><li><a href="/working/" class="active">All</a></li>'; 
        wp_list_categories('orderby=term_group&title_li='); 
        echo '</ul></div></div>'; 
       } 

      ?> 

     <!-- Posts --> 
     <?php if (have_posts()) : ?> 
      <?php while (have_posts()) : the_post(); ?> 
       <?php $category = get_the_category(); ?> 
       <div class="item <?php echo $category[0]->slug; ?>"> 
        <a class="mask post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"></a> 
        <div class="item-title"> 
         <span class="tag"> 
          <?php echo $category[0]->cat_name; ?> 
         </span> 
         <h4><?php the_title(); ?></h4> 
        </div> 
        <div class="item-img"> 
         <?php if (has_post_thumbnail($post->ID)): ?> 
          <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail'); ?> 
          <div class="thumb" style="background-image: url('<?php echo $image[0]; ?>'); "></div>         
         <?php endif; ?> 
        </div> 
        <div class="item-text"> 
         <?php the_excerpt(); ?> 
         <span class="more"><a href="#">Read more...</a></span> 
        </div> 
       </div> 
      <?php endwhile; ?> 
     <?php endif; ?> 
     <div class="clear"></div>  
    </div> 
    <?php the_posts_navigation(); ?> 
</div> 

在阿賈克斯開放職位代碼:

$(document).ready(function(){ 
$.ajaxSetup({cache:false}); 
$('.post-link').click(function(){ 
    $('.openarticle').css('display', 'block'); 

    var post_link = $(this).attr('href'); 

    $('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>'); 
    $('#openthis').load(post_link); 
    $('<a></a>', { 
     text: 'Close', 
     class: 'close', 
     id: 'close', 
     href: '#' 
    }) 
    .prependTo($('.openarticle .main')) 
    .click(function() { 
     $('.openarticle').css('display', 'none'); 
     $('#close').remove(); 
    });  
    return false;   
}); 
}); 

這裏是鏈接:http://www.jcvergara.com/working/

在此先感謝。

回答

1

您需要在無限滾動的回調函數中添加用於打開帖子的代碼。 (順便說一下,實際上你應該包括無限滾動的特定代碼和你的代碼來打開你的問題的帖子,而不僅僅是一個鏈接。)

下面是應該幫助的無限滾動代碼的一部分:

 function(newElements) { 
      var $newElems = $(newElements); 
      $container.masonry('appended', $newElems); 
    //add this to your code 

    $('.post-link').click(function(){ 
    $('.openarticle').css('display', 'block'); 

    var post_link = $(this).attr('href'); 

    $('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>'); 
    $('#openthis').load(post_link); 
    $('<a></a>', { 
     text: 'Close', 
     class: 'close', 
     id: 'close', 
     href: '#' 
    }) 
    .prependTo($('.openarticle .main')) 
    .click(function() { 
     $('.openarticle').css('display', 'none'); 
     $('#close').remove(); 
    }); 
    return false; 
    }); 

     } 

你的錯誤信息涉及到沒有3頁通過infinitescroll加載

+0

謝謝你,我不知道回調。完美工作。 – elkah

+0

至於控制檯錯誤,我發現它與在這種情況下不存在的頁面3有關。我不明白的是爲什麼它要求頁面3.你有任何想法偶然嗎?我在這裏放置了完整的磚石無限滾動代碼:https://jsfiddle.net/zu97m04c/。謝謝。 – elkah