存在的問題在這六一兒童節的歡樂佳節，騰訊云又給先森送了一波小禮，上一次還是先森畢業的時候，騰訊云恭喜先森畢業，并收走了先森1元購買服務器的資格。。。大清早的，騰訊云郵件、短信通知先森騰訊云賬號欠費停服了，先森表示一臉懵逼。登錄騰訊云費用中心，發現是數據萬象產生了CDN回源流量，這更是讓先森感到懵逼。騰訊云賬號欠費明細先森自2020年就將對象存儲從七牛轉到騰訊云COS了，在此之間從未發生過費用，之前先森還炫耀過：網站http轉為https之始，從七牛到騰訊云突然產生的CDN回源流量讓先森真的很奇怪，再次確認，COS是有CDN回源流量包的，先森的CDN源站也是COS域名而非數據萬象的域名。COS的CDN回源流量包問題原因先森聯系售后在線支持，經過確認得知，只要CDN回源時帶了圖片處理參數，那么就算是CDN回源到數據萬象，啊這。。。先森就很無語售后的答復先森的解決辦法數據萬象產品的策略已經這樣了，先森也沒有辦法改變，先森去聯系售后，也不是為那6分錢討回公道的，及時止損才是王道。針對這種情況，先森想到了兩個解決方案：1、CDN繼續使用騰訊云的，源站改為七牛對象存儲或CDN域名；2、使用同地域的服務器做一個反向代理，CDN源站改為這個服務器，服務器通過內網訪問對象存儲，這樣就不會產生對象存儲和數據萬象的流量費用，也就不存在CDN回源流量費了。先森選擇了第二種方案，第一種方案可以用來做CDN的備用源站，避免自建反向代理掛了的話導致網站訪問受到影響。第二種方案配置起來也簡單，寶塔上增加一個站點，設置反向代理，目標URL和發送域名都填上COS的域名即可：寶塔的反向代理配置注意事項需要注意的是，使用的CVM服務器一定要與COS所屬地域一致，且CVM的dns服務器保持騰訊云默認DNS，否則不會解析到內網。配置反向代理前，可以在服務器內解析驗證一下，解析出來應該是一個169.254.x.x的IP：dig確認內網解析不打算再使用騰訊云數據萬象的圖片處理功能？那么，如果希望繼續使用對象存儲COS，但是又不希望無意間使用到數據萬象該怎么辦呢？經過確認，可以在數據萬象的控制臺操作對應存儲桶“解綁”，解綁后COS桶就無法調用數據萬象的能力了。數據萬象解綁COS桶

