先森在之前的文章頁談到過，先森想要將七牛云儲存、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段數據即可。

先森現在閑來無事就折騰網站，還在想著怎么給文章圖片加水印等系列問題，又想到前幾天把標簽頁的文章縮略圖用上了七牛縮略圖，使文章加載時的圖片體積減小了很多，同理可以把每篇文章下的相關文章的縮略圖也用上。關于文章的縮略圖，大家可以看看：WordPress調整Tag標簽頁文章列表縮略圖優化小記繼續上文，先森按照同樣的方法后，發現每篇文章下面的相關文章，竟然都是一樣的，這讓先森大吃一驚：文章1下面的相關文章文章1下面的相關文章解釋一下，先森用的相關文章的代碼，是倡萌在WordPress大學上分享的:WordPress大學：WORDPRESS添加相關文章功能（標題/縮略圖樣式）先森想要實現的情況是，顯示本篇文章同一個標簽下的隨機5篇文章。這本來是很簡單的一件事，但是先森還是繞了很大的彎子。先森把倡萌提供的代碼一句一句的研究，重點是有時候還跳著，最后發現剛好把重要部分跳過了。但其實還是有好處的，就是讓先森對WordPress的代碼理解的更多了。下面先森把倡萌提供的代碼經過先森注解后的代碼貼出來：<h3 class="related_articles"><span>相關文章</span></h3><ul class="related_img"><?php$post_num = 5;  //顯示文章數量$exclude_id = $post->ID;   //獲取當前文章的ID$posttags = get_the_tags();  //get_the_tags()遞交給$posttags當前文章所以標簽的名稱$i = 0;if ( $posttags ) { $tags = ''; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ',';  //分別將$posttags中標簽的名詞遞交給$tag，然后將獲取到的標簽ID遞交給$tags $args = array( 'post_status' => 'publish', 'tag__in' => explode(',', $tags),    //包括的標簽 'post__not_in' => explode(',', $exclude_id),    //不包括當前文章 'caller_get_posts' => 1,   //排除返回的文章上方的置頂文章 'orderby' => 'rand',   //rand:隨機排序; 'posts_per_page' => $post_num   //顯示相關文章數量 ); query_posts($args); while( have_posts() ) { the_post(); ?> <li class="related_box"  > <div class="r_pic"> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"> <img src="<?php echo post_thumbnail_src(); ?>?imageView2/1/w/130/h/100/q/100" alt="<?php the_title(); ?>" class="thumbnail" /> </a>  </div> <div class="r_title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank" rel="bookmark"><?php the_title(); ?></a></div> </li> <?php $exclude_id .= ',' . $post->ID; $i ++; } wp_reset_query();}if ( $i < $post_num ) { $cats = ''; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ',';//為$cats賦值分類ID $args = array( 'category__in' => explode(',', $cats), 'post__not_in' => explode(',', $exclude_id), 'caller_get_posts' => 1, 'orderby' => 'rand',   //隨機排序 'posts_per_page' => $post_num - $i ); query_posts($args); while( have_posts() ) { the_post(); ?> <li class="related_box"  > <div class="r_pic"> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"> <img src="<?php echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" class="thumbnail" /> </a> </div> <div class="r_title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank" rel="bookmark"><?php the_title(); ?></a></div> </li> <?php $i++; } wp_reset_query();}if ( $i  == 0 )  echo '<div class="r_title">沒有相關文章!</div>';?></ul>當然，有些改動，是為了適應本站，大家可以結合著原文看。上面這么長一堆，實現了隨機的部分其實很簡單，重點在于第17行：'orderby' => 'rand',“orderby”是選擇排序的方式，先森寫的是“rand”，倡萌分享出來的是選擇“comment_date”。下面解釋一下“orderby”的所有參數：orderby=date 按發布日期排序orderby=modified 按修改時間排序orderby=ID 按文章ID排序orderby=comment_count 按評論最多排序orderby=title 按標題排序orderby=rand 隨機排序所以這里選擇“rand”就能滿足先森的要求了。更改后到文章中一刷新，看到果然不一樣了：變為隨機顯示的相關文章以上就是先森摸索的過程，希望能夠給大家提供一個參考。

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>

