WordPress無插件實現靜態緩存文件提高訪問速度,評論ajax動態載入,解決靜態緩存下評論不更新問題
文章目錄
WordPress無插件實現靜態緩存文件提高訪問速度
自從用了wordpress程序建站後，很多功能都是可以開發的，比如我現在使用的是偽靜態功能。這個功能就會導致在某些伺服器上打開的速度很慢，當然不是伺服器寬頻不夠，可能是因為獲取數據的時候太慢了，導致網站的訪問速度變慢了。
解決wordpress偽靜態訪問很慢的辦法：
wordpress生成靜態緩存
1、創建一個cache.php文件
將下面代碼放在這個文件中，並上傳至程序的根目錄
如下圖
3.打開根目錄的index.php文件，在<?php後面添加代碼
換行，添加require(『cache.php』);代碼，加好了的效果如下：
啟用 WP Super Cache 插件 靜態化
WordPress評論ajax動態載入，解決靜態緩存下評論不更新問題
前不久，有朋友拿我的網站練手，用大量代理 IP 對我的博客進行 DDos 攻擊，無奈之下博客臨時轉入到百度雲加速。轉入之後，如果把雲加速的頁面緩存也打開，那麼就有了 2 層緩存：【CDN 節點的 html 緩存】和【伺服器的 html 緩存】。那麼我之前寫的ajax 清理緩存以及評論刪除緩存失去了效果，因為只能刪除本地的 html 緩存，而 CDN 節點的緩存百度並未提供 API 控制介面，所以用戶看到的還是緩存內容！
當然，不是強迫症的話，直接關閉百度的頁面緩存就可以了！但這只是逃避問題，而沒有解決問題！所以，本文就分享一下，強迫症是如何解決這個非必須問題的。
一、自動動態載入評論
這是我最初想到的、而且是老早就想實現一種方案：當靜態的 html 頁面載入時，評論部分實時從資料庫動態拉取數據，由於是純靜態下的 html 頁面，所以這個功能需要 JS+Ajax 來實現。
①、php 評論動態拉取介面代碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php if ('comment_list.php' == basename($_SERVER['SCRIPT_FILENAME']) && !isset($_POST['post_id'])) { header("content-type:text/html; charset=utf-8"); echo '您好！請不要直接訪問這個頁面！'; exit(); } require('../wp-blog-header.php'); header("Content-type: text/html;charset=UTF-8"); header('HTTP/1.1 200 OK'); $comments = get_comments(array( 'post_id' => $_POST['post_id'], 'status' => 'approve' )); echo '<ol class="commentlist">'; wp_list_comments('type=comment&reverse_top_level=true&page=0&callback=mytheme_comment&end-callback=mytheme_end_comment',$comments); echo '</ol>'; ?> |
Ps：代碼的原理就不贅述了，主要用到 wp_list_comments 內置函數，感興趣的可以自行了解下。
以上代碼保存為 php 文件，比如 ajax-comments.php，保存到網站根目錄，備用。
②、Ajax 評論請求代碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript"> /* 將函數放置到ready裡面，頁面載入後自動執行 */ jQuery(document).ready(function($){ Ajax_Comments(); }); /* Ajax請求，分開寫方便調用 */ function Ajax_Comments(){ $.ajax({ type: "POST", url: location.origin+"/ajax-comments.php", data:{"post_id":<?php echo $post->ID;?>}, dataType: "html", success: function(out){ /* 用實時拉取的內容替換原來的內容 */ $('.commentlist').html($(out).fadeIn(500)); } }); } </script> |
以上代碼可以直接貼到網站的 footer.php 當中。如果你要添加到 js 文件中，請除去首尾的 script 標籤，而且 post_id 值需要在外部通過 php 動態定義（搞不清的還是直接貼 footer 吧）！
特別說明下，2 段代碼中的【.commentlist】是指評論列表的 class，比如知更鳥主題的評論列表的是<ol class="commentlist">評論列表</ol>，實際上請根據主題的評論列表 class 或 ID 來自行修改！
部署無誤之後，每次頁面載入都會動態去拉取一次最新的評論，並呈現給用戶。
優點：每次打開頁面用戶都能看到最新評論； 缺點：每次打開頁面都會動態拉取評論，降低了純靜態效果，拉取的評論分頁有點誤差（影響不大）。
二、手動動態刷新評論
這個方法靈感源自網路上流行的評論分頁 Ajax 載入：點擊評論的下一頁，不會刷新整個頁面，而是通過 ajax 拉取被點擊那個分頁的全部內容，然後找到評論部分並載入。
簡單解釋下原理：
比如，張戈博客的留言板，有 100 頁評論，那麼第 99 頁的評論地址應該是：http://zhangge.net/liuyan/comment-page-99/，當點擊【99】這個分頁鏈接時，將觸發 ajax 函數，先隱藏當前分頁的所有評論，然後 ajax 拉取第 99 頁的內容，然後將評論部分載入出來，實現不刷新頁面來載入評論。
分析了這個過程，我們可以發現一個特徵關鍵字，那就是分頁地址後面的 comment-page-xx ！這是個好東西，因為我可以在雲加速和本地的緩存中排除這個關鍵詞的緩存即可！也就說，瀏覽器直接訪問帶comment-page-xx這類關鍵詞的地址，就略過緩存，載入動態內容！
因此，當我們部署了 ajax 評論分頁，點擊其他分頁將會顯示非緩存內容！但是這還不是我需要的，因為我想要當前頁面也實現動態評論。也許聰明人會說，你點到其他評論分頁，再點回來不就好了嘛？
確實，實現 ajax 評論分頁後，我點到其他評論分頁，然後再點回來，確實可以實現評論刷新，但是卻用了 2 次點擊！
好，下面我們換個角度，既然 comment-page-xx 是動態頁面，那麼 comment-page-1 肯定也是動態頁面咯！
於是就有 2 種情況：第一種，文章評論數量還不夠生成分頁，那這時候只要拉取 comment-page-1 就可以了；第二種，評論已經存在分頁，那麼只要拉取這個 comment-page-【頁碼】即可，所以 ajax 拉取之前，我們只要通過 js 判斷來決定要拉取的目標地址即可。
那麼，js 如何判斷評論是否有分頁了呢？很簡單，先分析下網頁代碼：
可以發現分頁是有分頁對應的 class 的，那麼 js 只要判斷這個 class 是否存在就好啦！而且我還可以發現當前的分頁和其他分頁的 class 還是不一樣的：當前分頁的 class 是【page-numbers current】，而 其他分頁則是【page-numbers】，如以此來，我們還可以用 js 代碼 $('.page-numbers.current').html() 獲得當前分頁的頁碼！！！
那問題就好解決了，我們只要先判斷是否存在分頁，然後根據不同情況抓取不同的目標地址即可！
下面開始分享代碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
/* 評論ajax獲取函數 */ function Ajax_Comments(){ $.ajax({ type: "GET", url: ajax_url, beforeSend: function(){ /* 觸發後移除評論列表、評論分頁及評論統計(不清楚的可參考張戈博客的評論ID元素) */ $('.navigation_c').remove(); $('.commentlist').remove(); $('#comments').remove(); /* 顯示正在載入中效果 */ $('#loading-comments').slideDown(); /* 這裡判斷評論開啟並沒有評論的情況，sofa是我定義的搶沙發DIV */ if($('.sofa').html() == undefined && $('.nocomments').html() == undefined ){ $body.animate({scrollTop: $('.refresh').offset().top - 65}, 800 ); /* 這裡判斷評論已關閉，nocomments是提示本文評論已關閉的div */ } else if ($('.nocomments').html() != undefined){ alert('很抱歉！本文評論已關閉。您可以到留言板</a>暢所欲言。'); return false; } }, dataType: "html", success: function(out){ /* 在ajax拉取內容中查找評論列表部分 */ commentlist = $(out).find('.commentlist'); /* 如果沒有評論，則提示搶沙發 */ if(commentlist.length == 0) { $('#loading-comments').hide(); alert('暫無評論，您可以搶沙發喲~!;'); return false; /* 如果有評論，則移除搶沙發模塊 */ } else { $('#sofa').remove(); } /* 獲取評論統計DIV模塊，有的主題可能沒有 */ comments = $(out).find('#comments'); /* 獲取評論分頁DIV模塊 */ nextlink = $(out).find('.navigation_c'); $('#loading-comments').slideUp('fast'); /* 將評論統計輸出到(載入中)模塊的後面，並移除[載入中]模塊 */ $('#loading-comments').after(comments.fadeIn(500)); /* 將評論列表輸出到評論統計模塊的後面 */ $('#comments').after(commentlist.fadeIn(500)); /* 將評論分頁輸出到評論列表的後面，完成本次載入 */ $('.commentlist').after(nextlink); } }); } /* 評論ajax分頁 */ $('.page-numbers').live('click', function(e){ e.preventDefault(); if ($(this).attr('href') != undefined) { ajax_url = $(this).attr('href'); } else { /* 點擊當前分頁頁碼也可以刷新評論 */ ajax_url = page_url+"/comment-page-"+$('.page-numbers.current').html()+"/#comments"; } Ajax_Comments() }); /* 手動刷新評論 */ function refresh_Comments(){ /* 根據文章是否存在分頁，定義不同的抓取地址 */ if ($('.page-numbers.current').html() != undefined) { /* 如果存在分頁，則抓取當前分頁地址 */ ajax_url = page_url+"/comment-page-"+$('.page-numbers.current').html()+"/#comments"; } else { /* 如果沒有分頁，則抓取comment-page-1 */ ajax_url = page_url+"/comment-page-1/#comments"; } Ajax_Comments(); } /* 將評論刷新函數綁定到ID為refresh的點擊事件上 */ $(function(){ $("#refresh").click(function(){ refresh_Comments(); }); }); |
使用方法很簡單，把這個代碼添加到主題已有的 js 中，然後在任意位置新增一個 ID 為 refresh 的 html 元素即可，比如：
|
1 |
<div id="refresh">刷新評論</div> |
本文分享的方法和思路，如果不是真正需要，我想會看得很痛苦，因為我寫的也很痛苦！很多地方不好解釋，因為你沒有需求，就可能看不懂！！但是，只要是我用心折騰過的功能，我都想分享出來，網路這個林子那麼大，不可能就沒有同樣需求的人吧？！有時候，【解決思路】真心比【實現代碼】來的更加難得！
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途！
3. 分享目的僅供大家學習和交流，請不要用於商業用途！
4. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
5. 本站所有資源來源於站長上傳和網路，如有侵權請郵件聯繫站長！
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
9. 如果你也有好源碼或者教程，可以到審核區發布，分享有金幣獎勵和額外收入!
10.如果您購買了某個產品，而我們還沒來得及更新，請聯繫站長或留言催更，謝謝理解 !
GG資源網 » WordPress無插件實現靜態緩存文件提高訪問速度,評論ajax動態載入,解決靜態緩存下評論不更新問題
