WordPress插件“无限滚动”（jQuery）hack帮助

Question

我试图让我的wordpress博客（已删除）与插件“ Infinite Scroll”一起使用，您必须点击“更多帖子”以加载更多内容，而不是滚动至页面底部（即插件默认）。

这里有说明和演示方法：http：//www.infinite-scroll.com/

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

我只是不明白如何使其与我的主题一起使用（二十十岁）。我可能没有正确的选择器。

谁能给我一个简短的提要，以概括一下我该怎么做？

Answer 1

首先，你必须找到它在哪里<div class="entry-content">。它位于您的wp-content/themes/[themename]文件夹中名为index.php 或loop.php 的文件中。</div>在entry-content结束后，添加：

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

请注意，这将自动执行第一个后加载，然后手动执行后续加载。这对于脚本自动隐藏“之前”/“下一步”按钮是必要的。