關于七牛云儲存的好，各位站長都有所了解。以前先森不怎么重視的七牛縮略圖裁剪、為圖片增加水印等功能，先森也開始重視起來了。經過七牛裁剪之后的效果顯而易見，圖片體積小了，網頁打開速度也就快了。當然，成航先森的網站訪問量較小，還不存在服務器壓力過大等問題。總之，七牛能為我們減少很多問題。前段時間，先森鼓搗出了怎么讓百度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！

關于給文章點贊的功能，先森一直用的是WP-Zan插件。不知道其他使用該插件的網站是否出現了和先森一樣的情況：點贊的那個圖標字體的上半截一直是被擋住了的狀態。WP-Zan插件圖標字體顯示不正確這讓先森很郁悶，最初還以為是CSS的設置問題。但是先森鼓搗了半天，發現通過CSS無法修復該問題。后來看別的網站的圖標是正確的，就直接把字體代碼復制過來，結果發現這樣沒有顯示。然后發現，是別的網站使用的圖標字體和WP-Zan插件的不一樣。發現字體不一樣先森才想到，是不是插件自己的字體有問題？趕緊從服務器把插件的字體文件下載下來。路徑很簡單，就是/wp-content/plugins/wp-zan/static/fonts里面。下載下來，打開一看，果然有問題。這里先森用了字體編輯軟件FontCreator_CHS_7.5，非常好用，但是需要破解。先森記得之前是破解了的，不知道怎么回事現在又失效了，導致先森保存一次之后就不能保存了。有興趣的可以去百度下載：FontCreator_CHS_7.5先森打開的是ttf文件，進行編輯。打開就發現了問題所在：WP-Zan插件的問題原因點擊上圖可以放大。放大后可以看到，兩個圖標都有一點點被擋住了，這一點點，就是導致問題出現的原因。選中其中一個右鍵-“編輯”，即可進入編輯界面：FontCreator_CHS_7.5字體編輯圈選整個圖標，將其整體往下移動，在最終顯示上面讓其不被擋著即可。當然，最好還是居中。FontCreator_CHS_7.5-調整-保存這個保存，只能保存出otf和wotf格式的字體文件，而插件中需要的，是.ttf .woff .eot .svg四中文件，這時候就可以使用一個國外的字體在線轉換網站了：字體在線轉換點擊上面的選擇文件，選好文件點擊下面的“CONVERT & DOWNLOAD”,點擊之后可能需要等10秒鐘，就會跳出一個下載對話框。下載的壓縮包內，就是已經轉換好了的4個文件。字體在線轉化：FONT2WEB接下來只需要將這4個文件上傳到服務器，替換原文件即可了。修改后的效果 ↓↓↓ 點擊下方查看

