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; 
    }); 

        }

您的错误消息与无法通过infinitescroll加载的第3页相关

Masonry + Infintine滚动实现问题

1 个答案: