WordView中的JQuery Masonry和Infinite Scroll

Question

我目前正在為自己制作一個投資組合網站，使用修改后的版本'Gridly'wordpress主題。 這是當前的網站 。

現在我正在嘗試實現'無限滾動'插件 ，但我似乎無法讓它工作。

我不確定這里是否有人熟悉這個特定的插件，但為了以防萬一，我使用的選擇器是：

Content Selector: #post-area
Navigation Selector: .view-older
Next Selector: .view-older a:first
Item Selector: .post

我無法確定哪些代碼與此處發布相關，但這是index.php包含的內容：

<?php get_header(); ?>

<?php if (have_posts()) : ?>
<div id="post-area">
<?php while (have_posts()) : the_post(); ?> 

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
     <?php if ( has_post_thumbnail() ) { ?>
     <div class="gridly-image"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'summary-image' );  ?></a></div>
      <div class="gridly-category"><p><?php the_category(', ') ?></p></div>

      <?php } ?>
            <div class="gridly-copy"><h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            <p class="gridly-date"><?php the_time(get_option('date_format')); ?>  </p>

<?php the_excerpt(); ?> 

           <p class="gridly-link"><a href="<?php the_permalink() ?>"></a></p>
     </div>
   </div> 



<?php endwhile; ?>
</div>
<?php else : ?>
<?php endif; ?>

<?php next_posts_link('<p class="view-older">View Older Entries</p>') ?>


<?php get_footer(); ?>

我還將行為設置為Masonry / Isotope，並確保插件已激活。

如果有人能幫我解決這個問題，我會非常感激。 我（顯然）不是網絡開發者，所以如果任何這些聽起來很愚蠢，請耐心等待。

Answer 1

我做的！ 為了任何可能遇到同樣問題的人的利益，我就是這樣解決的：

首先，出於某種原因，這個主題包括“查看舊帖子”功能，但它沒有包括“查看更新帖子”的功能。 我通過復制解決了這個問題

<?php next_posts_link('<p class="view-older">View Older Entries</p>') ?>

並且在鏈接周圍創建一個div，並添加另一行代碼，以便它說明

<div ="navigation>
<?php next_posts_link('<p class="view-older">View Older Entries</p>') ?>
<?php previous_posts_link('<p class="view-newer">View Newer Entries</p>') ?>
</div>

接下來，我將無限滾動選擇器更改為

Content Selector: #post-area
Navigation Selector: #navigation
Next Selector: #navigation a:first
Item Selector: #post-area .post

希望如果其他人遇到類似的問題，這將有所幫助。 :)

Answer 2

我不敢回答，但是評論太長了。 您的鏈接在HTML中有點棘手，並且包含a p （雖然技術上與您的doctype“合法”，但這不是一個好主意）。

<a href="http://www.finlaydownes.com/page/2/" ><p class="view-older">View Older Entries</p></a>

不確定a:first是針對性的，還是指的是什么。