WordPress技巧

當前位置：首頁 ? 建站分享 ? WordPress技巧 ? WordPress徹底解決百度UEditor插件在歷史文章中給圖片帶來的拉伸問題

WordPress徹底解決百度UEditor插件在歷史文章中給圖片帶來的拉伸問題

編輯：狂族晨曦來源：WordPress技巧日期：2016-03-19 閱讀： 2,767 次搶個沙發(fā) 百度已收錄

最后更新時間：2016-06-16

先森很早就發(fā)現(xiàn)，手機端查看本站文章，文章里的圖片會產(chǎn)生拉伸問題，即圖片不是等比例縮放，而是高度或?qū)拵渲幸粋€自適應(yīng)了，另一個保持不變。這就讓圖片看起來很長或很寬，很影響用戶體驗。

而產(chǎn)生問題的原因，經(jīng)過先森查明，發(fā)現(xiàn)是WordPress上安裝的編輯器插件百度UEditor。先森曾經(jīng)找到了解決新增的文章不再產(chǎn)生拉伸問題的方法，而對曾經(jīng)發(fā)布的文章中的圖片，則束手無策了。畢竟，如果歷史文章少，還好一個一個的改回來。但先森已經(jīng)發(fā)布了近兩百篇文章，一篇一篇的改，太麻煩了。

關(guān)于怎么使新增文章的圖片不再受到該問題影響的方法，有同樣問題的可以去看看：

解決方法：解決使用百度UEditor編輯器后移動端圖片被拉伸問題

先森發(fā)現(xiàn)，不僅僅是移動端，PC端的圖片其實也有影響，但影響基本不大，不像移動端那么容易被發(fā)現(xiàn)。先森文章中的圖片都是被七牛裁剪過的，固定寬度為500px，高度隨寬度自適應(yīng)，并且還加上了水印。就是這個水印，讓先森在查看歷史文章的時候，發(fā)現(xiàn)了UEditor對PC端的影響。

圖片有明顯的拉伸感 -1

圖片有明顯的拉伸感（點擊圖片后按F查看原圖）

通過上面的水印，可以看出，整張圖片有明顯的拉伸感。而罪魁禍首，就是圖片<img>標簽中的樣式代碼：

style="width: 766px; height: 291px;"

而現(xiàn)實在右邊，將這段樣式設(shè)置注釋后，圖片就好看多了：

圖片恢復(fù)正常 -2

圖片恢復(fù)正常（點擊圖片后按F查看原圖）

近日，先森研究七牛的時候，發(fā)現(xiàn)了MySql的結(jié)構(gòu)化查詢語言對處理文章中出現(xiàn)的問題特別有幫助，所以先森就想試試用SQL語言來解決圖片拉伸的問題。接著先森就開始著手研究消除圖片<img>中的style樣式代碼了。

因為每張圖片的高度設(shè)置都不一樣，所以代碼中肯定要用通配符。百度一下，說MySql中百分號“%”是統(tǒng)配一個或多個字符，果斷把以前常用的替換代碼修改了一下，拿去執(zhí)行：

update `qdm********_db`.`wp_posts` set post_content=replace(post_content,'style="width: %px; height: %px;"','')

執(zhí)行過后，清除緩存，文章刷新，發(fā)現(xiàn)并沒有什么卵用。

結(jié)果百度replace函數(shù)，結(jié)果網(wǎng)上說這個函數(shù)并不能使用通配符。再找解決辦法，百度谷歌了半天，也只找到一個類似的，但是卻還是有些差別。沒辦法，先森只有開始了研究代碼之路。

認識MySql代碼

首先是replace函數(shù)。

REPLACE(str,from_str,to_str)

返回字符串str中所有出現(xiàn)的字符串from_str替換為字符串to_str。

from_str雖然不支持使用通配符，卻可以使用別的函數(shù)的返回值。也就是，我們可以用別的函數(shù)，通配出變化中的的“style”的高和寬。

