首先說明，telnet登錄服務(wù)器是一種不安全的遠程登錄方式。先森之所以會需要telnet登錄服務(wù)器，是因為有時候需要對OpenSSH進行配置修改、漏洞修復(fù)、升級等操作時，需要telnet作為保險，以免誤操作導(dǎo)致無法登錄服務(wù)器。基礎(chǔ)先科普一點基礎(chǔ)。telnet：是telnet的客戶端，除了Linux可以安裝外，Windows默認也是安裝了的（先森是win7系統(tǒng)，win7以下的不知道是否自帶）。telnet通常還可以檢測服務(wù)器端口是否開啟。telnet-server：這才是可以開啟遠程登錄的服務(wù)端軟件。部署系統(tǒng)：CentOS 6.8 x641.直接yum安裝telnet-server：yum install -y telnet-server2.守護進程。telnet需要依賴超級守護進程xinetd啟動，若為安裝還需要先安裝。yum install -y xinetd3.啟動telnet：chkconfig telnet onservice xinetd restart4.允許登錄：echo 'pts/0' >>/etc/securettyecho 'pts/1' >>/etc/securetty“/etc/securetty”文件允許你規(guī)定“root”用戶可以從那個TTY設(shè)備登錄。pts是pesudo tty slave，是偽終端的slave端。5.開啟防火墻端口。請先確保已經(jīng)關(guān)閉SElinux。在防火墻配置文件/etc/sysconfig/iptables中，復(fù)制22端口那行粘貼在其下面，開啟23端口，保存并重啟iptables。-A INPUT -m state --state NEW -m tcp -p tcp --dport 23 -j ACCEPTservice iptables restart登錄telnet登錄有很多方式：方式一：Xshell不登錄服務(wù)器，直接打開一個標簽，輸入telnet + IP即可。Xshell直接登錄方式二：服務(wù)器安裝telnet，也通過telnet + IP登錄。yum install -y telnettelnet 127.0.0.1    #技巧，可以本機測試方式三：通過Windows的CMD命令行登錄。WIN+R鍵輸入cmd，回車進入cmd命令行終端。也是輸入telnet + IP即可登錄。Windows登錄問題有時候登錄時，即使密碼輸入正確，也提醒login incorrect（登錄錯誤），如上圖。這種問題可能是telnet登錄的偽終端pts正好不在你寫的/etc/securetty里面。這時候可以在服務(wù)器端通過查看日志，確定使用的是哪個pts。tail -f /var/log/secure查看日志上圖可以看到，紅框中顯示“tty 'pts/2' is not secure(tty的'pts/2'是不安全的)”，所以只需要將'pts/2'加入到/etc/securetty即可。echo 'pts/2' >>/etc/securetty關(guān)閉論安全，還是OpenSSH更為安全，所以在對OpenSSH操作完后，一定記得關(guān)閉telnet與防火墻23端口。chkconfig telnet offservice xinetd restartsed -i '/23/ s/^/#/' /etc/sysconfig/iptablesservice iptables restart偷懶如果不想一步一步的操作安裝telnet-server的話，可以把下面的命令復(fù)制，到服務(wù)器上粘貼等待完成即可。也可以寫成腳本。yum install -y telnet-serverchkconfig telnet onecho 'pts/0' >>/etc/securettyecho 'pts/1' >>/etc/securettyservice xinetd restartsed -i 's/^-A\(.*\)22 \(.*\)/&\n-A\123 \2/' /etc/sysconfig/iptablesservice iptables restartiptables -L -n

先森用騰訊云搭建了一個“劉某某博客”，使用的是Begin主題，結(jié)果發(fā)現(xiàn)前臺的縮略圖有些無法打開，一個大叉叉在那，很不好看。圖片無法打開查看鏈接，是在圖片后面加了參數(shù)，目測是裁剪圖片寬高的。直接打開這個圖片鏈接，顯示以下錯誤：圖片錯誤The following error(s) occured:GD Library Error: imagecreatetruecolor does not exist - please contact your webhost and ask them to install the GD library英語不好，百度翻譯一看，什么GD庫錯誤，需要安裝GD庫。解決百度了一下什么是GD庫，知道了是和PHP有關(guān)的。最后一番搜索之后，找到了解決方法：yum install -y php-gdservice php-fpm restart也就是安裝php-gd，然后重啟PHP即可。php的配置倒是不需要修改了。

