利用AJAX實現(xiàn)Press中的文章列表及評論的分頁功能

1、在文中列表頁方面利用AJAX制作滾動到底觸發(fā)翻頁的效果比較常見,而在評論加載時AJAX 顯示正在加載也很常用 ,下面就來看一下如何利用 AJAX 實現(xiàn) WordPress中的文章列表及評論的分頁功能文章列表頁分頁.加載 jQuery 庫既然是jQuery 驅(qū)動的Ajax，加載jQuery 庫是必須的。二 .文章列表格式在你的文章列表頁面（首頁index.php 、歸檔archive.php ）需要確保有以下類似的結(jié)構(gòu) 三 .加入默認(rèn)導(dǎo)航因為Ajax分頁每次獲取的是下一頁的內(nèi)容，因此只需調(diào)用WordPress 的默認(rèn)導(dǎo)航。在你的index.php （或是其他文章列表頁面）加入以下代碼，生成默認(rèn)的

2、WordPress 導(dǎo)航。.Ajax 獲取下一頁在你的主題js 文件里加入以下代碼使用 live() 使 js 對通過 Ajax 獲得的新內(nèi)容仍有效 $(#pagination a).live(click, function() $(this).addClass(loading).text(LOADING $.ajax( type: POST, url: $(this).attr(href) + #content, success: function(data).); result = $(data).find(#content .post); nextHref = $(data).find(

3、#pagination a).attr(href); / 漸顯新內(nèi)容 $(#content).append(result.fadeIn(300); $(#pagination a).removeClass(loading).text(LOAD MORE); if ( nextHref != undefined ) $(#pagination a).attr(href, nextHref); else /若沒有鏈接，即為最后一頁，則移除導(dǎo)航 $(#pagination).remove(); ); return false; );.滾動觸發(fā)翻頁如果想當(dāng)鼠標(biāo)滾動到接近頁面底部時自動翻頁，則可以把代碼

4、改成下面的樣式給瀏覽器窗口綁定 scroll 事件$(window).bind(scroll,function()判斷窗口的滾動條是否接近頁面底部if( $(document).scrollTop() + $(window).height() $(document).height() - 10 ) $(this).addClass(loading).text(LOADING .); $.ajax( type: POST, url: $(this).attr(href) + #content, success: function(data) result = $(data).find(#cont

5、ent .post); nextHref = $(data).find(#pagination a).attr(href); / 漸顯新內(nèi)容 $(#content).append(result.fadeIn(300); $(#pagination a).removeClass(loading).text(LOAD MORE); if ( nextHref != undefined ) $(#pagination a).attr(href, nextHref); else /若沒有鏈接，即為最后一頁，則移除導(dǎo)航 $(#pagination).remove(); ););.添加導(dǎo)航 css為導(dǎo)航添

6、加一段css 美化一下，另外還可以準(zhǔn)備一張gif圖來表示正在加載，下面是Melody的樣式：#pagination padding: 20px 0 0 30px; #pagination .nextpostslink width: 600px; color: #333; text-decoration: none; display: block;padding: 9px 0; text-align: center; font-size: 14px; #pagination.nextpostslink:hoverbackground-color:#cccccc;text-decoration:n

7、one;border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; #pagination .loadingbackground:url(images/loading.gif)240px 9px no-repeat; color:#555; #pagination .loading:hover background-color: transparent; cursor: default; 評論分頁一 .準(zhǔn)備加載jQuery 庫，這個不解釋了。.開啟 WordPress 評論分頁打開 WordPress 后臺-

8、 設(shè)置- 討論，在“其他評論設(shè)置”中勾選分頁顯示評論，設(shè)置一下評論數(shù)目， 這里的評論數(shù)目僅計算主評論，回復(fù)評論不作計算。這里我填了比較大的數(shù)字（ 15），因為評論分頁分得太細(xì)會使用戶不便于閱讀之前的評論。在后臺開啟評論分頁后，在comments.php 中需要添加分頁導(dǎo)航的地方加入以下代碼（如主題中有類似代碼則無須再添加，另外代碼中的nav 標(biāo)簽為HTML5標(biāo)簽， 若主題沒有使用HTML5則有div 代替即可。） 三 .評論分頁的SEO從 SEO 的角度看， 評論分頁會造成重復(fù)內(nèi)容（分頁的內(nèi)容正文都一樣，并且keywords和 description也相同），這樣對于評論很多的博客很容易因為重

9、復(fù)內(nèi)容太多而降權(quán)，要在SEO 方面作出一些處理，最為方便有效的方法是使用meta 標(biāo)簽。在你的原有的meta 標(biāo)簽下加入以下代碼，這樣分頁的頁面便會禁止被搜索引擎收錄，復(fù)。因此需header.php防止內(nèi)容重?php if( is_single() | is_page() ) if( function_exists(get_query_var) ) $cpage = intval(get_query_var(cpage); $commentPage = intval(get_query_var(comment); if( !empty($cpage) | !empty($commentPage

10、) ) echo ; echo n; ?四 .Ajax評論根據(jù)上文所述，現(xiàn)在主題中已經(jīng)有評論分頁了，要做到Ajax的評論分頁，只需JavaScript 的配合，不過在這之前首先要在評論列表前加入一個元素，用于在顯示新一頁評論列表時表示列表正在加載。假設(shè)主題模板comments.php 的評論模塊結(jié)構(gòu)如下： Comments id=loading-commentsLoading. . . . div 1 . 在你的js 文件中加入以下js 代碼實現(xiàn)評論分頁評論分頁$body=(window.opera)?(patMode=CSS1Compat?$(html):$(body):$(html,bo

11、dy);點(diǎn)擊分頁導(dǎo)航鏈接時觸發(fā)分頁$(#comments-navi a).live(click, function(e) e.preventDefault(); $.ajax( type: GET, url: $(this).attr(href), beforeSend: function() $(#comments-navi).remove(); $(.comment_list).remove(); $(#loading-comments).slideDown(); $body.animate(scrollTop: $(#comments-list-title).offset().top - 65, 800 ); , dataType: html, success: function(out) result = $(out).find(.comment_list); nextlink = $(out).find(#comments-navi); $(#loading-comments).slideUp(fast); $(#loading-comments).after(result.fadeIn(500); $(.comment_list