先森在解決類似問題的文章中認識了兩個函數(shù)，CONCAT和SUBSTRING_INDEX。大寫的函數(shù)單詞可能會看著比較蛋疼，雖然大小寫并不會影響小型數(shù)據(jù)處理。但是代碼在執(zhí)行的時候，都會先把小寫轉(zhuǎn)換為大寫，再進行執(zhí)行。所以在寫代碼的時候，直接用大寫會減少執(zhí)行的時間。當然，這是閑話了。

關(guān)于這兩個函數(shù)的作用，首先是CONCAT。

CONCAT(str1,str2,...)
--例：CONCAT(成航,先森,...)最后生成“成航先森”

返回的字符串參數(shù)連接的結(jié)果。也就是將str1、str2等各段都合并起來。

然后是SUBSTRING_INDEX。

SUBSTRING_INDEX(str,delim,count)
--例：SUBSTRING_INDEX('www.cnidcc.cn', '.', 1)  會輸出“www”

返回的子字符串str計數(shù)前出現(xiàn)的分隔符DELIM。如果計數(shù)是正的，左側(cè)的最后一個分隔符（從左邊算起）的一切被返回。如果計數(shù)為負，一切向右側(cè)的最后一個分隔符（計數(shù)從右側(cè)）將被返回。 SUBSTRING_INDEX()執(zhí)行區(qū)分大小寫的匹配時搜索DELIM。這個比較難理解，但是自己把上面的例子拿到數(shù)據(jù)庫命令窗口去多試幾遍就明白了。

整理思路

認識了上面的三個函數(shù)，該怎么使用呢？我們可以逆推。

最終要實現(xiàn)的，是將下面的代碼在表中注刪掉：

style="width: 766px; height: 291px;"

這個可以使用REPLACE函數(shù)，但是這個函數(shù)不能使用通配符。所以需要將“width: 766px; height: 291px”用別的函數(shù)通配出來。

這里可以用SUBSTRING_INDEX函數(shù)，以style后面的兩個雙引號為分隔符，將中間的“width: 766px; height: 291px”提取出來。

接著在用CONCAT函數(shù)將“width: 766px; height: 291px”前面的style="和后面的雙引號連接合并到一起，這樣就將整個“style="width: 766px; "text-indent: 2em;">則解決方法為：提取-->合并-->替換。

測試代碼

先說明，先森很囧的用SUBSTRING_INDEX把數(shù)據(jù)庫給毀了，因為錯誤的執(zhí)行了一行代碼，所有的圖片都沒有了。又沒辦法撤銷。所以把數(shù)據(jù)庫從備份還原了，還好先森在3月16號才備份了一次數(shù)據(jù)庫，17號只發(fā)布了4篇文章，影響不大。但就算這樣，先森把網(wǎng)站還原也用了近一個小時。所以備份很重要啊，尤其是要對數(shù)據(jù)庫進行數(shù)據(jù)處理之前。

先森吃了虧，再進行操作的時候就小心翼翼的了。不敢直接拿數(shù)據(jù)庫動刀，只敢一點點的用測試代碼。

復(fù)制了一整串受影響的<img>標簽，先森開始了測試。

<img title="成都航院正校門" alt="成都航院正校門" src="http://img.capjsj.cn/ueditor/php/upload/image/20150622/1434945153483522.jpg" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">

由于先森的圖片增加了七牛裁剪代碼，所以代碼看著特別長，所以下文先森就在代碼中不寫圖片鏈接了，反正不影響測試。

首先，我們需要從上面的標簽中提取圖片的內(nèi)置寬高設(shè)置。而真正執(zhí)行的時候，需要搜索的對象是整個表，所以先森用分隔符是“style="width: ”，以避免別的style。需要用SUBSTRING_INDEX函數(shù)，先森用的代碼是：