先森托女票的福，得到一枚騰訊云的服務(wù)器，在服務(wù)器上用的web服務(wù)器是nginx，結(jié)果在WordPress后臺上傳主題的時候直接報錯413，有點懵。百度了下解決辦法，這里做個記錄。解決辦法打開nginx主配置文件nginx.conf，一般在/usr/local/nginx/conf/nginx.conf這個位置，找到http{}段，修改或者添加client_max_body_size 2M;默認配置文件中沒有該字段，需要添加。記得分號一定要添加。nginx.conf添加字段平滑重新加載Nginx配置文件：./sbin/nginx -s reload

先森拿到了騰訊云的學(xué)生機，趕緊用nginx搭建好了WordPress的環(huán)境。今天試著導(dǎo)入WordPress的導(dǎo)出文件時，竟然遇到了“文件是空的。請上傳有內(nèi)容的文件。這個錯誤也有可能是因為您的php.ini禁止了上傳，或其中post_max_size的值小于upload_max_filesize的值。”的錯誤。文件是空的。請上傳有內(nèi)容...下面就說說解決過程。檢查錯誤提醒中也說了“可能是因為您的php.ini禁止了上傳，或其中post_max_size的值小于upload_max_filesize的值”，所以我們首先要將這三條配置檢查一下，做一個排除。如果能解決問題當(dāng)然好，不能的話也明確了錯誤目標。1.排除是否禁止了上傳php.ini的默認位置在/etc目錄下，編輯打開，查看是否禁用了上傳。file_uploads = On是否允許HTTP文件上傳。默認值為On允許HTTP文件上傳，若設(shè)置為Off當(dāng)然就不能上傳了。2.排除POST上傳大小設(shè)置post_max_size = 8Mpost 提交數(shù)據(jù)時的大小，默認值 8 MB，但你還可以增加它。此設(shè)置還會影響文件上傳。上傳大文件時，該值必須大于 upload_max_filesize。3.排除最大可上傳文件大小upload_max_filesize = 2M上傳文件時最大限制，默認值為2M。如果和先森一樣，剛安裝還沒有做什么修改，那上面的三樣應(yīng)該都是默認值，也就是問題不出在php.ini的配置上，那么接著往下看。DeBUG尋找錯誤原因先森也懶得去找php的錯誤日志了，直接開啟了php.ini中的錯誤提醒。將Off改為On則為開啟了。開啟后，則在屏幕上可以顯示錯誤display_errors = On修改配置之后，重啟php。service php-fpm restart這時候再重新上傳，就顯示出來了一條錯誤：Fatal error: Class 'DOMDocument' not found in /usr/local/nginx/html/wp-content/plugins/wordpress-importer/parsers.php on line 61致命錯誤：在wordpress的程序代碼中沒有發(fā)現(xiàn)“DOMDocument”類。雖然不清楚是什么意思，但是先打開文件，看看第61行是什么再說吧。$dom = new DOMDocument;好吧，還是不清楚是怎么回事。所以直接拿著錯誤提醒進行百度，強行看了兩篇英文貼找到了解決方法，原來是缺少php組件。yum安裝一下即可。yum install -y php-xml原來是無法識別xml文件，wordpress導(dǎo)出的文件就是xml格式的。安裝之后還需要重啟php:service php-fpm restart再次去WordPress后臺導(dǎo)入文章，則順利上傳了。

