前面部落格吧介紹過的 WordPress 滾動自動載入分頁資料外掛 Infinite Scroll，該 WP 外掛是把 jQuery 外掛 jquery.infinitescroll.js 製作成 WordPress 外掛，而且現在介紹的是直接把 jquery.infinitescroll.js 整合到主題中，減少 WordPress 外掛的使用。像這樣的自動無限翻頁一般使用在淘寶客程式，圖片類網站。
實現步驟：
1 、下載 jQuery 外掛
infinite-scroll-master.zip
，解壓後，把根目錄的 jquery.infinitescroll.min.js 檔案上傳至當前主題的 js 資料夾；
2 、下載動態圖片 （把滑鼠移動圖片上，右擊，圖片另存為），把該圖片上傳至當前主題的 images 資料夾
3 、分頁程式碼：該方法只對 WordPress 預設 「上一頁、下一頁」 連結生效
4 、在當前主題的 functions.php 檔案中，新增以下程式碼：
載入 infinite scroll 外掛指令碼
*/
function infinitescroll_js() {
wp_register_script('infinite_scroll', get_stylesheet_directory_uri() . '/js/jquery.infinitescroll.min.js', array('jquery'), null, true);
if (!is_singular()) {
wp_enqueue_script('infinite_scroll');
}
}
add_action('wp_enqueue_scripts', 'infinitescroll_js');
/*
初始化 infinite scroll 外掛配置引數
*/
function infinite_scroll_js() {
if (!is_singular() ) {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "載入中...",
finishedMsg: "已載入所有產品..."
},
nextSelector:".pagenavi a",
navSelector:".pagenavi",
itemSelector:".post",
contentSelector:".main",
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
});
</script>
<?php
}
}
add_action('wp_footer', 'infinite_scroll_js', 100);
引數說明：
img: 等待載入時顯示的動態圖片 URL 路徑
nextSelector: 下一頁 （Previous Post） 連結 CSS 樣式名稱 + a 標籤 （類選擇器或 ID 選擇器）
navSelector: 包含上一頁/下一頁連結的樣式名稱 （類選擇器或 ID 選擇器）
itemSelector: 包含每篇文章內容的樣式名稱 （類選擇器或 ID 選擇器）
contentSelector: 包含所有文章的樣式名稱 （類選擇器或 ID 選擇器）
提醒：如果按上面方法沒有生效，請檢查樣式是否選擇錯。
5 、 CSS 樣式程式碼：（把下面的 CSS 程式碼新增到當前主題的樣式檔案中，一般是 style.css，可根據自己的喜歡修改對應程式碼）
.pagenavi,#infscr-loading {text-align:center; font-size:0.75em;}.pagenavi a {padding:6px 12px; background:#F04848; color:#fff; border:1px solid #dedede; border-right:none; overflow:hidden;}#infscr-loading img {display:block; margin:0 auto; text-align:center;}