先森之前先發了一篇博文，講述了一些想從http轉為https做的一些準備：網站http轉為https之始，從七牛到騰訊云前進的道路從來都不是一帆風順的，先森在切換的過程中也是遇到了一些問題，這里簡單的記錄一下歷程。七牛轉騰訊云七牛令先森最喜愛的功能就是圖片的處理功能了，現在是騰訊云的對象存儲COS也支持直接圖片處理，所以先森才開始打算從http轉為https。針對七牛的圖片處理，先森以前還是寫過幾篇博文的：WordPress百度UEditor編輯器自動添加七牛云儲存裁剪代碼將WordPress歷史文章中所有圖片加上七牛裁剪水印代碼七牛圖片處理樣式的正確使用方式當然，當時的用法比較簡單粗暴，直接用了一大段的圖片處理參數，而正確的方法應該是將固定的處理方法保存為處理樣式，直接在圖片后面調用圖片處理樣式，這個先森也在上面的最后一篇博客中寫到了。先森使用圖片處理，最主要的用途還是加速網站打開速度。將不同位置的圖片縮小至合適的大小，讓圖片的體積盡可能的減小，以實現加快網站訪問速度。先森最喜歡的一點，還是文章中的圖片，結合燈箱插件，讓圖片在未點擊時呈現縮放并降低圖片質量的狀態，點擊后顯示原始大小及質量。這么好的功能先森當然不想放棄，先森網站的各種縮略圖都是不同的大小，所以有不同的樣式。本以為從七牛的圖片處理換到騰訊云的圖片處理，相關規則還得自己研究半天才能實現同樣的效果，結果圖片處理的規則竟然非常兼容。COS圖片處理規則除了需要添加水印的規則，其他的規則直接將七牛的復制過來就可以直接用了，簡直方便的一批。COS新增樣式時，添加水印圖片竟然只能上傳圖片，而不能從存儲桶里直接選擇，這一點有些體驗不佳。而自己通過自定義規則去添加水印圖片的話，又會比較麻煩：使用自定義參數添加水印圖片需要滿足3個條件不過研究一下還是可以完成操作，總的來說，這個切換過程還是非常滿意的。自適應http和https先森前面的文章也寫到過，為了避免切換到https有問題，先森切換的時候是沒有開啟強制跳轉到https的，所以這里就需要做到http和https的兼容。先森想到的兼容方式就是將網頁中的‘http://’換成‘//’，這樣就會根據訪問的協議自動顯示相應的協議。要實現也很簡單，先森下面這篇博客中講到了“WordPress七牛CDN代碼版”：七牛圖片處理樣式的正確使用方式先森這里把這個代碼改吧改吧就能實現https的兼容了。//WordPress七牛CDN代碼版function QiNiuCDN(){    function Rewrite_URI($html){        /* 前面是需要用到七牛的域名,后面是需要加速的靜態文件類型，使用分隔符 | 隔開即可 */        /* 這里先森小改了一下，兼容https */        $pattern ='/http[s]{0,1}:\/\/(www\.|)capjsj\.cn\/(wp-|ueditor|avatar)([^"\']*?)\.(jpg|js|css|gif|png|jpeg|ico|cur)/i';        /* 七牛CDN空間地址,請自行替換成實際空間地址*/        /* 先森這里又換成騰訊云COS的地址了 */        $replacement = '//cos.capjsj.cn/$2$3.$4';    $html = preg_replace($pattern, $replacement,$html);    /* 增加了一次替換，把http://替換為// */    $html = preg_replace('/http:\/\/www.cnidcc.cn/i', '//www.cnidcc.cn',$html);    return $html;    }    if(!is_admin()){        ob_start("Rewrite_URI");    }}add_action('init', 'QiNiuCDN');這個時候需要注意，WordPress后臺登錄的時候，需要使用http，因為在設置-常規處的WordPress地址與站點地址還未修改，為了http與https的兼容，所以當時也并未修改。但若要修改，這里還有個坑。全站HTTPS先森經過一段時間的測試，發現https沒有什么問題，所以就打算將網站開啟HTTP到HTTPS的強制跳轉，并且把后臺配置中的站點地址也改成HTTPS，但是先森修改后，竟然遇到了后臺地址無限跳轉。HTTPS無限302跳轉經過一番搜索，發現是需要在WordPress網站根目錄中的wp-config.php中添加配置進行解決：/* 解決https無限跳轉*/$_SERVER['HTTPS'] = 'on';define('FORCE_SSL_LOGIN', true);define('FORCE_SSL_ADMIN', true);添加在文件開頭處即可，藥到病除。CDN緩存命中率低先森閑來無事，跑去17ce測試了一下網站的GET速度，結果大出先森預料，竟然全國通紅（忘了截圖）。先森覺得很奇怪，先森這網站這么久了沒更新了，按理說應該訪問到的都是緩存才對啊，然后先森進行了排查。先森就從首頁排查起，先森在非放置本站的服務器上curl首頁，結果發現經常是 X-Cache-Lookup: Cache Miss，但是連著刷兩次就會變成Cache Hit，但是再過幾秒curl又變成Cache Miss了，這就有點奇怪了。仔細看了一下響應頭，結果先森發現 Cache-Control: must-revalidate, max-age=3，這就表示緩存3秒啊，怪不得連著刷能命中緩存，接下來就要看這個響應頭是怎么配置的了。不過講道理，騰訊云的CDN判定是否命中緩存的規則是看X-Cache-Lookup是否為Hit From MemCache或Hit From Disktank，直接顯示Cache Hit和Cache Miss是很奇怪的。X-Cache-Lookup:Hit From MemCache 表示命中 CDN 節點的內存。X-Cache-Lookup:Hit From Disktank 表示命中 CDN 節點的磁盤。不過先森也去查了一下，Cache Hit也是正常命中緩存了，也不需要過多的去糾結。這個僅緩存3秒的響應頭，先森自己記得是沒有配置的，可能比較容易出問題的可能是WordPress中使用的緩存插件。先森使用的緩存插件是WP Super Cache，所以首先就是懷疑這貨。百度大法好，果然是這貨影響的。默認情況下，WP Super Cache 返回的 Cache Control Header 固定為： cache-control: max-age=3, must-revalidate ，不管你在插件設置中設置的緩存超時時間是多久。修改起來也簡單，只要在WordPress根目錄的wp-config.php增加配置即可：define('WPSC_CACHE_CONTROL_HEADER','max-age=3600, must-revalidate');參考：WP SUPER CACHE 緩存插件但是，如果CDN的緩存也是繼承源站的響應頭，那先森在騰訊云CDN的緩存配置豈不是沒有用了？所以還是得研究一下什么情況下，CDN會繼承源站的配置。騰訊云官方文檔對高級緩存配置的說明經過一番查閱騰訊云官方文檔，發現是開啟高級緩存配置時，CDN會對比源站響應頭中的max-age值。先森看了一下自己CDN的配置，果然是開啟了高級緩存配置的，趕緊關閉：關閉高級緩存配置這個配置估計是為了迎合一些對自定義配置要求較高的用戶，先森這種小站就沒必要開啟了。CDN對no-cache或者no-store不緩存需要注意的一點是，默認情況下，CDN也不會對no-cache或者no-store的資源進行緩存，所以如果有遇到始終無法緩存的情況，可以檢查一下cache-control是否配置了禁止緩存。先森最終是即修改了WP Super Cache的配置，將max-age改為了3600，即1個小時；CDN側是關閉了高級緩存配置。至于為什么關閉了高級緩存配置的情況下，還要修改插件的緩存配置，那是因為max-age還會影響到客戶端瀏覽器的緩存配置，3秒太短了，所以還是修改一下比較好。修改之后，過了一段時間，先森再進入17ce進行GET測試，測試的結果就能讓先森接受了：17ce測速總結先森在網站開啟HTTPS中，可能還有一些比較小的坑，先森隨手就解決了，這里就沒有記錄了。網站加了CDN后，訪客具體的訪問速度先森實際上也不得而知，因為先森自己打開網站覺得還是很快的，結果用17ce一測，全紅，這個17ce的數據也不知道與實際情況是否匹配。如果有訪問比較慢的，還希望能夠留言告訴先森，您的地域與具體訪問的URL。

