Question

我正在努力让我的wordpress博客（已移除）与插件“无限滚动”一起使用，您需要点击“更多帖子”来加载更多内容，而不是通过滚动靠近页面底部（这是默认的插件。）

有关于如何在此处执行此操作的说明和演示：http://www.infinite-scroll.com/

向下滚动到“自定义触发器，非自动。推特式”。

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

有人能给我一个快速概要说明我需要做些什么才能解决这个问题？

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 Admin - ＆gt;设置 - ＆gt;无限滚动）中，将此添加到“获取下一个帖子后要调用的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;
}

请注意，这将自动执行第一次后加载，以及后续的手动操作。这是脚本自动隐藏“上一个/下一个”按钮所必需的。

Answer 2

由于您使用的是Wordpress，因此应安装Jetpack plugin并激活无限滚动选项。有Twenty Ten，Eleven和Twelve主题的配置示例。我认为你会发现比自己整合无限滚动更容易。

Wordpress插件“无限滚动”（jQuery）破解帮助

2 个答案: