2010-12-10 23 views
4

我想让我的WordPress博客(删除)的插件“无限滚动”的方式,你必须点击“更多职位”加载更多通过滚动接近页面的底部(这是插件的默认值)。Wordpress插件“无限滚动”(jQuery)黑客帮助

有说明,并就如何在这里做一个演示:http://www.infinite-scroll.com/

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

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

任何人都可以给我一个我需要做的事情的快速简介来解决这个问题吗?

+0

当我加载你的博客时,我在Firebug中得到以下错误:`$(“#body”).finitescroll不是函数。奇怪的是,因为infinitescroll脚本看起来像被加载。这将是一个开始的好地方。 – 2010-12-10 05:23:46

回答

0

首先,您必须找到<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; 
} 

注意,这将做的第一负载后奥波atic和后续的手册。脚本需要自动隐藏Before/Next按钮。

0

由于您使用的是Wordpress,因此您应该安装Jetpack plugin并激活无限滚动选项。有二十个,十一和十二个主题的配置示例。我认为你会发现比尝试整合无限滚动更容易。