在Wordpress中使用砌體+無限滾動

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

我不知道我哪里出了問題，但是內容不會重新加載..

有人可以指出我嗎？

謝謝。

更新：我只知道有調試選項，當我打開它時，它給了我

抱歉，我們無法解析您的下一個（上一個帖子）URL。 驗證CSS選擇器點>指向正確的A標簽。 如果仍然出現此錯誤：大喊大叫，並請> 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

謝謝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，所以當我用Google搜索並將其更改為以下內容時，它就可以使用。

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

但有一件事是，URL是* / page / 2，這在我這邊找不到。

我的頁面實際上是在獲取類別中的所有自定義帖子條目，因此我沒有任何帶有/ page / 2的頁面。 示例在這里。 http://phototravel.flop.jp/category/japan/showa/

那無限滾動不適用於自定義帖子類型嗎？ 還是我仍然缺少什么？

我想我現在更接近解決方案了...