最近先森還是重拾了一點大學期間的激情，對網站又上心了一點。周圍的網站看著都將http換成了https，先森也想著動一動了。目前是已經完全換為https有一段時間了，先森也記錄一下切換過程中折騰的一些情況。首先，七牛七牛，先森最早開始使用的CDN與對象存儲。當然，當時并不清楚這些概念，不過依然非常感謝七牛這些年來的陪伴。先森最早一篇關于七牛的文章是2015年9月初寫的，先森的域名是同年6月份購買的。最早的記錄：WordPress使用七牛CDN導致ajax評論報錯{“error”:”get from image source failed: E405″}當初先森還不愿意使用七牛，因為插件沒什么作用，但后面正確使用后的感覺是真香，這一香，就香了五年。七牛對象存儲的免費額度七牛免費10G的存儲空間，以及10G的下載流量，還有圖片處理的免費額度，讓當時囊中羞澀（現在也是）的先森萬分欣喜。當時先森使用的還是萬網的免費虛擬主機，一個月只有10G的流量，剛開始沒有使用七牛的時候，各種折騰，然后各種跑滿。使用七牛，讓圖片、js文件等靜態文件都走七牛CDN后，問題得到有效解決。不過要使用https了，還是得跟七牛暫時告一段落了。七牛CDN的免費額度七牛的對象存儲必須搭配CDN進行使用，否則無法外網訪問。而七牛的CDN只有http請求有免費額度，https是必須收費的。雖然非常感謝七牛的陪伴，但是有白嫖的機會又何必花錢呢？然后，騰訊云先森一直不愿意換HTTPS的原因就是因為七牛，尤其是七牛的圖片處理，可以在請求圖片時對圖片進行各種壓縮、裁剪、加水印等操作，對網站加速訪問很有益處。但先森畢竟是一名騰訊云公有云售后運維，對自家產品了解還是很深的。在七牛使用了兩個產品，一個是對象存儲，一個是CDN。而要換到騰訊云，就得觀察好對應的產品。以前知道騰訊云也有圖片處理的相關產品，叫做萬象優圖，現在改名叫做數據萬象，不僅僅做圖片處理了。但是一直沒有去深入了解，也覺得既要使用騰訊云對象存儲，還要使用萬象優圖，很麻煩，不像七牛那么方便：對象存儲的圖片，加上參數就能做圖片處理。但是今年3月，騰訊云對象存儲做出了改變，當時發了郵件：對象存儲發布圖片處理功能當時先森對網站是放任不管的，對此也沒有在意。不過最近騰訊云又發了一次短信通知，先森又去研究了一下。對象存儲COS先森目前對網站本來就不是很重視，要切換使用一定是在有免費額度的基礎上。這里就需要注意的是，騰訊云的對象存儲COS在去年9月份是對免費額度進行了調整的，在2019年1月22日之前開通使用對象存儲的老用戶繼續每月享有之前的免費額度，之后開通的，就只有6個月的免費額度了。但是老用戶還得注意，看自己有沒有收到過以下郵件：COS免費額度變更標明了【不受此次變更影響】的用戶才能繼續享受每月免費額度，如果有什么疑問，可以在騰訊云官網聯系在線客服或提交工單。騰訊云COS的免費額度還是比較給力，存儲50G，流量10G，請求次數100萬次。先森在使用時，一般都是配合CDN進行使用，所以這里要關注的是CDN回源流量。先森這邊剛好有個賬號還享有免費額度，所以具備七牛遷移騰訊云的基本條件。然后繼續往下看。騰訊云的對象存儲簡稱COS，后面都直接用COS了。數據萬象CICOS的圖片處理功能，使用的是數據萬象的功能，所以還得看數據萬象有沒有免費額度。在數據萬象的文檔中可以看到，很多操作都是有免費額度的：數據萬象免費額度這里先森重點關注的是基礎圖片處理和CDN回源流量，這兩項是先森用的上的。基礎圖片處理10TB/月，七牛是20TB/月，對于先森來說完全夠了，先森11月5號開始使用，截止目前才用不到2GB，說來也是慚愧。CDN回源流量10GB/月，對先森來說也是完全夠用了。由于是結合COS來使用的，圖片不添加處理參數時，是不會回源到數據萬象的，所以這個流量先森目前用的特別少，才200MB+。需要注意的是外網出流量，只要你不直接使用數據萬象CI默認域名進行訪問，僅使用CDN->COS->CI的方式訪問的話，是不會產生的。數據萬象默認域名格式為存儲桶名-賬號Appid.piccd.myqcloud.com，盡量還是使用自己的域名通過CDN訪問吧。內容分發網絡CDN對象存儲和數據萬象都有免費額度了，那么再來看看CDN。CDN不像對象存儲和數據萬象，這樣費用那樣費用，簡單直接，就一個流量費用。不過CDN的免費額度按照官方文檔來說，個人用戶于官網開通 CDN 當天可獲贈共120GB免費境內流量包。分6個月生效，每月生效20GB。其他就沒有更多說明了，不過目前看來，只要接入了CDN，每個月還是會有10GB的贈送流量包，對先森來說夠用了，使用前可以在控制臺看下自己是否有贈送流量包：CDN免費流量包另外一點，SSL證書要從http切換為https，證書是肯定少不了的。想要安全，肯定不可能使用自頒發的證書，不過免費的證書也還是挺多的。先森使用的SSL證書是在騰訊云上直接免費申請的。騰訊云申請的免費證書是由亞洲誠信提供的，實際上也是DigiCert的免費DV證書。想比于Let's Encrypt證書的3個月一換，先森還是喜歡一年一換的。雖然Let's Encrypt證書可以跑腳本進行替換，但是從寶塔上的一些體驗來看，這個自動替換還是有點坑的。先森不想過多的去修改源站web服務器上的配置，所以SSL證書是直接部署到CDN上的，使用http的方式進行回源。剛開始切換https的時候，先森擔心https會出現問題，所以沒有開啟http到https的強制跳轉，將證書部署在CDN上面，切換起來比較方便。當然，在切換的過程中，還是不免的遇到一些坑，為了避免篇幅過長，先森這邊后面再說。后面的記錄：網站從http轉為https折騰記錄

