近期先森對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(); ?>" />本文就算是對今天的鼓搗做一個記錄，若能幫到大家那也是極好的。

百度UEditor編輯器雖然非常好用，但是卻也存在著一些與其它插件沖突的情況。下面要為大家分享的是通過百度UEditor編輯器上傳的圖片，無法被七牛CDN自動緩存的解決方法。之前為大家推薦了百度UEditor插件，不了解的可以看看：百度UEditor編輯器插件1.4.3.1 For WordPress原因分析通過百度UEditor編輯器上傳的圖片，通過審查元素我們可以看到，圖片鏈接只有路徑（點擊放大）：而產生只有路徑的原因是百度UEditor編輯器上傳圖片時自動添加的地址就只有路徑：而要達到使七牛識別，圖片鏈接就必須帶上網站地址，如下圖所示（點擊放大）：解決方法我們需要達到的目標是鏈接完整，而UEditor編輯器上傳的圖片，從上傳時的鏈接就不完整，所以我們需要解決的就是讓UE編輯器總動在鏈接上添加網站鏈接，使鏈接完整。在服務器上打開/wp-content/plugins/ueditor/ueditor/php文件夾，找到config.json文件，編輯這個文件，打開如下（點擊放大）：我們可以看到，小編為本站編輯好的第11行紅框位置，只要在雙引號中添加自己網站地址即可。2016年3月10日更新先森為了發出此文之前的文章內圖片也能重新被七牛緩存，動了點腦子，想要解決這個問題。首先，之前的文章圖片的問題就是只有鏈接只有路徑，沒有域名，所以先森首先想到的就是為圖片添加域名。在2016年3月9日先森發布的文章中提到過，知更鳥為我們提供了一個為WordPress文章圖片自動添加鏈接到原圖的代碼：WordPress插件Auto Highslide代碼化折騰小記知更鳥的代碼是為WordPress文章中圖片添加鏈接，所以先森就想就此代碼進行改編，使其能夠為圖片增加域名。先森的JavaScript純屬自學，而且只學了一點，雖然最后成功了，但其中的艱辛卻無人可知。不多說，這接上最終代碼：<script type="text/javascript">$(function() { $('#newsContent img').each(function(i){ var str=$(this).text()  //或許應該是var str=this.src if(str.indexOf("capjsj.cn")==-1){ $(this).attr("src",this.src); } });});</script>然而代碼雖然是弄出來了，但是先森發現，這只是從表面上更改了鏈接，然而源代碼確是沒有改變，所以就無法緩存這些圖片了。不過，雖然繞了個大彎子，但先森還是終于想到了正確的做法——替換。先森的數據庫沒有學好，所以一直小心翼翼的不敢去觸碰數據庫，但這次終于還是要碰了。數據庫的替換語句大概是這樣的：update 表 set 內容字段=replace(內容字段,'需要被替換字符串','替換字符串')先森的替換代碼是這樣的：update wp_posts set post_content=replace(post_content,'src="/ueditor','src="//www.cnidcc.cn/ueditor')即：用'src="//www.cnidcc.cn/ueditor'替換掉'src="/ueditor'。這樣非常簡單的就解決了問題，論學好知識的重要性。。。有任何疑問，歡迎在下方評論區提出，也歡迎在頁面頂部右方關注我的微博（@成航先森）。

起因：最近流量不夠用了，所以就開始使用七牛CDN用以減少流量消耗。七牛的免費CDN配額還是很給力的，以前不想用完全是因為用的七牛官方WordPress插件完全沒有作用，沒有效果，所以棄用。后來發現用水煮魚的七牛插件才是正解，所以才開始啟用。本以為沒有問題了，結果發現用七牛CDN之后，文章頁的返回頂部出現BUG了。本來嫌麻煩，也就不想修復了。但是這卻一直成為了心中的梗，強迫癥涌上心頭，決定好好研究一下怎么回事。結果，返回頂部還沒有解決，卻意外的發現評論模塊又出了問題，也就是題目中說的報錯：{"error":"get from image source failed: E405"}。如下：原因：經過百度后了解到，確實是CDN的問題。CDN把你的comments-ajax.js文件給緩存走了，結果導致路徑錯誤，這時候我們有兩種選擇來修復這個問題。1、修改js文件讓它能夠支持你的CDN路徑2、將這個文件單獨排除在CDN的鏡像列表之外解決方案：1、修改comments-ajax.js文件這種方法的好處是你依舊可以體驗完整的CDN鏡像服務，你需要打開你主題目錄下的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('7xjad9.com1.z0.glb.clouddn.com','www.cnidcc.cn');這樣，修改完成后應該是下邊的樣子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('7xjad9.com1.z0.glb.clouddn.com','www.cnidcc.cn');然后將文件更新上傳到你的服務器，再到七牛空間管理去刷新該文件。2、添加CDN鏡像例外使用WP Super Cache來開啟CDN鏡像，直接將comments-ajax.js這個js文件排除在鏡像列表之外，雖然加載的時候多了一個js文件，但省去了對付七牛那個緩慢的刷新過程，其實還是很不錯的，立竿見影啊~WP Super Cache在WordPress后臺插件安裝中可直接搜索安裝。方法：找到WP Super Cache的CDN頁面，然后在下邊找到“如果是之前有則排除”這一項，將comment-ajax填寫進去就好了。如下圖（點擊放大，放大后按“F”鍵放至最大）：這樣，就只有一個文件被排除在外了。好了，大家去試試吧，有任何疑問可在底部討論區提出。