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

Question

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

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

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

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

任何人都可以简要介绍一下我需要做什么才能实现这一目标吗？

Answer 1

首先，你必须找到<div class="entry-content">在哪里是。这是在你的wp-content/themes/[themename]文件夹，在名为 index.php 或 loop.php 的文件中。收盘后</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 按钮所必需的。