最新在新建一個博客，新的博客是建在云服務器的，完全自主，不得不說感覺非常好，比起虛擬主機可操作性強太多了。因為可操作性強，所以想把該做的都做好，比如備份。受張戈博客影響，看到了張戈的同步7天的那篇文章，想照著操作的時候發現，七牛的qrsync工具竟已廢棄：qrsync已廢棄看這簡介，推薦使用qshell命令行工具，先森就干脆研究下使用新的工具來同步。有段時間沒和七牛云儲存打交道了，變化還是挺大的。為七牛的推陳出新點個贊。一、數據庫、網站本地備份腳本在服務器上編輯shell腳本，腳本代碼如下：#!/bin/bash# Name:liuxxbak.sh# This is a ShellScript For Auto Backup and Delete old Backup# Date:2017-8-19source /etc/profilebackupdir=/web/data/liuxx_bak   # 本地備份路徑time=` date +%Y%m%d `date=` date +"%Y-%m-%d %H:%M:%S" `day=15  #本地備份保留天數# 數據庫信息user=rootpassword=******host=127.0.0.1port=3306databases=wordpress# 本地網站根目錄backhome=/web/data/html/if [ ! -d $backupdir ]; then  mkdir $backupdirfi        mysqldump -h $host -P $post -u $user -p$password ${data} | gzip > $backupdir/${data}_$time.sql.gzif [ "$?" == 0 ];then        echo "[${date}] 數據庫 ${data} 備份成功!!" >> ${backupdir}/mysqllog.logelse#備份失敗則進行以下操作        echo "[${date}] 數據庫 ${data} 備份失敗!!" >> ${backupdir}/mysqllog.logfi# 備份網站tar -zcvf $backupdir/liuxx_${time}.tar.gz $backhome > /dev/null 2>&1# 刪除同步find $backupdir -name "*.gz" -type f -mtime +${day} -exec rm {} \; > /dev/null 2>&1先森將以上代碼保存為‘liuxxbak.sh’，名稱可以隨意自定義。保存后需要增加可執行權限：chmod +x liuxxbak.sh使用說明：將以上內容變量按需修改：backupdir=本地備份絕對路徑day=本地備份保留天數user=數據庫用戶名（建議使用root用戶，出錯可能性小）password=數據庫密碼host=數據庫IP或域名port=數據庫端口databases=數據庫名稱backhome=本地網站根目錄腳本執行方式：./liuxxbak.sh或者/web/data/liuxxbak.sh    # 絕對路徑執行如此可以檢查一下是否能夠成功備份。二、遠程備份到七牛云儲存1.命令。首先下載qshell命令行工具，下載頁面：根據服務器類型選擇下載linux 64位的服務器可以直接在服務器上這樣下載并增加可執行權限：wget -O qshell http://devtools.qiniu.com/2.1.3/qshell-linux-x64 && chmod +x qshell可以將qshell命令放入自定義目錄。或直接放至/usr/bin/路徑下，這樣就可以任何地方直接輸入命令了。2.鑒權。有了命令之后，我們需要七牛的鑒權，否則沒法使用接下來的命令。需要鑒權的命令都需要依賴七牛賬號下的 AccessKey 和 SecretKey。所以這類命令運行之前，需要使用 account 命令來設置下 AccessKey ，SecretKey 。鑒權的方式很簡單，首先進入七牛的個人中心->密鑰管理中，找到AccessKey 和 SecretKey。然后在服務器中運行一下命令：/web/data/qshell account ak sk執行之后，用戶的所有信息寫入到磁盤$HOME_DIR/.qshell下面。如：root用戶執行后，信息會保存在/root/.qshell/account.json文件中。如果你修改了密鑰，只需要重新執行以上命令即可，配置信息將被覆蓋。3.同步。終于到了這一步。qshell命令的命令有很多，同步需要用到的命令是qupload。qupload是用來將本地目錄中的文件同步到七牛空間中的命令。命令格式：qshell qupload [<ThreadCount>] <LocalUploadConfig>ThreadCount：并發上傳的協程數量，默認為1，即文件一個個上傳，對于大量小文件來說，可以通過提高該參數值來提升同步速度。LocalUploadConfig：數據同步的配置文件，該配置文件里面包含了一些諸如本地同步目錄，目標空間名稱等信息。ThreadCount是可以忽略的參數，默認一個文件一個文件的上傳，因為是要備份數據庫和本地網站文件，文件較少且大，顧保持默認就好。LocalUploadConfig為配置文件，配置文件中可帶的參數共有21個，先森選用了其中的7個。詳細的配置介紹請看這里。先森選用的參數如下，將以下內容保存到文件‘localupload.cnf’：{   "src_dir"            :   "/web/data/liuxx_bak",   "bucket"             :   "liuxx-backup",   "ignore_dir"         :   true,   "overwrite"          :   true,   "check_exists"       :   true,   "check_hash"         :   true,   "rescan_local"       :   true}解釋，*為必須項："src_dir":"/web/data/liuxx_bak",  # 本地備份路徑*"bucket":"liuxx-backup",    #同步數據的目標空間名稱，可以為公開空間或私有空間*"ignore_dir":true,    #遠程同步到七牛時，忽略本地路徑"overwrite":true,    #覆蓋同名文件"check_exists":true,    #上傳前檢查是否有同名文件"check_hash":true,    #在check_exists設置為true的情況下生效，是否檢查本地文件hash和空間文件hash一致"rescan_local":true,    #檢測本地新增文件并同步最后，遠程同步到七牛云儲存的命令為:/web/data/qshell qupload /web/data/localupload.cnf可以執行一下上面的命令，檢查是否能夠成功同步。先森同步到七牛云的效果：同步效果三、定時備份同步準備工作已經完畢了，現在所需的就是每天的自動備份及遠程備份了。執行crontab -e添加以下內容：00 02 * * * /web/data/liuxxbak.sh30 02 * * * /web/data/qshell qupload /web/data/localupload.cnf >/dev/null 2>&1凌晨兩點執行本地備份，凌晨兩點半執行遠程備份。當然，你也可以將qshell命令加到liuxxbak.sh腳本的最后，那么只用添加第一條計劃任務就可以了。四、七牛十五天循環備份七牛云儲存免費的存儲空間大小是10G，如果你的七牛云存儲空間有點緊急的話，可以繼續本操作。這時候，點擊‘生命周期’，添加規則，我們可以設定刪除15天前的文件。先森設定的規則如下：刪除15天前的文件當然，如果七牛云存儲的剩余空間很足的話，可以保留更多天，這樣可供回退的版本就更多了。總結無論是用虛擬主機，還是使用云服務器，有一套備份的機制是很重要的。如果像先森一樣，主站使用的是虛擬主機，也有另外的云服務器的話，這套備份方案改改，也可以把自己虛擬主機的數據庫一起備份起來嘛。

