WordPress純代碼純靜態開啓七牛CDN並集成七牛縮略圖和水印功能

最近發現好多網站都使用了動靜分離，我就研究了下使用七牛緩存圖片，並使用七牛圖片樣式對圖片進行縮略和加水印。

七牛步驟

先註冊七牛帳號，並在賬戶裏面充值10元錢，用於使用七牛的CDN功能，先添加資源中的對象存儲並在鏡像存儲中添加鏡像源，添加完之後綁定你的二級域名，稍等下你會看到域名信息中一個CNAME，這時你將CNAME解析到你的域名中，這完成了第一步。

PS：這裏就不詳細介紹了，不懂下面留言。

添加Robots

Robots存放在對象存儲中的內容管理中，下載下來並更改上傳。下面是我自己的Robtos，大家根據自己的情況自行修改。

User-agent: *
Allow: /robots.txt
Allow: /*.ico$
Allow: /*.png$
Allow: /*.jpg$
Allow: /*.jpeg$
Allow: /*.gif$
Allow: /*.bmp$
Allow: /wp-content/
Disallow: /

集成七牛縮略圖和水印

1、先在對象存儲更多操作中的樣式分隔符設置進行設置，詳見下圖，大家可以根據自己的喜歡的符號進行設置。

2、設置完樣式分割符之後設置圖片樣式，新建圖片樣式，設置圖片縮略圖和圖片水印功能，詳見下圖！

七牛縮略圖設置

七牛圖片水印設置

七牛拉取網站圖片

今天的重頭戲來了，使用代碼從網站服務器拉取圖片到七牛雲存儲，這點代碼我是從張戈哪拿來的，進行了簡單的修改。

//使用七牛拉取網站圖片
function QiNiuCDN(){
    function Rewrite_URI($html){
        /* 前面是需要用到七牛的域名,後面是需要加速的靜態文件類型，使用分隔符 | 隔開即可 */
        $pattern = '/http:\/\/(www\.|)mxiaoc\.com\/wp-([^"\']*?)\.(js|css|jpg|gif|png|jpeg|bmp|ico)/i';
        /* 七牛CDN空間地址,請自行替換成實際空間地址 */
        $replacement = 'http://static.www.mxiaoc.com/wp-$2.$3';
        $html = preg_replace($pattern, $replacement, $html);
        return $html;
    }
    if(!is_admin()){
        ob_start("Rewrite_URI");
    }
}
add_action('init', 'QiNiuCDN');

將上面的代碼放到主題根目錄下的functions.php中即可。注意改爲自己的域名！

集成七牛縮略圖和水印代碼

集成七牛的縮略圖和水印代碼需要用到七牛的樣式在前面已經介紹了怎麼創建樣式就不說了，不懂的看前面的，也可以問小C。

//七牛縮略圖和水印
add_filter('the_content', 'QiNiuThumbnailWatermark');
function QiNiuThumbnailWatermark($content) {
   global $post;
   $pattern ="/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
   /* 下面這行代碼中的ThumbnailsWatermark是七牛樣式中的樣式名稱而斜槓爲七牛中設置的樣式分割符 */
   $replacement = '<img$1src=$2$3.$4/ThumbnailsWatermark$5$6>';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}

將上面的代碼放到主題根目錄下的functions.php中即可。注意將ThumbnailsWatermark改爲自己的樣式名稱還有自己設置的分割符。

設置圖片默認尺寸屬性

設置圖片的默認尺寸屬性大家可以根據自己的情況自行修改！

//設置圖片默認尺寸屬性
add_filter('the_content', 'removeimg_size');
function removeimg_size($content) {
    global $post;
    //去掉srcset屬性
    $content = preg_replace("/srcset=('|\")(.*?)('|\")/i", '', $content);
    //設置圖片默認尺寸屬性
    $content = preg_replace('/<img(.*?)width="(.*?)" height="(.*?)"(.*?)>/i', '<img$1width="auto" height="auto"$4>', $content);
    return $content;
}

將上面的代碼放到主題根目錄下的functions.php中即可。

開啓七牛後遇到的問題

1、開啓七牛後你的網站被七牛鏡像了，訪問七牛域名你發現是你自己的網站。

2、開啓七牛後你的網站無法評論。

關於問題一七牛鏡像的解決辦法就是通過js跳轉方式進行跳轉到自己的網站。

先找到你網站的head中的部分代碼，加上如下js代碼即可，以下代碼取至張戈博客。不懂的可以下面留言！

<script type="text/javascript">
/* 如果瀏覽器域名不是www.mxiaoc.com將跳轉到www.mxiaoc.com對應的頁面*/
if (document.location.host != "www.mxiaoc.com") {
    location.href = location.href.replace(document.location.host,'www.mxiaoc.com');
}
</script>

對於問題二無法評論問題的解決方法：

修改評論comments-ajax.js即可

var i = 0, got = -1, len = document.getElementsByTagName('script').length;
while ( i <= len && got == -1){
    var js_url = document.getElementsByTagName('script')[i].src,
            got = js_url.indexOf('comments-ajax.js'); i++ ;
}
/** 解決七牛評論出錯的問題 */
js_url = js_url.replace('static.www.mxiaoc.com','www.mxiaoc.com');

總結

七牛的使用今天就介紹到這裏，也許不是很詳細，但是大家應該都能看懂，如果不懂的可以下方留言。