0

我知道在 jquery masonry + 无限滚动上已经提出了很多问题，但是我已经阅读并尝试了所有内容，但它仍然对我不起作用。我想知道是否有人可以帮助我解决这个问题。

我正在用 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 选择器指向 > 到正确的 A 标记。如果您仍然收到此错误：大喊、尖叫并在 >infinite-scroll.com 上寻求帮助。

我想一定有什么问题：

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

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

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

4

2 回答 2

0

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

以下对我不起作用。

<?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，所以当我用谷歌搜索并将其更改为以下内容时，它可以工作。

<?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/

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

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

于 2013-05-24T10:36:48.220 回答
0

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

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 ); ?>
于 2013-05-23T19:13:43.750 回答