Question

我知道有很多关于jquery砌体+无限卷轴的问题，但我已经阅读并尝试了所有内容，但它仍然无法解决我的问题。我想知道是否有人可以帮我解决这个问题。

我正在使用wordpress创建一个网站。我的页面显示了砌体样式中某些类别下的所有帖子（图像加载）。我想在滚动时自动加载内容。

这是我的代码。

（1）Wordpress模板

<?php
 $args = array(
'post_type'     => 'custom_post',
'posts_per_page' => '10',
'category__in' => "$cat_id",
'post_status'   => 'publish',
'orderby'       => 'date',
'order'         => 'ASC'
);

$loop = new WP_Query($args);
?>

<div id="masonryArea" class="clearfix">
<?php while($loop->have_posts()): $loop->the_post(); ?>
<div class="entry">
  /* displaying the image here */
</div>
</div>
<nav id="page-nav">
    <a href="#"></a>
</nav>

（2）jquery

jQuery(document).ready(function(){
    // masonry 
    var $container = jQuery('#masonryArea');
    $container.imagesLoaded(function(){
        $container.masonry({ 
        itemSelector: '.entry',
        columnWidth: 250
    });
});
$container.infinitescroll({
    navSelector : '#page-nav',
    nextSelector : '#page-nav a',
    itemSelector: '.entry',
    loading: {
        finishedMsg: 'End of entry',
        img: 'http://phototravel.flop.jp/wp-content/themes/pt/images/loading.gif'
    }
},
function(newElements){
    // hide new items while they are loading
    var $newElems = $(newElements).css({opacity:0});
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
        newElems.animate({opacity:1});
        $container.masonry('appended', $newElems, true);
    });
}
);
});

我不知道我哪里出错，但内容不会重新载入..

有人可以指出我吗？

谢谢。

更新：我只知道有调试选项，当我打开它时，它给了我

抱歉，我们无法解析您的下一个（以前的帖子）网址。验证您的css选择器点＆gt;到正确的A标签。如果您仍然收到此错误：请大声喊叫，并在＆gt; infinite-scroll.com上寻求帮助。

我想一定有问题：

<nav id="page-nav">
<a href="#"></a>
</nav>

我终于意识到href必须是有效的。

现在的问题是，我的页面显示了Wordpress中一个类别的所有帖子。什么是同一类别的其余10个帖子的链接（href）？

Answer 1

您需要一些实际的导航链接，将以下内容放在WP主题的functions.php文件中：

function so16718316_content_nav( $loop ) {
    if ( $loop->max_num_pages > 1 ) : ?>
        <nav id="page-nav" class="navigation" role="navigation">
            <?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'my_textdomain' ) ); ?>
            <?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'my_textdomain' ) ); ?>
        </nav><!-- #page-nav .navigation -->
    <?php endif;
}

并调用模板文件中的函数：

<?php so16718316_content_nav( $loop ); ?>

Answer 2

谢谢你，我指出了正确的方法！但它仍然存在一些问题。对不起，我不能使用“回复”功能，因为我的消息太长了..

以下内容与我无关。

<?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'my_textdomain' ) ); ?>
<?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'my_textdomain' ) ); ?

我想这是因为我使用的是自定义帖子类型的UI，所以当我用Google搜索并将其更改为以下内容时，它可以正常工作。

<?php previous_posts_link('≪ Previous', $loop->max_num_pages); ?>
<?php next_posts_link('More ≫', $loop->max_num_pages); ?>

但有一点是，网址是 * / page / 2，这在我这边找不到。

我的页面实际上是获取某个类别中的所有自定义帖子条目，因此我没有任何带/ page / 2的页面。样品在这里。 http://phototravel.flop.jp/category/japan/showa/

无限滚动不适用于自定义帖子类型吗？或者我还缺少什么？

我想我现在离解决方案更近了......

在wordpress中使用砌体+无限滚动

2 个答案: