[教學]解決升級WordPress 4.4 媒體庫、網站破圖問題(srcset)

新版WordPress 4.4 最近推出，有些使用者斷然的升級後發現網站居然破圖了！而且媒體庫破圖、網站也破圖，但是查看FTP，圖檔確實是存在耶？！事實上這問題國外也有發生，主要是因為WordPress 4.4版本支持RWD的圖片縮放，讓網站的圖片可以從媒體庫內的各尺寸抓出活用，但是並非每一個網站一開始都是採用RWD版型，可能是中途更換，那麼舊文章可能就造成破圖了。

另外，有些使用者會為了避免媒體庫裡面產生三種尺寸的圖片，會去把媒體庫自動裁切圖片設定為0，也因此造成另外兩種尺寸圖片不存在，但是WordPress4.4似乎是自動產生圖片連結，因此產生出的連結卻是圖片檔案不存在，因此也會造成網站破圖。基於以上種種原因，國內外都陸續出現哀號，也因此這樣，在WordPress官方網站討論區中有網友提出了解決方法。

想要解決WordPress 4.4 媒體庫、網站破圖的問題，可透過不用WordPress核心程式的方式就是利用hook、filter方法去跳出該設定。再次說明一下媒體庫(Media)、網站版型(Theme)、特色圖片(feature image)破圖的原因是因為WordPress 4.4支援RWD的媒體載入(Srcset)，官方開發者一篇文章有說明關於此設定的部分「Responsive Images in WordPress 4.4」，透過一些WordPress新增的function可以去做到支援到HTML5的「Srcset」語法支援。

[教學]解決升級WordPress 4.4 媒體庫、網站破圖問題(srcset)

雖然WordPress搶先支援Srcset，支援srcset可以有效的在網站效能、圖片呈現上可以在RWD內完善表現，但對於網站不使用RWD或者是圖片缺檔案、使用圖床外掛(Hacklog Remote Attachment、upload to ftp)、使用外部圖床搭配媒體庫的使用者來說，卻是一大災難。依照官方討論區國外網友提供的語法，現階段可以解決破圖問題，只要將以下語法放置於functions.php或者是版型內適當位置，即可解決此問題。

[gist id=a9c2adf673124e84cd23 file=wp_srcset_fix.php]

如果您是SSL網站，可以參考這篇解決方法，記得確保網站亮綠燈即可。

在Google News上追蹤我們最新文章
標籤
香腸
香腸

喜歡在網路上透過文字與圖片分文章教學，默默地用鍵盤烤了9年的香腸。另外還身兼阿腸接案餬口飯吃。對了，別叫我阿腸，請叫我香腸，這樣我才知道你看我部落格長大的。

文章: 1781

相關文章

4 則留言

  1. 哇~謝謝香腸大這麼快熱心的回覆!

    恩~圖片的EXIF檔我也有注意到!

    但我主要的困擾是

    這些狀況在前幾天都是從未發生過的

    不知道為什麼在某一天網站就變成許多圖檔出不來

    但又不是所有文章

    所有原本直立圖片通通橫躺

    我在編輯文章介面看又是正常(包含EXIF資訊)

    天啊~我也不敢到UPLOADS的資料去更動

    因為我試著更動一張~結果網誌看起來還是一樣橫躺?

    看來我還是等看看升級到4.7時會不會自動變正常、、、、、、、

    但是我一直按更新都沒有升級4.7的資訊?

    再一次感謝您~

    • 這我不太清楚是否原先有什麼外掛幫他校正讓他變正。
      或版型內是否有其他東西衝突，建議是圖片抓到win下看，用win內建看圖軟體轉向是最準確的。

  2. 香腸大您好~

    謝謝您熱心的分享與教學

    我的WORDPRESS 部落格忽然發生許多網址破圖

    以及直立圖片橫躺狀況

    是這幾天忽然發生 過去曾未有

    點進編輯文章中看是正常的

    我的版本已經是4.6.2版

    使用上述方法不但不可行

    網站還會連不進去

    以下是我的網址

    http://gump.synology.me/wordpress/

    可否幫忙協助診斷原因

    辛苦了!謝謝~

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。