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

Posted 2023-05-09

【中文标题】Wordpress 插件“无限滚动”（jQuery）破解帮助

【英文标题】：Wordpress plugin "infinite scroll" (jQuery) hack help

【发布时间】：2011-05-23 05:44:55

【问题描述】：

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

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

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

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

谁能给我一个简短的概要，说明我需要做些什么来完成这个任务？

【问题讨论】：

当我加载您的博客时，我在 Firebug 中收到以下错误：$("#body").infinitescroll is not a function。不过很奇怪，因为无限滚动脚本看起来像是被加载了。这将是一个很好的起点。

【参考方案1】：

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

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

【参考方案2】：

由于您使用的是 Wordpress，您应该安装 Jetpack plugin 并激活无限滚动选项。有二十、十一和十二主题的配置示例。我想你会发现它比尝试自己集成无限滚动更容易。