WP Super cache緩存插件先森很早以前就安裝了，但是一直沒有好好研究。安裝之后也就打開了緩存，就沒怎么管過這個插件了。今天有空，就來鼓搗鼓搗。參考了一些博客，就開始研究了，為什么要啟用緩存插件，先森就不做累述了，大家可以自己去看看：知更鳥：WP Super Cache靜態緩存插件簡明使用教程免費資源部落：WordPress加速緩存插件WP Super cache安裝方法及使用技巧當然，鼓搗插件，首先是要認識插件。安裝成功后，進入設置界面：WP Super cache插件設置界面第一個設置界面沒有什么內容，這里可以啟用和關閉緩存功能。我們安裝WP Super cache就是為了緩存的，當然選擇啟用。下面的緩存測試先森并不知道是干嘛的，只是看到測試之后顯示的OK就沒管了：緩存測試OK測試緩存底下的刪除緩存不用說，都知道是干嘛用的。WP Super cache插件重要需要設置的，還是高級設置部分：WP Super cache插件高級設置通過研究各位WordPress大神們發的文章，發現上面紅框內的三項，好像是都要勾選的，思考了一下，也就跟著開啟了。設置之后點擊更新，會提示你點擊“更新 Mod_Rewrite 規則”按鈕，向下滾動找到該按鈕并點擊。插件會自動向Wordpress根目錄的wp-config.php和.htaccess文件寫入相關規則。當然，也會同時向默認緩存目錄的中.htaccess寫入規則。這時就要保證wp-content目錄、Wordpress根目錄的wp-config.php和.htaccess文件都有寫入權限。更新Mod_Rewrite規則在高級設置中，下面還有兩個大類：雜項和高級。思前想后的勾選了一些選項，給大家一些參考：WP Super cache插件雜項和高級再下面還有一些禁止緩存等設置，一看就懂，也就不貼圖了。在這次的折騰中，還有一個比較重要的設置，就是預緩存設置。按照先森的理解，預緩存沒有開啟的情況，是當有人訪問某篇文章/頁面時，會對這篇文章/頁面生成緩存頁面，在你設置的有效期內該緩存頁面都會存在。而開啟之后，插件會根據設置，將所有文章、標簽、歸檔頁全都緩存一遍，還可以設置多長時間重新緩存一遍。先森覺得標簽頁什么的無需緩存，因為經常會新增文章，緩存起來比較麻煩，所有就沒有勾選。至于多長時間重新緩存一次，先森還在考慮，所以暫時還沒有設置。下面是先森的設置情況：WP Super cache插件預緩存功能至于后面的插件兼容、調試什么的，作為普通的所謂開發者，用到的比較少，所以也就沒多做了解啦。本文是先森鼓搗WP Super cache插件的一個記錄，有什么錯誤還希望有人能夠提出來，也是幫我進步了。

最近開始工作了，但是工作目前比較閑，所以又開始研究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(); ?>" />本文就算是對今天的鼓搗做一個記錄，若能幫到大家那也是極好的。