前幾天先森收到了在張戈博客上評論張哥給先森的回復，看到張哥的提醒郵件，先森頓時覺得自己在用的郵件提醒模板實在是丑爆了！張戈博客郵件提醒先森現在用的郵件提醒，是很早以前淘的模板，并且也在本站分享過：WordPress評論回復郵件提醒-簡單模板看了張哥的郵件提醒后，先森決定修改下這個模板。雖然先森的網站從來就沒有什么評論，但是好歹也要把功能準備好，對不對？！暫時就直接按照張哥的CSS樣式來改，相信以張哥樂于分享的偉大精神，是不會怪罪先森的。。。。。。。鼓搗10分鐘。。。好了，直接貼出整個為WordPress增加郵件提醒的代碼：/*  *有人回復時發郵件給我 *//www.cnidcc.cn/xgmh_wpplhfyjtxdjdmb.html */function comment_mail_notify($comment_id) {  $admin_notify = '1'; // admin 要不要收回復通知 ( '1'=要 ; '0'=不要 )  $admin_email = get_bloginfo ('admin_email'); // $admin_email 可改為你指定的 e-mail.  $comment = get_comment($comment_id);  $comment_author_email = trim($comment->comment_author_email);  $parent_id = $comment->comment_parent ? $comment->comment_parent : '';  global $wpdb;  if ($wpdb->query("Describe {$wpdb->comments} comment_mail_notify") == '')    $wpdb->query("ALTER TABLE {$wpdb->comments} ADD COLUMN comment_mail_notify TINYINT NOT NULL DEFAULT 0;");  if (($comment_author_email != $admin_email && isset($_POST['comment_mail_notify'])) || ($comment_author_email == $admin_email && $admin_notify == '1'))    $wpdb->query("UPDATE {$wpdb->comments} SET comment_mail_notify='1' WHERE comment_ID='$comment_id'");  $notify = $parent_id ? get_comment($parent_id)->comment_mail_notify : '0';  $spam_confirmed = $comment->comment_approved;  if ($parent_id != '' && $spam_confirmed != 'spam' && $notify == '1') {    $wp_email = 'no-reply@' . preg_replace('#^www\.#', '', strtolower($_SERVER['SERVER_NAME'])); // e-mail 發出點, no-reply 可改為可用的 e-mail.    $to = trim(get_comment($parent_id)->comment_author_email);    $subject = '您在 [' . get_option("blogname") . '] 的留言有了回復';    $message = '    <div style="background:#fff;padding-bottom:20px;zoom:1;position:relative;z-index:1;" class="qm_bigsize qm_converstaion_body body qmbox"><style type="text/css">.qmbox blockquote{width: 94%;color: #8b8b8b;margin: 0 auto;padding: 10px;clear: both;border: 1px solid #ebebeb;}.qmbox style, .qmbox script, .qmbox head, .qmbox link, .qmbox meta {display: none !important;}a{color: #0088cc; }</style><table cellpadding="0" cellspacing="0" style="font-family: 微軟雅黑,verdana, arial; margin: 0 auto; width: 100%;"> <tbody> <tr> <td style="background: #08c; color: #fff; font-family: 微軟雅黑,verdana, arial; font-size:15px;line-height: 35px;"><strong>&nbsp; 您在成航先森的留言有了新的回復：</strong></td> </tr> <tr> <td style="border: solid 1px #ccc; font-size: 13px; line-height: 180%; padding: 20px;"> <span style="color: rgb(186, 76, 50); font-family:微軟雅黑, verdana, arial; line-height: 23.3999996185303px;">' . trim(get_comment($parent_id)->comment_author) . '</span>(您在本站設置的昵稱), 您好!            <p>您曾在<span style="color:#ba4c32;">《' . get_the_title($comment->comment_post_ID) . '》</span>的留言:</p> <blockquote><p>'. trim(get_comment($parent_id)->comment_content) . '</p></blockquote> <p>有了<span style="color:#ba4c32;">' . trim($comment->comment_author) . ' </span>給您的回復:</p> <blockquote><p>'. trim($comment->comment_content) . '</p></blockquote> <p style="padding: 5px;">您可點擊 <a href="' . htmlspecialchars(get_comment_link($parent_id)) . '" target="_blank">查看回應完整內容</a></p> <p style="padding: 5px;">歡迎再次光臨 <a href="' . get_option('home') . '" target="_blank"  title="成都航院計算機系一個學生的個人網站">' . get_option('blogname') . '</a>！</p> <p style="color:#999">(此郵件由系統自動發出，請勿回復.)</p> </td> </tr> <tr> <td style="color: rgb(255, 255, 255); font-size: 12px; line-height: 21.6000003814697px; padding: 10px; background: rgb(51, 51, 51);">請注意：此郵件由&nbsp;<a href="' . get_option('home') . '" target="_blank"  title="成都航院計算機系一個學生的個人網站">' . get_option('blogname') . '</a>&nbsp;自動發送，請勿直接回復。<br> 如果此郵件不是您請求的，請忽略并刪除！</td> </tr> </tbody></table></div>';    $from = "From: \"" . get_option('blogname') . "\" <$wp_email>";    $headers = "$from\nContent-Type: text/html; charset=" . get_option('blog_charset') . "\n";    wp_mail( $to, $subject, $message, $headers );    //echo 'mail to ', $to, '<br/> ' , $subject, $message; // for testing  }}add_action('comment_post', 'comment_mail_notify');上面的代碼放置于主題的 functions.php 文件中即可。最終顯示的效果，直接預覽的效果圖如下：仿制張戈博客郵件提醒效果圖當然，顯示只是給大家做個示范，網友們的郵件提醒是一個比一個提醒，只是顯示的見識有點短，有好看的誰能發給先森看看呢？心里默念三遍：張哥不要打我~ 張哥不要打我~ 張哥不要打我~ 雅美蝶~

先森在之前的文章頁談到過，先森想要將七牛云儲存、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年9月21日發布了新的WordPress主動提交插件，當初先森也高興的發布了一篇報導：百度推出新的WordPress鏈接提交插件然而，安裝之后并沒有提交成功過，進而反復的折騰。最后使用了張戈博客對Baidu-links-submit插件的優化版，但是還是沒有成功。后來工作了，沒時間折騰了，也就放下了。提交量一致顯示為0后來閑暇之余又逛了下張戈博客，在還是那篇文章，在評論區看到了一位站長提出的插件BUG，所以就嘗試了一下，沒想到成功解決，下面就為大家介紹下解決方法。發現問題首先，不知道有多少和先森一樣的小白站長，不怎么習慣去看日志文件，無論是服務器的日志文件，還是插件的。百度Baidu-links-submit插件設置里面，有個勾選框，勾選后就會生成日志文件。當然，百度也提醒了“如果你的插件目錄有讀寫權限和，你可以打開日志功能的，如果你沒有讀和寫權限，你必須關閉日志功能。”Baidu-Links-Submit設置勾選Log日志文件，就是用來查找問題原因的。查看日志有兩種方法。第一種，通過FTP連接服務器，打開wp-content/plugins/baidu-links-submit/log目錄，里面有個submits.log，下載到本地查看。服務器下載查看日志文件第二種方法更加方便快捷，直接瀏覽器打開：http://你的域名/wp-content/plugins/baidu-links-submit/log/submits.log 當然，不論哪種方法都是為了查看日志。先森的日志打開后，顯示的如下內容：日志文件打開后的內容打開后可以看到，上圖紅框標注了兩個地方，一個是顯示錯誤“error:Empty reply from server”，翻譯過來為：錯誤：從服務器的空答復。這是當請求服務器時但服務器沒給出回復時返回的錯誤。再看上圖后面紅框標注的地方，這種正則去掉反斜杠“\”后，就看到鏈接會變成“http://data.zz.baidu.com//urls?...”，也就是會多出一個斜杠。雖然張戈說linux主機上雙斜杠一般沒有問題，所以他沒有修改這個系統錯誤。但我們既然出了問題，那就說明主機不能識別雙斜杠，覺得自己修改了。知道了問題所在，那就好解決了。修復問題既然知道是生成了雙斜杠，那么我們在插件代碼中，刪除一個斜杠產生就好了。在WordPress后臺點擊插件-> Baidu-links-submit ->編輯，選擇common.class.php，大概在中間的位置，找到'/urls?site=',如圖：找到‘/urls?site=’代碼段找到之后，操作很簡單，刪除urls前面的“/”即可，刪除后點擊更新文件。有任何疑問，歡迎在下方評論區提出，也歡迎在頁面頂部右方關注我的微博（@成航先森）。

接觸WordPress以來，經常在各路大神的網站上學習經驗，無意間在張戈博客逛的時候看到，張戈博客跳轉到外鏈時，有個感覺非常舒服的跳轉頁面：通過一番尋找，發現張戈也將教程為大家分享了。因為是針對外鏈，所以還需要在function.php中添加代碼。但是先森嘗試后感覺已經發布的文章中的內頁好像并不會被自動添加外鏈，所以就放棄使用張戈提供的外鏈跳轉代碼。但是又不想放棄，所以就想將張戈的跳轉頁面與anylink插件生成的跳轉鏈接相結合。anylink插件這是dudo博客原創的第一個WordPress插件：Anylink。它是一個鏈接包裝和美化插件，可以把外鏈轉換成內鏈，同時又能防止網站權重過度向外傳遞，對于網站SEO來說很有好處。Anylink既提供了307、301等跳轉方式，這和你直接使用外鏈沒有任何區別；也提供了Javascript跳轉方式，這則可以阻止權重對外傳遞。同時Anylink還可允許你自定義鏈接樣式等功能，可以滿足大部分wordpress網站的需要。Anylink外鏈包裝美化插件是一款自動將外鏈轉換為內鏈、將較長、較復雜的外鏈轉換為樣式統一的內鏈的Wordpress插件。同時它還提供了鏈接自定義功能，允許你根據個人喜好設置鏈接的樣式。例如我們的網站有時候會需要插進一些鏈接如成都航院計算機工程系的官網http://www.cap.edu.cn/campus/xywmbys/jsjgcx/，這樣的鏈接既長又沒有意義，anylink就是針對這種情況設計的一款插件，它會幫你轉換成 http://你的域名/goto/ab12 的形式，從而使鏈接變得短小整齊。主要功能有：1. 自動提取外鏈內轉換。Anylink會自動提取文章中的外鏈并進行轉換，不需要進行額外操作。2. 不修改任何原始數據。Anylink不會修改任何wordpress數據，這很好地保護了你的數據安全。任何情況下刪除該插件均不會留下痕跡。3. 允許自定義鏈接樣式。默認情況下轉換后的鏈接樣式為 http://你的域名/goto/ab12 的形式，你可修改跳轉目錄，把goto修改為任何可用形式。4. 允許自定義slug樣式。slug是指鏈接后面的小尾巴，你可修改它的樣式，如它的長度、組成等等，默認為4位的數字和字母組合。5. 通話自定義跳轉樣式。默認情況下使用了301永久轉移跳轉http狀態碼，這和你們直接使用一個鏈接是沒有任何區別的，也就是說anylink此種情況下只是修改了鏈接的樣式，其它的均未作修改，比如SEO信息等。不過你可以設置為307、Javascript等等形式。插件改造經過張戈博客的教程中（地址：分享兩種外鏈跳轉方法，可避免權重流失）提出了兩中外鏈美化方式。第一種是：http://www.***.com/go.php?http://www.******.com 的方式；第二種是：http://www.***.com/go/?url=http://www.***.com/ 的方式。通過上面對anylink插件的介紹，大家應該知道，anylin轉換后的鏈接默認為 http://你的域名/goto/ab12 的方式，所以我覺得張戈博客的第二種美化方式比較適合。根據教程說的，我在網站根目錄建了一個/goto/目錄，并上傳了一個index.php文件進去。index.php的內容大致都是張戈分享的go.php的代碼，只是將之前的外鏈獲取方式改成了獲取后四位字母的方式，也就是獲取goto/后面生成的小尾巴。不會用正則，所以獲取小尾巴的代碼花了先森很長時間，但是最后鼓搗出來之后發現，這樣的方式點擊外鏈后還是會直接跳轉過去（先森使用的是307跳轉），所以并沒有什么卵用。然而在先森快要放棄的時候，發現了轉機。為anylink外鏈添加跳轉頁面先森在研究張戈的代碼無果后，轉而研究插件本身，在插件的設置中，嘗試著使用了JavaScript跳轉，一看，這就不是跳轉頁面嗎!下面是正式教程。打開插件文件夾中的re.php文件，文件中的代碼是：<!DOCTYPE html><html><head><script type="text/javascript">    setInterval( function(){top.location = "<?php echo $gotoLink ?>";} , 3000)</script></head><body>正在為您跳轉到(Now we're relocating you to)：<?php echo $gotoLink; ?></body></html>代碼非常簡單，但這就是anylink的跳轉頁面。再來看張戈提供的go.php跳轉頁面代碼：<?php //$t_url=$_GET['url']; //此代碼無法支持帶請求參數的目的地址，已棄用！$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]); //這個支持if(!empty($t_url)) {    preg_match('/(http|https):\/\//',$t_url,$matches); if($matches){     $url=$t_url;     $title='頁面加載中,請稍候...'; } else {     preg_match('/\./i',$t_url,$matche);     if($matche){         $url='http://'.$t_url;         $title='頁面加載中,請稍候...';     } else {         $url='https://zhangge.net/';         $title='參數錯誤，正在返回首頁...';     } }} else {    $title='參數缺失，正在返回首頁...';    $url='https://zhangge.net/';}?><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"><title><?php echo $title;?></title><style>body{background:#000}.loading{-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-o-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.spinner-wrapper{position:absolute;top:0;left:0;z-index:300;height:100%;min-width:100%;min-height:100%;background:rgba(255,255,255,0.93)}.spinner-text{position:absolute;top:50%;left:50%;margin-left:-90px;margin-top: 2px;color:#BBB;letter-spacing:1px;font-weight:700;font-size:36px;font-family:Arial}.spinner{position:absolute;top:50%;left:50%;display:block;margin-left:-160px;width:1px;height:1px;border:25px solid rgba(100,100,100,0.2);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(720deg) scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg) scale(1)}50%{-moz-transform:rotate(720deg) scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg) scale(1)}50%{-o-transform:rotate(720deg) scale(0.6)}}@keyframes spin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(720deg) scale(0.6)}}</style></head><body><div class="loading">  <div class="spinner-wrapper">    <span class="spinner-text">頁面加載中,請稍候...</span>    <span class="spinner"></span>  </div></div></body></html>修改起來也很簡單，re.php文件中的代碼基本沒用，只需要將其中的"$gotoLink"轉嫁到張戈的go.php代碼中即可，將以下代碼放進re.php：<?php   $url = $gotoLink;?><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"><title>頁面加載中,請稍候..</title><style>body{background:#000}.loading{-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-o-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.spinner-wrapper{position:absolute;top:0;left:0;z-index:300;height:100%;min-width:100%;min-height:100%;background:rgba(255,255,255,0.93)}.spinner-text{position:absolute;top:50%;left:50%;margin-left:-90px;margin-top: 2px;color:#BBB;letter-spacing:1px;font-weight:700;font-size:36px;font-family:Arial}.spinner{position:absolute;top:50%;left:50%;display:block;margin-left:-160px;width:1px;height:1px;border:25px solid rgba(100,100,100,0.2);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(720deg) scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg) scale(1)}50%{-moz-transform:rotate(720deg) scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg) scale(1)}50%{-o-transform:rotate(720deg) scale(0.6)}}@keyframes spin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(720deg) scale(0.6)}}</style></head><body><div class="loading">  <div class="spinner-wrapper">    <span class="spinner-text">頁面加載中,請稍候...</span>    <span class="spinner"></span>  </div></div></body></html>總結：1.跳轉方式選擇JavaScript跳轉；2.修改re.php文件。下面來看看效果，外鏈到先森的微博：@成航先森 (希望能關注一下，謝謝)