SELECT SUBSTRING_INDEX('<img title="成都航院正校門" alt="成都航院正校門" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">','style="width: ',-1);

上面的代碼拿到數(shù)據(jù)庫命令窗口去執(zhí)行：

第一次執(zhí)行的結(jié)果 -3

第一次執(zhí)行的結(jié)果（點擊圖片后按F查看原圖）

我們可以看到輸出的結(jié)果是：

766px; height: 291px;">

而這個結(jié)果正是所有被搜索對象的分隔符后面所有內(nèi)容，也就是如果搜索對象是全文的話，這段代碼會輸出分割符后面所有的內(nèi)容，包括圖像標簽以外文章正文。所以這肯定是還不行的。

所以我們需要上面的輸出結(jié)果再用SUBSTRING_INDEX函數(shù)再提取一次。這次還需要加上上面的代碼，也就是：

SELECT SUBSTRING_INDEX(SUBSTRING_INDEX('<img title="成都航院正校門" alt="成都航院正校門" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">','style="width: ',-1),'"',1);

第二次執(zhí)行的結(jié)果 -4

第二次執(zhí)行的結(jié)果（點擊圖片后按F查看原圖）

經(jīng)過兩次的提取后，我們就得到了需要通配符匹配的結(jié)果：

766px; height: 291px;

既然能夠匹配出最麻煩的地方了，接下來也就簡單了。

下面我們把需要用來搜索的地方用CONCAT函數(shù)鏈接起來。代碼：

SELECT CONCAT('style="width: ',SUBSTRING_INDEX(SUBSTRING_INDEX('<img title="成都航院正校門" alt="成都航院正校門" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">','style="width: ',-1),'"',1),'"');

第三次執(zhí)行的結(jié)果 -5

第三次執(zhí)行的結(jié)果（點擊圖片后按F查看原圖）

經(jīng)過復(fù)雜的提取和拼湊后，我們得到了需要用來搜索的部分：

style="width: 766px; height: 291px;"

既然得到了需要用來搜索的部分，在上面的函數(shù)外面再套上REPLACE函數(shù)就可以了：

SELECT REPLACE('<img title="成都航院正校門" alt="成都航院正校門" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">',CONCAT('style="width: ',SUBSTRING_INDEX(SUBSTRING_INDEX('<img title="成都航院正校門" alt="成都航院正校門" width="766" height="291" border="0" vspace="0" style="width: 766px; height: 291px;">','style="width: ',-1),'"',1),'"'),'');

第四次執(zhí)行代碼的結(jié)果 -6

第四次執(zhí)行的結(jié)果（點擊圖片后按F查看原圖）

我們看上圖，可以看到，圖片<img>標簽中，內(nèi)置的樣式代碼已經(jīng)成功的替換成無了，也就刪除了。

當然，到這里，先森都還是測試，能不能成功還要看最后真正的替換。

執(zhí)行代碼

通過上面一系列的測試，我們終于可以配置出最終的代碼了：

update wp_posts set post_content=REPLACE(post_content,CONCAT('style="width: ',SUBSTRING_INDEX(SUBSTRING_INDEX(post_content,'style="width: ',-1),'"',1),'"'),'')

最終代碼執(zhí)行結(jié)果 -7

最終代碼執(zhí)行結(jié)果（點擊圖片后按F查看原圖）

可以看到，共影響了396行，當然并不是代表著修改了396篇文章。

檢驗結(jié)果的時候來了，到后臺刪除所有緩存，到前臺打開一些最早發(fā)布的文章，一查看，OK，成功的將內(nèi)置style給刪除了。先森無奈的發(fā)現(xiàn)，該方法如果文章中有設(shè)置不同寬高的兩張及以上圖片，則只會其中其中一張。如果圖片的寬高數(shù)據(jù)完全相同，才會全部替換成功。

研究各種語言還真是辛苦，還好先森各種語言以前都還多多少少有所學習，以及還好不會用到匯編語言。