Masonry + Infinite scroll 实现问题

Question

我设法在 WordPress 中用砖石实现了无限滚动，它正在工作，但我有几个错误：

帖子应该是用ajax打开的，但现在对添加的项目不起作用，只对前几个项目起作用。

显示所有帖子后，控制台输出错误： 获取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>

ajax开帖代码：

$(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/

提前致谢。

Answer 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 页有关