2010-12-10 49 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並激活無限滾動選項。有二十個,十一和十二個主題的配置示例。我認爲你會發現比嘗試整合無限滾動更容易。