Wordpress插件“無限滾動”（jQuery）破解幫助

Question

我試圖使我的wordpress博客（刪除）使用插件“無限滾動”工作，你必須點擊“更多帖子”加載更多，而不是通過滾動靠近頁面的底部（這是插件默認）。

有關如何在此處執行此操作的說明和演示： http ： //www.infinite-scroll.com/

向下滾動到“自定義觸發器，非自動。推特式”。

我只是不明白如何讓它與我的主題（二十）一起工作。 我可能沒有正確的選擇器繼續。

任何人都可以給我一個快速的概要，說明我需要做些什么來解決這個問題？

Answer 1

由於您使用的是Wordpress，因此您應該安裝Jetpack插件並激活無限滾動選項。 有Twenty Ten，Eleven和Twelve主題的配置示例。 我認為你會發現比嘗試自己整合無限滾動更容易。

Answer 2

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

請注意，這將自動執行第一次后加載，以及后續的手動加載。 這是腳本自動隱藏“上一個”/“下一個”按鈕所必需的。