WordPress 中的 JQuery Masonry 和无限滚动答案

【问题标题】：JQuery Masonry and Infinite Scroll in WordpressWordPress 中的 JQuery Masonry 和无限滚动
【发布时间】：2013-06-14 08:05:50
【问题描述】：

我目前正在为自己制作一个作品集网站，使用的是'Gridly' wordpress 主题的修改版本。 Here's the current website.

现在我正在尝试实现'infinite scroll' plugin，但我似乎无法让它工作。

我不确定这里是否有人熟悉这个特定的插件，但以防万一，我使用的选择器是：

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，并确保插件已激活。

如果有人能帮我解决这个问题，我将不胜感激。我（显然）不是网络开发人员，所以如果这听起来很愚蠢，请多多包涵。

【问题讨论】：

Chrome 检查员报告Your nextSelector found no elements.
使用调试选项，我设法确定“下一个选择器”没有找到任何元素。
打败我。 ;) 但是，我仍然不确定如何解决这个问题。
我怀疑我在处理 index.php 时不小心删除了一段重要的代码。我会恢复备份，看看是否有帮助。
不，不是这样。

标签： php jquery css infinite-scroll

【解决方案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

如果其他人遇到类似问题，希望这会有所帮助。 :)

【讨论】：

【解决方案2】：

恐怕不是真正的答案，但评论太长了。您的链接最终在 HTML 中有点混乱，a 包裹在 p 周围（虽然从技术上讲，您的文档类型“合法”，但这不是一个好主意）。

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

不确定a:first 的目标是什么，或者它指的是什么。

【讨论】：

您好！ :) 我自己也注意到了，还不知道如何解决，但我正在努力解决。