本站的建立時間并不長，但兀然回頭，自2015年6月19日備案成功，卻也有近4個月的時間了。但網站運營到現在，可以說已經達到了當初的目標，卻也正是達到了我的目標，故出現了一些難免的問題。學習階段在成都航院計算機工程系，學到了一些HTML網頁知識，比較感興趣，進而又通過老師接觸到了WordPress，使我真正能做出一個完整的網站。當時正值計算機系官方網站改版，最終的官網，老師比較滿意，但我從我的審美來看就非常不滿意了，所以當時吐出豪言：我要用自己做的網站干掉官網！早在2015年4月，本站靜態的網頁已經出現，是我們的網頁制作實訓周的任務——制作系部官網。我與班長一組，通過徹夜奮戰，將網頁敲定，制作出了三種頁面：首頁、目錄歸檔頁、文章頁，也就是三級頁面。當然，最花時間的是確定首頁樣式。接觸WordPress后，我就開始將HTML網頁改造成WordPress主題，十多個版本，從圖片地址的代碼都不知道怎么寫，一個個難題攻破，最終完成當前網站的主題。主題做的差不多，就在免費主機上開始投放，甚至還拿給系部領導看，雖然得到了領導的贊揚，然而官網改版已經到達收尾階段，我的網站也并沒有得到重視。當然，除了我自己，也并沒有誰會重視。故而，我吐出了那樣的豪言，干掉官網。運營階段而促使我走上投入資金、運營網站的推動助手，是阿里云提供的免費虛擬主機。免費2年的虛擬主機，讓我這個在免費主機不斷宕機中的學生黨站長，動心了。使用過免費域名、免費主機，讓我規劃起來還算得心應手，首先要敲定的就是域名。最終我盯住了capjsj.cn這個域名。cap是我校的英文簡稱，也就是學校官網www.cap.edu.cn中的那個；jsj就簡單了，不是高大上的英語，而是“計算機”的拼音簡寫；當時在萬網，cn域名首年29元，com卻要39元，學生黨省錢，且學校用的教育域名也是cn的基礎之上的，所以最終敲定capjsj.cn的域名。域名購買之后，阿里云免費虛擬主機需要備案后的域名才可接入，所以緊接著就是備案。6月19日，備案成功，當時收到短信和郵件，使我欣喜若狂。當即就全身心的投入到網站之中，拉開了網站運營的帷幕。出現問題運營了近4個月，漸漸的，網站每天也有了一定的訪問量，在師生之中也有了一些名氣。甚至有一次，系上有兩位老師提醒我，網站上有篇文章標題有一個錯字。但不可能事事皆順，運營到現在，也必須正視一個問題了。本站現在的名字是成都航院計算工程系，與官網的名字并無二異。雖然天朝山寨盛行，但也都默默的做著不違反法律的擦邊球之事，不能完全的照搬。而本站在這一點，犯忌了。正如古代，君臣之間，最忌功高震主，而本站的目標，竟然就是為了震主。身為個人網站，代表的是個人主觀意見。而個人網站使用成都航院計算機工程系這個名稱，網站排名更在官網之前，難免有些誤導，其中文字更是難免不妥，這就對我們計算機工程系帶來了一些不良的影響，這也不是我想要見到了。是故，老師才會找我提意見，另我起了整改之心。且，2015年10月17日是成都航空職業技術學院50周年校慶，學校相當重視，邀請了諸多校友。計算機系成立13年，積累起來的校友也是很多的，搜索之后，誤入我的網站，難免不妥。因此，我才感到糾結，網站整改的方式最直接的，就是改名字。但這就意味著，好不容易達到第一的“成都航院計算機工程系”就功虧一簣，以往的積累就此推翻，需重頭再來。雖然很多人對此不屑一顧，但這終究是我的成果，苦樂自知。不怕重頭再來，但更名并非易事。所以，糾結。近期，本站將會進行大范圍的整改，我的成都航院計算機工程系將成為過去式。

起因：最近流量不夠用了，所以就開始使用七牛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”鍵放至最大）：這樣，就只有一個文件被排除在外了。好了，大家去試試吧，有任何疑問可在底部討論區提出。

雖然關于萬網的虛擬主機無法使用SMTP發郵件的解決方法，已經有很多站長分享過了，但是我還是覺得應該再分享一下，讓自己的網站更有用一些。大多數虛擬主機如萬網等都禁用了WordPress默認使用的PHP mail()發信函數，那么唯一的選擇就是SMTP發信了，當然SMTP發信的好處是基本不會被郵件服務商歸類為垃圾郵件（這里提一下，阿里云還是容易將評論回復提醒的郵件標記為垃圾郵件，導致郵件無法正常發出，解決辦法就是將阿里云退信的附件.eml文件，通過提交工單，讓阿里程序員解決，之后就不會再標記為垃圾郵件了。）。由于stream_socket_client函數同樣被禁用，導致無法通過WordPress的SMTP接口發信，只能通過fsockopen函數來發信了。首先，要將主機的fsockopen函數開啟：然后，打開wp-includes/class-smtp.php文件，大約202行找到：$this->smtp_conn = @stream_socket_client(             $host . ":" . $port,             $errno,             $errstr,             $timeout,             STREAM_CLIENT_CONNECT,             $socket_context         );將上述代碼改為以下代碼：/* 屏蔽默認的發送郵件方式        $this->smtp_conn = @stream_socket_client(             $host . ":" . $port,             $errno,             $errstr,             $timeout,             STREAM_CLIENT_CONNECT,             $socket_context         );   *///fsockopen方式$this->smtp_conn = fsockopen($host, $port, $errno, $errstr);如此，就可以使用SMTP插件發送郵件，注意的是盡量選擇SSL加密發信方式。PS：WordPress 4.3官方版本好像已經修改了以上代碼，使得不用再去進行上面的步驟了。現在4.3版本中，代碼已經變成了以下內容：if ($streamok) {            $socket_context = stream_context_create($options);            //Suppress errors; connection failures are handled at a higher level            $this->smtp_conn = @stream_socket_client(                $host . ":" . $port,                $errno,                $errstr,                $timeout,                STREAM_CLIENT_CONNECT,                $socket_context            );        } else {            //Fall back to fsockopen which should work in more places, but is missing some features            $this->edebug(                "Connection: stream_socket_client not available, falling back to fsockopen",                self::DEBUG_CONNECTION            );            $this->smtp_conn = fsockopen(                $host,                $port,                $errno,                $errstr,                $timeout            );        }