先森在實現(xiàn)博客自適應(yīng)的時候，關(guān)于標題和內(nèi)容的截取可謂是走了不少彎路，吃了不少虧，所以看到@boke112導(dǎo)航 做了一個分享，先森就轉(zhuǎn)過來作為筆記了。我們在制作（或DIY）WordPress主題的時候，特別是首頁和分類目錄頁，我們就有必要通過控制文章摘要內(nèi)容和標題的字數(shù)來讓整體布局更加合理和美觀，今天我們就跟大家分享五種方法完美截取WordPress文章摘要內(nèi)容和標題字數(shù)。標題和內(nèi)容截取方法一：使用WP內(nèi)置函數(shù)wp_trim_words()截取WordPress內(nèi)置的wp_trim_words()函數(shù)，專門用來截取限定字數(shù)的內(nèi)容，比如文章摘要、內(nèi)容、標題等。<?phpecho wp_trim_words( get_the_content(), 66 ); // 文章內(nèi)容echo wp_trim_words( get_the_excerpt(), 66 ); // 文章摘要echo wp_trim_words( get_the_title(), 30 ); // 文章標題?>wp_trim_words()函數(shù)默認用法：<?php $trimmed = wp_trim_words( $text, $num_words = 55, $more = null ); ?>參數(shù)說明：$text(字符串) (必需) 要截取的內(nèi)容，默認: 無；$num_words(整數(shù)) (可選) 限定的字數(shù)，默認: 55；$more(字符串) (可選) 截取后加在尾部的字符，默認: ‘&hellip;’示例說明：<?php$content = get_the_content();$trimmed_content = wp_trim_words( $content, 30, '<a href="'. get_permalink() .'"> ...閱讀更多</a>' );echo $trimmed_content;?>注：可以修改上面的數(shù)字30來設(shè)定長度。方法二：使用php函數(shù)mb_strimwidth()截取mb_strimwidth是超輕量級的php函數(shù)，用來獲取指定的寬度截斷字符串。mb_strimwidth()函數(shù)默認用法：mb_strimwidth  (  string $str  ,  int $start  ,  int $width  [,  string $trimmarker  [,  string $encoding  ]] )參數(shù)說明：$str //指定字符串$start //指定從何處開始截取$width //截取文字的寬度$trimmarker //超過$width數(shù)字后顯示的字符串示例說明：平時我們調(diào)用文章標題都是這樣：<?php the_title(); ?>現(xiàn)在我想控制標題的輸出字數(shù)，只需要使用mb_strimwidth函數(shù)后變成這樣：<?php echo mb_strimwidth(get_the_title(), 0, 30,"..."); ?>注：可以修改上面的數(shù)字30來設(shè)定長度。方法三：使用原生函數(shù)customTitle ()截取將下面的代碼添加到主題的functions.php文件最后一個 ?> 的前面：function customTitle($limit) {    $title = get_the_title($post->ID);    if(strlen($title) > $limit) {        $title = substr($title, 0, $limit) . '...';    }    echo $title;}然后在需要調(diào)用的地方添加下面的代碼即可：<?php customTitle(30); ?>注：可以修改上面的數(shù)字30來設(shè)定長度。方法四：使用自定義函數(shù)cut_str ()截取將下面的代碼添加到主題的functions.php文件最后一個 ?> 的前面：//標題截斷function cut_str($src_str,$cut_length){$return_str='';$i=0;$n=0;$str_length=strlen($src_str);        while (($n<$cut_length) && ($i<=$str_length))        {$tmp_str=substr($src_str,$i,1);$ascnum=ord($tmp_str);        if ($ascnum>=224){$return_str=$return_str.substr($src_str,$i,3); $i=$i+3; $n=$n+2;}        elseif ($ascnum>=192){$return_str=$return_str.substr($src_str,$i,2);$i=$i+2;$n=$n+2;}        elseif ($ascnum>=65 && $ascnum<=90){$return_str=$return_str.substr($src_str,$i,1);$i=$i+1;$n=$n+2;}        else {$return_str=$return_str.substr($src_str,$i,1);$i=$i+1;$n=$n+1;}    }    if ($i<$str_length){$return_str = $return_str . '...';}    if (get_post_status() == 'private'){ $return_str = $return_str . '（private）';}    return $return_str;};然后在需要調(diào)用的地方添加下面的代碼即可：<?php echo cut_str($post->post_title,30); ?>注：可以修改上面的數(shù)字30來設(shè)定長度。方法五：使用CSS代碼來“截取”其實這不是截取，而是隱藏了溢出的字符。我們可以在主題CSS文件style.css中對標題所在的選擇器 id 或 class 添加下面的樣式：.post-title{width:250px; /* 限制寬度（可選） */whitewhite-space:nowrap; /* 禁止自動換行 */word-break:keep-all;/* 這個也是禁止自動，二選一即可 */overflow:hidden; /* 隱藏溢出的內(nèi)容 */text-overflow:ellipsis; /* 溢出文本使用...代替 */}總結(jié)文中分享的五種方法都可以實現(xiàn)自動截取WordPress文章的內(nèi)容、摘要和標題字數(shù)，至于那個方法比較好用就是仁者見仁智者見智了，boke112在使用的過程中都是結(jié)合幾種方法來使用的，比如同時使用方法二、四、五，有些地方可能是用方法二，有些地方可能是用方法五，關(guān)鍵還是看自己喜歡吧。

