javascript - Wordpress 插件 "infinite scroll"(jQuery) hack 帮助

我试图让我的 wordpress 博客(已删除)与插件“无限滚动”一起使用，您必须单击“更多帖子”才能加载更多内容，而不是靠近页面底部滚动(这是插件默认)。

这里有关于如何做的说明和演示:http://www.infinite-scroll.com/

向下滚动到“自定义触发器，非自动的Twitter风格”。

我只是不明白如何让它与我的主题(二十一点)一起工作。我可能没有正确的选择器。

谁能给我一个快速的概要说明我需要做些什么来完成它？

最佳答案

首先，您必须找到 <div class="entry-content"> 的位置。这是在您的 wp-content/themes/[themename] 文件夹中，在一个名为 index.php 或 loop.php 的文件中。在 entry-content 的关闭 </div> 之后，添加:

<div class="moreposts" style="display:none"
 onclick="$('div.moreposts').slideUp();$(document).trigger('retrieve.infscr');">
     Show more
</div>

<script>
$(document).ajaxError(function(e,xhr,opt){
    if (xhr.status == 404) $('div.moreposts').slideUp("normal", function() { $(this).remove(); } );
});
</script>

现在，在无限滚动配置(Wordpress 管理 -> 设置 -> 无限滚动)中，将其添加到“获取下一个帖子后要调用的 Javascript”框中:

$(window).unbind('.infscr');
setTimeout("$('div.moreposts').slideDown();", 1000);

最后为按钮设置样式以使其看起来漂亮(添加到 style.css):

.moreposts {
    display:block;
    border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
    border: 1px solid #ddd;
    background: #efefef;
    text-align: center;
    font-weight: bold;
    box-shadow: 2px 2px 2px rgba(50,50,50,0.4); color: #444;
    text-decoration: none;
    padding: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}
.moreposts:hover {
    background: #dfdfdf;
    color: #222;
}

请注意，这将自动执行第一次后加载，然后手动执行后续加载。这对于脚本自动隐藏 Before/Next 按钮是必要的。

关于javascript - Wordpress 插件 "infinite scroll"(jQuery) hack 帮助，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4404919/