初入建站的站長們最關心的就是百度收錄了自己網站多少條網頁，新發布的文章有沒有被收錄，而一個一個的去查又非常麻煩。而且新站的網頁被收錄后還有一段考核期，考核期內網站被放在沙盒內，你用標題搜都搜不到自己的網頁。所以，文章頁直接添加一個查詢該文章是否被百度收錄的功能就尤為重要了。先來看下效果（點擊放大）：下面是部署方法①、編輯主題目錄的functions.php文件，在最后一個?>前新增如下代碼并保存：/** * WordPress 顯示百度是否收錄功能（自定義欄目優化版） * //www.cnidcc.cn * DIY By 成都航院計算機工程系**/function baidu_check($url){    global $wpdb;    $post_id = ( null === $post_id ) ? get_the_ID() : $post_id;    $baidu_record  = get_post_meta($post_id,'baidu_record',true);    if( $baidu_record != 1){        $url='http://www.baidu.com/s?wd='.$url;        $curl=curl_init();        curl_setopt($curl,CURLOPT_URL,$url);        curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);        $rs=curl_exec($curl);        curl_close($curl);        if(!strpos($rs,'沒有找到')){            if( $baidu_record == 0){                update_post_meta($post_id, 'baidu_record', 1);            } else {                add_post_meta($post_id, 'baidu_record', 1, true);            }                    return 1;        } else {            if( $baidu_record == false){                add_post_meta($post_id, 'baidu_record', 0, true);            }                return 0;        }    } else {       return 1;    }}function baidu_record() {    if(baidu_check(get_permalink()) == 1) {        echo '<a target="_blank" title="點擊查看" rel="external nofollow" href="http://www.baidu.com/s?wd='.get_the_title().'">百度已收錄</a>';   } else {        echo '<a style="color:red;" rel="external nofollow" title="點擊提交，謝謝您！" target="_blank" href="http://zhanzhang.baidu.com/sitesubmit/index?sitename='.get_permalink().'">百度未收錄</a>';   }}②、編輯文章模板(一般是single.php)，在合適的位置添加如下代碼并保存：<?php baidu_record(); ?>當然，細心的童鞋發現了，在展示圖前面有個像是百度的圖標，并且你們在本頁文章頂部并沒有看到百度收錄與否的文字，下面來解釋一下。先教大家添加百度圖標，這個很簡單。在調用的代碼<?php baidu_record(); ?>前，添加一個“i”標簽,具體如下：<i class="fa fa-paw"></i>添加完之后，在css樣式表中，定位到該“i”標簽，給其添加以下樣式即可：.fa-paw:before {  content: "\f1b0";}具體顏色、大小等樣式，大家可以它的“fa”類來控制。至于大家沒有看到的“百度已收錄”字樣，是因為我將代碼改成了登錄后才可見，所以大家看不到。對于有這方面需要的童鞋，我也將代碼貼出來。<?php if( is_single() && current_user_can( 'manage_options') ){?><span> <i class="fa fa-paw"></i> <?php baidu_record();?></span><?php }?>請大家根據自己的需求修改使用代碼，有任何疑問，歡迎在評論區提出。

出現問題今天登陸WordPress發現登陸不上，提示錯誤“Cookies因預料之外的輸出被阻止。要獲取幫助，請參見此文檔或訪問支持論壇。”可把我急壞了，網上說是主題損壞的問題，讓刪了重裝。經測試，手機可以登陸。我的手機和電腦實行的是不同主題。這就讓我真的有點相信是主題的問題了，但是我想了想，主題已經用了這么久，怎么會突然就有問題了呢？解決方法抱著這個疑問我繼續在網上搜索答案。萬能的百度果然沒讓人失望，搜到了一個方法，一試，成功登陸！方法如下：登陸萬網主機管理平臺，選擇【高級環境設置】->點擊【PHP.ini設置】->啟用【輸出緩沖區數據塊設置】。設置完點擊【保存設置】，OK，登陸成功，杠杠的！