昨天晚上，也就是2016年8月31日晚，360社區(qū)發(fā)布了“網(wǎng)站衛(wèi)士前端公共庫停止運行公告”，宣布從即日起網(wǎng)站衛(wèi)士前端公共庫停止提供服務(wù)。也就是說，我們后臺的Google字體就不能替換成360公共庫的了。網(wǎng)站衛(wèi)士前端公共庫停止運行公告公告內(nèi)容如下：感謝您一直以來給予網(wǎng)站衛(wèi)士前端公共庫的支持與厚愛！由于我們業(yè)務(wù)發(fā)展方向上的調(diào)整，經(jīng)過網(wǎng)站衛(wèi)士團隊的考量協(xié)商，我們懷著萬分遺憾的心情宣布網(wǎng)站衛(wèi)士前端公共庫從即日起停止提供服務(wù)。已經(jīng)使用網(wǎng)站衛(wèi)士前端公共庫的網(wǎng)站，需要將“常用前端公共庫”所調(diào)用的資源轉(zhuǎn)移至您的網(wǎng)站本地存儲，我們的網(wǎng)站衛(wèi)士服務(wù)將繼續(xù)給您提供緩存加速服務(wù)。使用網(wǎng)站衛(wèi)士“Google公共庫”或者“Google字體庫”的網(wǎng)站，請?zhí)鎿Q我們的URL，直接調(diào)用谷歌官網(wǎng)URL即可。我們會繼續(xù)努力，為網(wǎng)站衛(wèi)士的用戶免費提供更優(yōu)秀的網(wǎng)站安全防護與加速服務(wù)！                                                                                                                  網(wǎng)站衛(wèi)士團隊2016年8月31日解決方案那么，在沒有360前端公共庫的支持后，我們該怎么為WordPress后臺的google字體加速呢？幸運的是，先森在小伙伴@第9頁的提醒下，找到了由中國科學(xué)技術(shù)大學(xué)提供的谷歌字體加速，網(wǎng)絡(luò)的線路為教育網(wǎng)、電信、移動 三線接入。對應(yīng)關(guān)系：fonts.googleapis.com        fonts.lug.ustc.edu.cnajax.googleapis.com        ajax.lug.ustc.edu.cnthemes.googleusercontent.com    google-themes.lug.ustc.edu.cnfonts.gstatic.com         fonts-gstatic.lug.ustc.edu.cn好了，拿到了可以支持google字體加速的鏈接，接下來該修改下我們的WordPress主題了。在主題的functions.php添加以下內(nèi)容，代碼來自WordPress大學(xué)，稍有修改：/** * 360網(wǎng)站衛(wèi)士前端公共庫停止運行后的google字體加速解決方案 * //www.cnidcc.cn/360_to_ustc.html */function wpdx_replace_open_sans() {  wp_deregister_style('open-sans');  wp_register_style( 'open-sans', '//fonts.lug.ustc.edu.cn/css?family=Open+Sans:300italic,400italic,600italic,300,400,600' );  if(is_admin()) wp_enqueue_style( 'open-sans');}add_action( 'init', 'wpdx_replace_open_sans' );至于修改之后的速度呢，那是杠杠的。先森測試，僅用34ms即響應(yīng)。感謝中科大！