七牛圖片處理樣式，也就是我們通過創建一個樣式，樣式內定義了要對圖片進行怎樣的操作，然后我們只需要在圖片后面加上樣式分隔符和樣式名稱，即可對圖片進行處理的一種方式。說起來，這種方式就像我們添加在functions.php中定義的加在鉤子上的函數，要用的時候，直接調用函數，函數內的處理也就隨之而動了。使用方法七牛圖片處理樣式，之前先森一直稱其為七牛裁剪代碼。因為先森將處理樣式用在的一般是縮略圖上，所以稱之為裁剪；而代碼主要就是先森鬧了笑話了。先森之前對七牛圖片處理樣式的使用一直是將樣式內容直接加在圖片后面，中間加上了個問號,這樣就導致圖片的鏈接看起來非常的長（如下圖）。加上七牛裁剪代碼鏈接特別顯得長上面的這種使用方式，簡而言之就是，七牛為我們準備好了一個調用函數，而先森卻非要每次都把函數內容重新寫一遍。還好，先森在@第9頁看到了正確的使用方法。正確的使用方法應該如下圖，直接用斜杠+樣式名稱。正確的使用方式注意事項1.七牛圖片處理樣式的個數不是固定的，每個存儲空間可以定義100個圖片處理樣式。這一點對我們小站影響比較小，先森目前才使用7個樣式。2.就像PHP語言要加上<?php ?>來區分php代碼一樣，圖片鏈接那么長，圖片名稱和圖片處理樣式的名稱都是用戶自定義的，萬一兩個名稱重復了怎么辦呢？所以，七牛也需要一個協議好的“定義”來區分一串字符是否為圖片處理樣式。而七牛的這個“定義”，就是樣式分隔符。樣式分隔符這個樣式分隔符乍眼一看，好像沒有什么作用，選擇哪一個好像都沒有什么。但是，先森使用之后，認為這個分割符還是很有作用的。樣式分隔符能夠使用的符號如下：- _ ! / ~ ` @ $ ^ & * ( ) + = { } [ ] | : ; " ' < > , .七牛默認使用的是斜杠，但先森覺得，這個斜杠就是最不應該作為樣式分隔符的。先森使用斜杠為分隔符之后，網站上的圖片名稱就完全一樣了。道理很簡單，在一個鏈接中，最后一個斜杠后面的內容，默認為下載后的文件名。如下圖，dengxiang是先森設置的樣式名，清一色啊。文章中的圖片全是圖片樣式名稱所以先森也會找時間，把七牛的圖片樣式分隔符，以及主題中的樣式分隔代碼給更換了。大家可以看看七牛官方的演示圖片，以中橫線為樣式分隔符的效果：以中橫線為分隔符的效果所以希望還沒有開始使用七牛圖片處理樣式的朋友，第一步先更改樣式分隔符。代碼部分如果使用七牛圖片處理樣式，就相當于修改了圖片的后綴名，所以七牛云儲存也就匹配不到文章中的圖片了。在使用斜杠為分隔符的情況下，先森嘗試了修改七牛云儲存中的本地設置-擴展名設置（因為分隔樣式是斜杠，所以用了反斜杠轉移，不然會出錯），但是并沒有起作用。大家可以試試換了分隔符后的情況。擴展名修改所以，只能摒棄七牛云儲存了。然后我們需要做的是將圖片拉取到七牛存儲空間，然后網站上訪問的也是來著七牛的圖片。因為從一開始先森使用的就是七牛云儲存，而七牛云儲存設置的第一步就是填寫API，這讓先森陷入了一個誤區——沒有API圖片就不會保存到七牛存儲空間。后來先森想明白了，只需要直接把圖片上的域名改為七牛的域名，然后七牛會判斷圖片是否存在于存儲空間。如果存在，直接輸出；如果不存在，回源拉取圖片到七牛存儲空間。那么明白了就簡單了，我們只需要將網站上圖片鏈接中的域名直接換成七牛域名即可，在主題的functions.php中添加：//WordPress七牛CDN代碼版function QiNiuCDN(){    function Rewrite_URI($html){        /* 前面是需要用到七牛的域名,后面是需要加速的靜態文件類型，使用分隔符 | 隔開即可 */        $pattern ='/http:\/\/(www\.|)capjsj\.cn\/(wp-|ueditor|avatar)([^"\']*?)\.(jpg|js|css|gif|png|jpeg)/i';        /* 七牛CDN空間地址,請自行替換成實際空間地址 */        $replacement = 'http://img.capjsj.cn/$2$3.$4';    $html = preg_replace($pattern, $replacement,$html);    return $html;    }    if(!is_admin()){        ob_start("Rewrite_URI");    }}add_action('init', 'QiNiuCDN');這樣我們就用代碼實現了將靜態資源拉取到七牛存儲空間。接下來需要做的，是給文章中的圖片加上七牛蹄片處理樣式，同樣是在functions.php中添加：/** * 七牛縮略圖和水印 D9Y.NET整理**/function QiNiuThumbnailWatermark($content) {   global $post;   $pattern ="/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";   /* 下面這行代碼中的dengxiang是七牛樣式中的樣式名稱，而斜杠為七牛中設置的樣式分割符 */   $replacement = '<img$1src=$2$3.$4/dengxiang$5$6>';   $content = preg_replace($pattern, $replacement, $content);   return $content;}add_filter('the_content', 'QiNiuThumbnailWatermark');?>當然，上面這串代碼只是一下就將網站文章圖片添加上了七牛圖片處理樣式，其他如相關文章、最新文章、文章列表中的縮略圖還沒有添加對應的樣式。對于這些，先森是直接在調用圖片時手動添加樣式，直接加在functions.php中的函數，先森還沒去研究。先森的例子如下：<img src="<?php echo post_thumbnail_src(); ?>/sidebar" alt="<?php the_title(); ?>" />總結總之，使用七牛圖片處理樣式，能使你的圖片鏈接看上去更清爽。但如果使用斜杠為樣式分隔符，又會使你的圖片名稱看起來非常操蛋。另外，七牛圖片處理，不僅僅是裁剪圖片大小，更為重要的是，可以設置圖片水印。

近期先森對WordPress和七牛研究的比較勤，折騰了很多，其中很多都是和七牛有關的。七牛的裁剪功能確實好用，但是先森為縮略圖（文章下面相關文章的圖片）和文章中的圖片都加上七牛裁剪代碼后，就發生了沖突。關于為縮略圖和文章圖片添加七牛裁剪代碼，大家可以先看看這些文章：1.七牛代碼如何使用：WordPress調整Tag標簽頁文章列表縮略圖優化小記2.已發布的文章添加代碼：將WordPress歷史文章中所有圖片加上七牛裁剪水印代碼其實，發生沖突是必然的事情。首先，縮略圖調用的圖片，是從文章中調用圖片鏈接。圖片鏈接獲取的優先順序是：自定義字段為 thumb 的圖片>特色縮略圖>文章第一張圖片>隨機圖片/默認圖片。也就是只有文章中沒有圖片時，才會調用你設置的隨機圖片。而文章中的圖片，先森已經全部加上了七牛裁剪代碼。調用這些圖片鏈接的時候，鏈接里面實際上已經有一段七牛裁剪代碼了。這將導致，縮略圖調用的時候在后面增加的裁剪代碼會重復加在后面，而七牛的規則是只生效前面的一段，也就是縮略圖的裁剪失效了，你調用縮略的時候還是更大的圖片，沒有達到裁剪縮小圖片體積的目的。加上了兩段七牛裁剪代碼前期準備這種情況，整理了一下思路，總結了下解決方案。增加判斷，如果圖片鏈接中含有裁剪代碼，則替換成新的裁剪代碼；如果不包含，則直接在鏈接后面添加裁剪代碼。要用兩種函數，查找和替換。先森在w3school里找到了這兩種適合的函數，要了解的可以看看：查找函數：PHP strpos() 函數替換函數：PHP str_replace() 函數除了準備這兩個函數，如果是使用WordPress大學中的縮略圖調用代碼的同學，還要修改下代碼。縮略圖調用：WORDPRESS添加相關文章功能（標題/縮略圖樣式）WordPress大學提供的代碼，是加在functions.php中的，調用的時候可以直接輸出圖片鏈接：//添加特色縮略圖支持if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails'); //輸出縮略圖地址 From wpdaxue.comfunction post_thumbnail_src(){    global $post; if( $values = get_post_custom_values("thumb") ) { //輸出自定義域圖片地址 $values = get_post_custom_values("thumb"); $post_thumbnail_src = $values [0]; } elseif( has_post_thumbnail() ){    //如果有特色縮略圖，則輸出縮略圖地址        $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full'); $post_thumbnail_src = $thumbnail_src [0];    } else { $post_thumbnail_src = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches); $post_thumbnail_src = $matches [1] [0];   //獲取該圖片 src if(empty($post_thumbnail_src)){ //如果日志中沒有圖片，則顯示隨機圖片 $random = mt_rand(1, 10); echo get_bloginfo('template_url'); echo '/images/pic/'.$random.'.jpg'; //如果日志中沒有圖片，則顯示默認圖片 //echo '/images/default_thumb.jpg'; } }; echo $post_thumbnail_src;}因為要對圖片鏈接增加查找，所以上面代碼中，最后幾行的輸出可不能要，這樣是判斷不了的。需要將上面的最后五行的"echo"換成"return"，即： return get_bloginfo('template_url').'/images/pic/'.$random.'.jpg'; //如果日志中沒有圖片，則顯示默認圖片 //echo '/images/default_thumb.jpg'; } }; return $post_thumbnail_src;}解決方法準備齊全之后，就可以解決問題了。之前，先森是這樣調用相關文章的圖片的： <img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/130/h/100/q/100" alt="<?php the_title(); ?>" class="thumbnail" />那么，現在為了解決重復代碼的問題，需要將上面的代碼換成下面的內容：<?php     $imgsrc = post_thumbnail_src();    $qiniu_dengxiang='imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMi5wbmc=/dissolve/80/gravity/SouthEast/dx/5/dy/4';    $qiniu_xiangguan='imageView2/1/w/130/h/100/q/100'; if(strpos($imgsrc,$qiniu_dengxiang)){?>            <img src="<?php echo str_replace($qiniu_dengxiang,$qiniu_xiangguan,$imgsrc);?>" alt="<?php the_title(); ?>" class="thumbnail" />           <?php }        else{?>            <img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/130/h/100/q/100" alt="<?php the_title(); ?>" class="thumbnail" />        <?php }?>修改保存之后，檢查一番，發現問題確實得到了解決：只增加了一次七牛裁剪代碼同理，側邊欄的最新文章縮略圖也可以這么修改，先森也就不累述了。

關于七牛云儲存的好，各位站長都有所了解。以前先森不怎么重視的七牛縮略圖裁剪、為圖片增加水印等功能，先森也開始重視起來了。經過七牛裁剪之后的效果顯而易見，圖片體積小了，網頁打開速度也就快了。當然，成航先森的網站訪問量較小，還不存在服務器壓力過大等問題。總之，七牛能為我們減少很多問題。前段時間，先森鼓搗出了怎么讓百度UEditor在編輯圖片的時候，就為圖片添加上七牛裁剪的代碼。但是這樣影響到的圖片，也之后實現該效果之后的文章中的圖片，之前已經發布的圖片就沒法影響到了。但是這還就成了先森心中的一根刺。關于七牛云儲存代碼的文章，大家可以看看：1.七牛代碼如何使用：WordPress調整Tag標簽頁文章列表縮略圖優化小記2.如何更方便的使用：WordPress百度UEditor編輯器自動添加七牛云儲存裁剪代碼其實關于如何處理這種情況，先森心里早已有了想法。首先，不可能自己一篇篇的打開文章，修改圖片的鏈接，這太繁瑣了，不現實。使用插件的話，也太麻煩。所以肯定還是要動動非常敏感的數據庫啦。本來，現實想的是，先使用正則表達式，查找圖片鏈接，然后為圖片后面，增加七牛的裁剪代碼。也就是在每張圖片的后面，增加以下代碼：?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10但是百度了一下，MySql數據庫使用正則，好像很麻煩的樣子（實際上是有點懶，看著頭暈）。所以還是研究鏈接本身，最終想出了懶辦法。還是直接使用我們百試不爽的替換大法：update 表 set 內容字段=replace(內容字段,'需要被替換字符串','替換字符串')研究鏈接之后，發現，只要把能只有圖片鏈接才有的部分，替換成這部分加上七牛裁剪即可。所以最后顯示用的替換語句是：update wp_posts set post_content=replace(post_content,'.jpg" title','.jpg" title') update wp_posts set post_content=replace(post_content,'.png" title','.png" title')因為先森文章中圖片基本只有jpg和png兩種格式，圖片<img>便簽中，都是鏈接后面加title，所以就用上面的那種替換。運行之后，發現沒有問題：替換圖片鏈接運行之后，抽樣檢查了一下以往的文章，發現確實生效了，沒有出現問題，OK！

先森在之前的文章頁談到過，先森想要將七牛云儲存、Auto Highslide插件和百度UEditor編輯器三方面協調，在能夠使Auto Highslide插件的燈箱效果不失效的情況下，讓從百度UEditor編輯器插入的圖片，在不被燈箱放大的時候，變成被七牛裁剪過的圖片。即張戈博客提到過的：“那么讀者打開文章頁面時，瀏覽器只會加載這個300px的img中圖，而用戶如果想看清楚圖片時，就會點擊圖片放大，這時候才會加載最清晰的完整圖片！要知道，并不是每個讀者都會想去看圖片的！所以，暗箱放大功能可以變相的加快頁面加載速度！因為你在文章中插入的是小體積的中等圖，只有點擊放大才會加載大圖。”因為先森用的不是WordPress自帶的編輯器已經早早的用上了百度UEditor編輯器，所以不能像張戈說的那樣，在編輯的時候插圖選擇插中等大小的圖，所以先森就得從百度UEditor編輯器這里下手了。關于WordPress百度UEditor編輯器的更多文章，大家可以看這些：百度UEditor編輯器插件1.4.3.1 For WordPress解決百度UEditor編輯器上傳的圖片無法被七牛CDN自動緩存問題解決使用百度UEditor編輯器后移動端圖片被拉伸問題此次先森想要達到的目的，是圖片從百度UEditor編輯器上傳后，自動帶上已經準備好的七牛裁剪代碼：?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10這段代碼會將圖片裁剪為寬度500px，高度自適應，并帶上先森設置的水印。先森本來想像“解決百度UEditor編輯器上傳的圖片無法被七牛CDN自動緩存問題”一文中的方法一樣，修改/wp-content/plugins/ueditor/ueditor/php文件夾中的config.json文件。但先森無奈的發現，這里只能修改鏈接前綴，不能添加后綴，所以還需另尋他法了。先森又想起“解決使用百度UEditor編輯器后移動端圖片被拉伸問題”一文中解決問題的方法，是注釋了/wp-content/plugins/ueditor/ueditor/dialogs/image中image.js文件里的一段代碼，這段代碼是輸出通過百度UEditor編輯器設置的圖片的高寬，這導致了移動端圖片被拉伸。這段代碼附件的代碼是以下內容：getInsertList: function () {            var data = this.getData();            if(data['url']) {         return [{                    src: data['url'],                    _src: data['url'],                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }這里的代碼，是控制輸出通過UEditor編輯器修改過的圖片屬性。先森看到了上面的“src: data['url'],”部分，再看到下面的被注釋部分，照葫蘆畫瓢的修改了一下上面的代碼：getInsertList: function () {            var data = this.getData();            if(data['url']) {         return [{                    src: data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10",                    _src: data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10",                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }就這樣，刪除瀏覽器緩存后再到后臺嘗試插入圖片，結果沒看到有添加成功，就以為是失敗了。但后面想明白了，上面的代碼控制的是輸出通過UEditor編輯器修改后的數據。點擊圖片-修改，隨便做個修改，再看代碼，OK。圖片鏈接后面添加上了七牛的裁剪代碼。后來又操作了幾下，發現高興的太早。當你每次修改圖片信息時，UEditor編輯器都會給你加一次七牛裁剪代碼。這才明白，這里有個循環。通過設置變量“i=0”，結尾讓“i++”，判斷“if（i==0）”后發現，UEditor編輯器不僅僅是這一段代碼循環，而是每次打開圖片修改框，都會重新調用一次image.js。七牛裁剪代碼產生了重復知道了問題所在就簡單了，用JavaScript的indexOf()函數，判斷指定的字符串值中是否存在于字符串中。關于這個函數的用法，可以參考：W3School：JavaScript indexOf() 方法明白了indexOf()函數的用法之后，先森對上面的代碼做了如下調整：        getInsertList: function () {            var data = this.getData(); var abcd=data['url']; if (abcd.indexOf("/10/dy/10")<0){ data['url']=data['url']+"?imageView2/2/w/500/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10";}            if(data['url']) { return [{                    src: data['url'],                    _src: data['url'],                    width: data['width'] || '',                    height: data['height'] || '',                    border: data['border'] || '',                    floatStyle: data['align'] || '',                    vspace: data['vhSpace'] || '',                    title: data['title'] || '',                    alt: data['title'] || '',                    /* style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"*/                }];            } else {                return [];            }        }然后經過測試，發現可行。上傳圖片后，打開圖片的修改，做任意修改操作后會增加七牛裁剪代碼，且不會重復。并且先森特意去服務器上查看了下圖片上傳的文件夾，發現這樣操作代碼并不會造成圖片的二次上傳。先森用測試文章插入圖片，對圖片的大小進行了對比：網頁圖片大小對比上圖中，上面部分是在電腦上看到的圖片原圖信息，下面部分是網頁中圖片的信息。對比發現，原圖大小是63.8KB，而經過七牛裁剪之后，圖片大小減少到了35.1KB，幾乎減少了一半，效果是非常明顯的。但這樣還是沒有達到先森預期的效果，那就是點擊圖片會加載出原圖大小。而這樣操作之后，打開的圖片還是被七牛裁剪過的。這算是一個小小的遺憾了，先森會再想辦法解決。經過半天的研究，先森通過修改知更鳥鳥叔的代碼，終于實現先森想要達到的效果：不點擊圖片的時候，顯示被七牛裁剪成固定500px寬度的圖片，點擊后，顯示七牛不裁剪但帶了水印的圖片。<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ if (! this.parentNode.href) {var imgsrc = this.src  //需要設置新的變量，不設置的話，會使不點擊的圖片鏈接也跟著改變if (imgsrc.indexOf("?") != -1){imgsrc=imgsrc.replace(/[^\?]*$/, "imageView2/1/q/100|watermark/1/image/aHR0cDovL2ltZy5jYXBqc2ouY24vY2FweHNfMS5wbmc=/dissolve/100/gravity/SouthEast/dx/5/dy/5");//替換問號后面的內容為新的內容} $(this).wrap("<a href='"+imgsrc+"' class='highslide-image' onclick='return hs.expand(this);'></a>"); } });});</script>用上面的代碼替換鳥叔的代碼即可達到目標。這里用的是replace()函數。這個函數的語法是:stringObject.replace(regexp/substr,replacement)要使用先森上面的代碼達到七牛裁剪的效果，自己在七牛中設置好數據處理的樣式后，替換先森的replacement段數據即可。

Auto Highslide插件是先森用的燈箱插件，也就是文章中的圖片可以點擊放大，并且文章中的所有圖片可以像幻燈片一樣左右切換查看。安裝Auto Highslide插件后，鼠標放在文章的圖片中，鼠標圖案會變成放大鏡，提示可以放大。發大這個在實際應用中很有用。這個插件的設定是，點擊圖片放大，放大會放大到適應屏幕的大小，如果查看最大化（實際大小），需要點擊按鈕或者快捷鍵“F”鍵：Auto Highslide插件查看實際大小認識這個插件，先森也是在免費資源部落看到的。搜了一下，在WordPress插件庫里搜索，好像搜不到Auto Highslide插件，所以要看詳細介紹或下載的，可以去免費資源部落看看：免費資源部落：WordPress博客網站文章圖片美化技巧:放大、幻燈片播放本文記錄的是先森將Auto Highslide插件變成主題自帶，也就是代碼化的折騰過程。各個WordPress的先輩們都在說，WordPress的插件過多，會影響網站的響應速度，所以插件是裝的越少越好。當然，這也不是絕對，要看自己的優化。先森最近想實現的是讓燈箱能夠配合上七牛的圖片處理。目標有兩個：1.圖片加上水印；2.沒放大之前，圖片是被七牛裁剪成寬度500px的，點擊圖片后顯示原圖。但是先森思考了很久，也沒有想出能夠同時實現兩個目標的方法。因為先森的WordPress后臺文章編輯是用的百度UEditor編輯器，所以不能像WordPress自帶的編輯器插入圖片時選擇切好的大中小三種圖片大小。這就需要七牛、百度UEditor編輯器、Auto Highslide插件三方的協調，所以先森有點腦子不夠用。雖然沒有想出怎么解決，但是卻順便把Auto Highslide插件代碼化給解決了。將服務器中的Auto Highslide插件文件夾下載下來，打開“auto-highslide.php”文件。找到文章中的以下代碼：'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide已用有3段以上代碼，分別在第23、24、27行，將以上代碼全部替換成以下代碼：'.get_bloginfo('template_directory').'插件的代碼也就修改完了，非常簡單。接下來現將修改好的“auto-highslide.php”文件，與插件文件夾中的“highslide”文件夾上傳到你的主題文件夾中。當然，僅僅如此還沒有生效，還需要在你的主題functions.php中添加下面的代碼：//燈箱插件代碼化include("auto-highslide.php");這就完工了。設置之前先森將插件停用了，看了一下圖片放大失效了。設置完后再檢查，OK，放大效果又回來了。下面就可以放心的把插件刪除啦：刪除Auto Highslide插件重要補丁要使Auto Highslide插件生效，還需要在日志中插入圖片時，選擇鏈接到媒體文件，如果不設置的話，圖片暗箱效果就無法生效。但每次都點擊設置的話，會比較麻煩。如果發布了很多文章之后，才開始啟用燈箱，如果還要將發布過的文章重新設置圖片，那就更麻煩了。所以感謝知更鳥博客鳥哥，教了大家一種補救方法，大家可以去原文看看：知更鳥博客：為WordPress文章圖片自動添加鏈接到原圖方法其實也很簡單，將下面的JS代碼到主題header.php模版文件中：<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ if (! this.parentNode.href) { $(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>"); } });});</script>該腳本會檢查文章中的圖片是否包含了鏈接，如果沒有，會自動為圖片添加鏈接到原圖。修改其中的 #newsContent 為你主題正文的CSS類。如果你的主題未加載jquery.js庫文件，代碼將無效，可以將這句代碼加到上面<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

最近開始工作了，但是工作目前比較閑，所以又開始研究WordPress了。目前本站的所有文章列表中，只有標簽頁設置了縮略圖，但是本站的縮略圖一直是先森心中的一個心病，因為覺得沒有做好。比如，有些圖片比較寬，就會導致縮略圖的下半部分是空的，就像下面這樣：縮略圖過寬導致下半部分為空所以，先森就想對這種情況做一個優化。當前想到的優化方法有兩種，一種是先森的友鏈kouss博客中的“用CSS3使圖片在容器內垂直水平居中”提到的CSS優化方法。第二種是著名博客我愛水煮魚提到的七牛云儲存插件中帶的日志說略圖功能。CSS優化方法嘗試首先進行了比較簡單的嘗試，通過修改CSS來改良。這個簡單，不用修改文件，直接審查元素就可以測試了。這種方法是：div容器的css樣式width: 80px;height: 80px;overflow: hidden;img標簽的css樣式width: auto;height: auto;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);下面做一個對比：CSS修改之前的效果CSS修改之后的效果通過對比可以看到，雖然修改CSS之后，縮略圖不會留空了，但是卻顯得很隨意，沒有顯示出想要的部分，所以也有些不盡人意。當然，先森是直接按照上面的代碼改的，如果修改下CSS代碼，肯定可以讓效果更好，但是今天不想調試CSS代碼，以后有空再研究。七牛縮略圖方法嘗試這種方法來自我愛水煮魚博客中的“七牛鏡像存儲 WordPress 插件：一鍵實現 WordPress 博客靜態文件 CDN 加速”一文，其中提到了七牛云儲存插件中wpjam_post_thumbnail 函數幫你通過使用七牛的縮略圖 API 直接生成縮略圖的方法：<?php  if(wpjam_has_post_thumbnail()){?><div class="entry-thumb"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php wpjam_post_thumbnail(array(150,150),$crop=1);?></a></div><?php } ?>其中有兩個參數：$size：設置縮略圖的大小，它是一個數組，比如上面例子中就是設置縮略圖大小為：寬是 150px，高也是 150px。$crop：設置是否裁剪縮略圖，1為裁剪，如果為0，則只是按照最大邊進行縮放，不進行裁剪。上面的代碼放的位置是你放he_post_thumbnail()函數的位置。這個函數會調用你為文章設置的縮略圖，當你沒有設置縮略圖的時候，會調用文章的第一張圖片。這個功能在發布文章的時候比較新穎（2013年），但到了現在就有點不夠用了。先森對這種方式進行了一波嘗試，來看看效果：使用七牛云儲存插件的函數之后圖片出現了拉伸當文章內沒有插入圖片時通過上面兩圖，可以看到，使用七牛云儲存插件的函數之后，圖片出現了拉伸的問題。以及，當圖片內沒有圖片時，就會顯示空白。因此也讓先森不滿意，但當先森要放棄時，又想起七牛本身提供的圖片處理——裁剪。雖然并不能達到想要的目標，但是裁剪之后卻可以加快網頁的加載速度。七牛裁剪功能的應用進入七牛網站，選擇空間后點進數據處理，點擊“新建圖片樣式”：七牛-新建圖片樣式點擊后，進行設置。本站的縮略圖是240*160的，所以只需要設置下寬高就行了：七牛-設置處理縮放方式設置好之后點擊完成，會出現下面的結果：裁剪設置成功后的結果關于設置成功后要如何使用，很簡單，在圖片鏈接后面加上一個問號，再加上上圖中紅框中的內容即可。如：http://img.capjsj.cn/ueditor/php/upload/image/20150831/1441015508862148.jpg?imageView2/1/w/240/h/160/q/75再來檢查一下有沒有得到優化：使用七牛裁剪之前使用七牛裁剪之后可以看到的是，原本的縮略圖只是將圖片縮小了而圖片的尺寸沒有更改，共61.2KB。使用七牛裁剪之后，圖片的尺寸變成了240*160，大小也縮減至12.1KB。值得一提的是，本站縮略圖使用的是博客WordPress大學中“WORDPRESS添加相關文章功能（標題/縮略圖樣式）”一文輸出縮略圖地址的代碼：//添加特色縮略圖支持if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails'); //輸出縮略圖地址 From wpdaxue.comfunction post_thumbnail_src(){    global $post; if( $values = get_post_custom_values("thumb") ) { //輸出自定義域圖片地址 $values = get_post_custom_values("thumb"); $post_thumbnail_src = $values [0]; } elseif( has_post_thumbnail() ){    //如果有特色縮略圖，則輸出縮略圖地址        $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full'); $post_thumbnail_src = $thumbnail_src [0];    } else { $post_thumbnail_src = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $post_thumbnail_src = $matches [1] [0];   //獲取該圖片 src if(empty($post_thumbnail_src)){ //如果日志中沒有圖片，則顯示隨機圖片 $random = mt_rand(1, 10); echo get_bloginfo('template_url'); echo '/images/pic/'.$random.'.jpg'; //如果日志中沒有圖片，則顯示默認圖片 //echo '/images/default_thumb.jpg'; } }; echo $post_thumbnail_src;}以上代碼放置于主題中functions.php中。調用的時候是直接使用函數post_thumbnail_src()，所以本站在縮略圖中添加七牛裁剪的方式就是之間在函數后面加裁剪代碼即可：<img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/240/h/160/q/75" alt="<?php the_title(); ?>" />本文就算是對今天的鼓搗做一個記錄，若能幫到大家那也是極好的。