先森博客的首頁本來右側(cè)顯示的是熱門文章的，但是這些熱門文章來自瀏覽量，由于用的是WordPress大學(xué)看到的record_visitors訪問計數(shù)，先森又無法讓其顯示最近一個月內(nèi)訪問量最多的文章，所以“熱門文章”里的文章基本就沒有變動過，因此放在首頁也就沒有人看了。所以先森思來想去，還是將其換成了最新評論。最新評論經(jīng)常變動，效果應(yīng)該會好一些。最新評論是一個常用功能，WordPress大學(xué)和知更鳥都有分享，WordPress大學(xué)提供的方法是放在側(cè)邊欄的，且是2012年分享的代碼了，所以先森選擇了知更鳥2014年分享的“WordPress最近評論代碼”。先森使用了鳥叔提供的代碼后，等修改完CSS樣式之后才發(fā)現(xiàn)了一個重大的問題：每條評論的鏈接都是一樣的！調(diào)用的評論鏈接相同研究了半天，先森發(fā)現(xiàn)是代碼中g(shù)et_permalink的參數(shù)用錯了，修改過來就正常了。而在拍錯的過程中先森又發(fā)現(xiàn)了一種也比較好用的調(diào)用最新評論的方法，所以本文會分享兩種調(diào)用最新評論的方法。大家根據(jù)喜好選擇吧。兩種代碼方法第一種：第一種方法是根據(jù)鳥叔分享的代碼修改的，改正了鏈接調(diào)用的問題，實現(xiàn)了排除管理員評論，增加了鏈接的描述為評論的文章標題，以及更靈活的設(shè)置參數(shù)。第一步,將下面的代碼添加到您當(dāng)前的主題 functions.php 文件中/**調(diào)用最新評論*成航先森修改*//www.cnidcc.cn/newest_comments.html*/function newest_comments($no_comments, $comment_len, $avatar_size) { $comments_query = new WP_Comment_Query();    $comments = $comments_query->query( array( 'number' => $no_comments,'user_id'=>0) );    $comm = '';    if ( $comments ) : foreach ( $comments as $comment ) : $comm .= '<li><a class="author" href="' . get_permalink( $comment->comment_post_ID ) . '#comment-' . $comment->comment_post_ID . '">';        $comm .= get_avatar( $comment->comment_author_email, $avatar_size );        $comm .= '<strong>'.get_comment_author( $comment->comment_ID ) . ':</strong>';        $comm .= strip_tags( substr( apply_filters( 'get_comment_text', $comment->comment_content ), 0, $comment_len ) ) . '</a> </li>';    endforeach; else :        $comm .= '沒有評論';    endif;    echo $comm;}然后，在WordPress主題中想要調(diào)用的地方添加以下代碼：<div class="newest_comments"><h3>最新評論</h3><?php newest_comments(10,80,24); ?></div>上面newest_comments中的三個參數(shù)的意思是調(diào)用10篇文章，評論長度為80，Gravatar頭像大小為24px，可以根據(jù)實際情況靈活修改這三個參數(shù)。CSS樣式參考：.newest_comments li{overflow:hidden;width:99%;height:37px;border-top:1px dashed #dadada;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;line-height:37px}.newest_comments li:first-child{border:0 none}.newest_comments .avatar{float:left;margin:6px 8px 0 0;width:24px;height:24px}.newest_comments strong{padding-right:5px}第二種：第二種方法其實也來自鳥叔，是begin主題中扒出來的。第二種方法同樣可以排除管理員的評論，只是使用的方法與第一種方法不同。只需要在WordPress中想要顯示的地方添加以下代碼即可：<div class="newest_comments">        <h3>最新評論</h3>          <ul>           <?php $show_comments = 10; $my_email = get_bloginfo ('admin_email'); $i = 1; $comments = get_comments('number=200&status=approve&type=comment'); foreach ($comments as $my_comment) { if ($my_comment->comment_author_email != $my_email) { ?> <li <?php if ($i == $show_comments){echo 'style="border: none;';}?>> <a href="<?php echo get_permalink($my_comment->comment_post_ID); ?>#comment-<?php echo $my_comment->comment_ID; ?>" title="<?php echo get_the_title($my_comment->comment_post_ID); ?>" > <?php echo get_avatar($my_comment->comment_author_email,24); ?> <span class="comment_author"><strong><?php echo $my_comment->comment_author; ?></strong></span> <?php echo convert_smilies($my_comment->comment_content); ?> </a> </li> <?php if ($i == $show_comments) break; $i++; } } ?>       </ul> </div>第二種方法中，修改評論數(shù)量是在第5行，上面是10條評論。修改Gravatar頭像大小在第16行，上面是24px。至于CSS樣式，直接參考第一種的就可以了。

很早以前就在張戈博客那里看到了這么一個工具，當(dāng)時覺得沒有什么用，但后來才知道是自己不知道怎么用。工具的用途是工具的價值體現(xiàn)。在正確的地方，使用正確的工具，就顯得工具非常有實用價值。張哥發(fā)出這個工具是為了解決網(wǎng)站開啟CDN后，評論者的用戶信息不能被保存，每次都要重現(xiàn)填寫的困境。因為是站在了巨人的肩膀上，所以先森很方便的用cookie的方法解決了用戶信息不能被保存的問題，所以當(dāng)時對這個工具不是很在意。但是先森在參加培訓(xùn)的時候的電腦都有還原卡，到各個博客去評論的時候都需要重新填寫自己的信息，就算是復(fù)制粘貼也太麻煩了，所以就想起了這個工具。工具介紹這個工具很簡單，只需要將自己的昵稱、郵箱地址、站點信息在下面填寫好后，點擊生成代碼，即可得到一串屬于自己的代碼。一鍵填寫WordPress評論中用戶信息代碼生成工具使用然后將下面生成的鏈接拖到書簽欄即可保存書簽，使用的時候直接在需要填寫的頁面單擊該書簽即可。老版的瀏覽器可以右鍵鏈接保存為書簽，或者直接Ctrl+D打開一個新建書簽的頁面，自定義書簽名稱，將生成的代碼粘貼進網(wǎng)址欄即可。昵稱(必須)：郵箱地址(必須)：站點：拖拽下面的鏈接到您的書簽工具欄或者右鍵單擊鏈接把它添加到您的收藏夾中可創(chuàng)建一個快速填寫WP評論者信息的快捷方式。快速填寫WP評論信息工具源碼如果你也想要在你的博客中添加這樣一個工具，如果你也想弄一個這樣的工具，只需要將以下代碼粘貼到博客相應(yīng)頁面即可（TinyMCE編輯器需文本模式，UEditor編輯器需HTML模式）：<script type="text/javascript">(function($){ $(document).ready(function() { $('.code_result').hide(); $('#generate_code').click(function(){ var re = /^[0-9a-zA-Z]+([\.\-\_][0-9a-zA-Z]+)*@[0-9a-zA-Z]+([\.\-][0-9a-zA-Z]+)*.[a-zA-Z]+$/; if($('#commenter_author').val() == '') { $('#commenter_author').css('border', 'solid 1px #ff0000'); $('#commenter_author').focus(); } else if(!re.test($('#commenter_email').val())) { $('#commenter_email').css('border', 'solid 1px #ff0000'); $('#commenter_email').focus(); } else { var commenter_code = 'javascript:document.getElementById(\'author\').value = \''+$('#commenter_author').val()+'\'; document.getElementById(\'email\').value = \''+$('#commenter_email').val()+'\'; document.getElementById(\'url\').value = \''+$('#commenter_url').val()+'\'; void(0)'; $('#wp_commenter_code').html(commenter_code); $('.code_result>a').attr('href', commenter_code); $('.code_result').show(); } }); $('#cheon_code_generator input').keyup(function() { $(this).css('border', 'solid 1px #000000'); }); });})(jQuery);</script><div id="cheon_code_generator" style="padding:10px;"><p>昵稱(必須)：<br /><input type="text" value="" name="commenter_author" id="commenter_author" style="border:solid 1px #000;"></p><p>郵箱地址(必須)：<br /><input type="text" value="" name="commenter_email" id="commenter_email" style="border:solid 1px #000;"></p><p>站點：<br /><input type="text" value="" name="commenter_url" id="commenter_url" style="border:solid 1px #000;"></p><p><textarea cols="40" rows="10" name="wp_commenter_code" id="wp_commenter_code" style="border:solid 1px #000;"></textarea></p><p><input type="button" value="生成代碼" id="generate_code" style="cursor: pointer;border:solid 1px #000;"></p><p class="code_result" style="display:none;">拖拽下面的鏈接到您的書簽工具欄或者右鍵單擊鏈接把它添加到您的收藏夾中可創(chuàng)建一個快速填寫WP評論者信息的快捷方式。<br /><a href="#">快速填寫WP評論信息</a></p></div>注：該工具只適合于WordPress博客程序創(chuàng)建的網(wǎng)站。如果要適用其他博客，需對JS代碼中對應(yīng)的ID進行修改。

先森在新的友鏈伙伴閑魚博客那里看到了一篇技術(shù)文，介紹的是WordPress短代碼實現(xiàn)文章添加彩色美化框。可能看標題大家不太明白說的是什么，其實就是指的包裹著這段話的綠框框。先森覺得其美化效果是有了，但是卻并不方便，所以對整個代碼做了修改，增加了幾個WordPress默認TinyMCE編輯器自定義按鈕。點擊按鈕直接插入標簽，更加方便實用。效果展示綠色輸入框：輸入文字紅色提示框：輸入文字黃色提示框：輸入文字灰色提示框：輸入文字這種彩色美化框非常常見，尤其是實用知更鳥主題的博客，先森的友鏈都有很多是實用的知更鳥主題。相信無論是知更鳥主題，還是這種美化框，都是很受歡迎的。效果實現(xiàn)在閑魚博客那里，先森發(fā)現(xiàn)使用的是短代碼實現(xiàn)的。但當(dāng)先森研究了一下WordPress默認TinyMCE編輯器增加自定義按鈕的時候發(fā)現(xiàn)，其實可以直接省略短代碼那一步了，來看看怎么實現(xiàn)的吧。1.更改編輯器默認視圖為HTML大家都知道，在后臺新建文章后，編輯器就自動跳轉(zhuǎn)到“可視化”視圖，對于一些經(jīng)常要插入代碼或者WEB設(shè)計者們來說，可能更習(xí)慣使用HTML視圖手動編輯。設(shè)置方法：將以下代碼添加到主題的functions.php文件里即可：//更改編輯器默認視圖為HTMadd_filter('wp_default_editor', create_function('', 'return "html";'));2.新增WordPress默認TinyMCE編輯器自定義按鈕在WordPress主題的functions.php最后一個?>前加入一下代碼：//添加HTML編輯器自定義快捷標簽按鈕add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');function bolo_after_wp_tiny_mce($mce_settings) {?><script type="text/javascript">QTags.addButton( 'v_notice', '綠色提示框', '<blockquote id="sc_notice">輸入文字</blockquote>\n', "" );QTags.addButton( 'v_error', '紅色提示框', '<blockquote id="sc_error">輸入文字</blockquote>\n', "" );QTags.addButton( 'v_warn', '黃色提示框', '<blockquote id="sc_warn">輸入文字</blockquote>\n', "" );QTags.addButton( 'v_tips', '灰色提示框', '<blockquote id="sc_tips">輸入文字</blockquote>\n', "" );</script><?php}其中，主要設(shè)置自定義按鈕的是這個函數(shù)：QTags.addButton( ”, ”, ”, ” );【四對引號，分別表示按鈕的ID、按鈕顯示名、點一下輸入內(nèi)容、再點一下關(guān)閉內(nèi)容（最后一對引號為空則一次輸入全部內(nèi)容），\n表示換行】形象說明： QTags.addButton( ‘ 按鈕ID‘, ‘按鈕顯示名‘, ‘點一下輸入內(nèi)容‘, ‘點一下關(guān)閉內(nèi)容‘ );可以自定義添加多行 QTags.addButton( ”, ”, ”, ” ); 增加多個按鈕！3.CSS美化將css代碼放入主題的style.css文件中或其他地方：/*彩色美化框*/#sc_notice { color: #7da33c; background: #ecf2d6 url('images/sc/sc_notice.png') -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }#sc_warn, .post-password-form { color: #ad9948; background: #fff4b9 url('images/sc/sc_warn.png') -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }#sc_error { color: #c66; background: #ffecea url('images/sc/sc_error.png') -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;width: 98%; }#sc_tips {color: #7da33c;background: #ecf2d6 url('images/sc/sc_tips.png') -1px -1px no-repeat;border: 1px solid #aac66d;padding: 15px 15px 5px 35px;margin: 10px 0;width: 98%;overflow: hidden;}CSS代碼中有4個圖標鏈接，請將鏈接改為你保存的位置圖標素材下載：鏈接: http://pan.baidu.com/s/1bo3ziCB 密碼: chxs(成航先森)4.后臺效果完成以上步驟后，打開文章編輯界面，應(yīng)該會看到以下效果：實現(xiàn)后臺效果使用時，只需要將“輸入文字”改為需要的文字即可。寫在最后先森從開始WordPress建站之后，就將WordPress默認的TinyMCE編輯器換成了百度UEditor編輯器了，所以為了完成本文的效果還費了點功夫來熟悉默認編輯器。先森是兩步一起走，同時還實現(xiàn)了為UEditor編輯器增加同樣功能的自定義按鈕。相較于UEditor，TinyMCE的自定義按鈕就顯得很小兒科了，方法先森過兩天再分享出來。

看過SEO教程的朋友都知道，圖片優(yōu)化指的是給圖片標簽增加Alt屬性。Alt屬性的作用是當(dāng)圖片無法顯示的時候會以文字的形式顯示出設(shè)置的Alt內(nèi)容，這是給人看的。而對于SEO而言，它可以令搜索引擎更正確的認識你的圖片，進而有機會得到索引的機會，即在百度圖片可以搜索相關(guān)詞顯示出你的圖片，這就有可能為你的網(wǎng)站增加流量了。對于一些確實沒什么意義的圖片，最好也不要省略，而應(yīng)該留空，即alt=''。先森在博客龍笑天下：給 WordPress 頭像加上 Alt 標簽 那里看到了提醒給評論頭像增加alt屬性的文章，問了下，果然先森的博客上也沒有加alt屬性。所以回到電腦旁先森果斷又開始折騰了。首先看了一下，先森的博客上其實不是沒有加Alt屬性，只是加了，但沒有設(shè)置值，也就是空。這主要是因為先森在調(diào)用的時候沒有加上alt參數(shù)。alt為空但是既然注意到這里了，那就還是給它加上些內(nèi)容吧。上圖就可以看出，先森的Gravatar頭像都是緩存到本地了的，這是先森為了加快訪問速度的，估計很多站長都用了。添加Alt屬性龍笑天下博主提出了兩種修改方式，一種是將調(diào)用頭像函數(shù)參數(shù)寫全，另一種是在functions.php中添加一個新的鉤子。將調(diào)用頭像函數(shù)的參數(shù)寫全這一種，需要調(diào)用頭像的地方有兩處，而是填寫評論上方的那個默認頭像，二是已經(jīng)提交的評論頭像，這樣添加起來就要加兩次，有點麻煩，先森不考慮。在functions.php添加新的鉤子這種，我們已經(jīng)使用了Gravatar頭像緩存本地的頭像，所以沒有必要再新加鉤子了，在原有的基礎(chǔ)上修改即可:function fa_cache_avatar($avatar, $id_or_email, $size, $default, $alt){        if ( is_user_logged_in() ){$alt = '博主的Gravatar 頭像';} else{$alt = 'Gravatar 頭像';} $avatar = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar);    $tmp = strpos($avatar, 'http');    $url = get_avatar_url( $id_or_email, $size ) ;    $url = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $url);    $avatar2x = get_avatar_url( $id_or_email, ( $size * 2 ) ) ;    $avatar2x = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar2x);    $g = substr($avatar, $tmp, strpos($avatar, "'", $tmp) - $tmp);    $tmp = strpos($g, 'avatar/') + 7;    $f = substr($g, $tmp, strpos($g, "?", $tmp) - $tmp);    $w = home_url();    $e = ABSPATH .'avatar/'. $size . '*'. $f .'.jpg';    $e2x = ABSPATH .'avatar/'. ( $size * 2 ) . '*'. $f .'.jpg';    $t = 1209600; //緩存更新時間    if ( (!is_file($e) || (time() - filemtime($e)) > $t) && (!is_file($e2x) || (time() - filemtime($e2x)) > $t ) ) {         copy(htmlspecialchars_decode($g), $e);        copy(htmlspecialchars_decode($avatar2x), $e2x);    } else { $avatar = $w.'/avatar/'. $size . '*'.$f.'.jpg';        $avatar2x = $w.'/avatar/'. ( $size * 2) . '*'.$f.'.jpg';        if (filesize($e) < 1000) copy($w.'/avatar/default.jpg', $e);        if (filesize($e2x) < 1000) copy($w.'/avatar/default.jpg', $e2x);        $avatar = "<img alt='{$alt}' src='{$avatar}' srcset='{$avatar2x}' class='avatar avatar-{$size} photo' id='real-time-gravatar' height='{$size}' width='{$size}' />";    }    return $avatar;}add_filter('get_avatar', 'fa_cache_avatar',1,5);如果有和先森已經(jīng)，開了全站CDN，并使用WP Super Cache設(shè)置了“讓已知用戶匿名使他們?yōu)g覽的內(nèi)容是緩存文件”的博主，上面這種設(shè)置可能不會識別出博主，所以可以將上面的代碼改成下面這種：function fa_cache_avatar($avatar, $id_or_email, $size, $default, $alt){    if ( is_user_logged_in() ){$alt = '博主的Gravatar 頭像';} else if ( $id_or_email == '這里改成博主郵箱' ){$alt = '博主的Gravatar 頭像';} else{$alt = 'Gravatar 頭像';} $avatar = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar);    $tmp = strpos($avatar, 'http');    $url = get_avatar_url( $id_or_email, $size ) ;    $url = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $url);    $avatar2x = get_avatar_url( $id_or_email, ( $size * 2 ) ) ;    $avatar2x = str_replace(array("www.gravatar.com", "0.gravatar.com", "1.gravatar.com", "2.gravatar.com"), "gravatar.duoshuo.com", $avatar2x);    $g = substr($avatar, $tmp, strpos($avatar, "'", $tmp) - $tmp);    $tmp = strpos($g, 'avatar/') + 7;    $f = substr($g, $tmp, strpos($g, "?", $tmp) - $tmp);    $w = home_url();    $e = ABSPATH .'avatar/'. $size . '*'. $f .'.jpg';    $e2x = ABSPATH .'avatar/'. ( $size * 2 ) . '*'. $f .'.jpg';    $t = 1209600; //緩存更新時間    if ( (!is_file($e) || (time() - filemtime($e)) > $t) && (!is_file($e2x) || (time() - filemtime($e2x)) > $t ) ) {         copy(htmlspecialchars_decode($g), $e);        copy(htmlspecialchars_decode($avatar2x), $e2x);    } else { $avatar = $w.'/avatar/'. $size . '*'.$f.'.jpg';        $avatar2x = $w.'/avatar/'. ( $size * 2) . '*'.$f.'.jpg';        if (filesize($e) < 1000) copy($w.'/avatar/default.jpg', $e);        if (filesize($e2x) < 1000) copy($w.'/avatar/default.jpg', $e2x);        $avatar = "<img alt='{$alt}' src='{$avatar}' srcset='{$avatar2x}' class='avatar avatar-{$size} photo' id='real-time-gravatar' height='{$size}' width='{$size}' />";    }    return $avatar;}add_filter('get_avatar', 'fa_cache_avatar',1,5);使用上面代碼時，記得修改第4行的郵箱地址。添加title屬性其實也可以順便把圖片的title屬性加上了，這個簡單，將上面的倒數(shù)幾行的$avtar的內(nèi)容加上就行了，即：$avatar = "<img alt='{$alt}' title='{$alt}' src='{$avatar}' srcset='{$avatar2x}' class='avatar avatar-{$size} photo' id='real-time-gravatar' height='{$size}' width='{$size}' />";看看最終的效果：最終的效果最后生命不止，折騰不休，WordPress就是折騰嘛。