☟為了讓這裡能夠永續經營,請容許一點點的廣告☟

事情是這樣的,一開始我的WordPress媒體庫當然是存放在主機的資料庫中,因為我想要將媒體庫連結到AWS的S3儲存桶,於是我便安裝了WP Offload Media Lite這個這外掛,就可以直接在媒體庫上傳新圖片到S3儲存桶。所以媒體庫中的圖片被區分成二個儲存空間,舊的圖片一樣在主機裡面,新上傳的圖片則是在S3儲存桶。
但是,問題來了,因為已啟用WP Offload Media Lite,當我想要使用ShortPixel這個外掛來壓縮圖片的時候,才發現原本在主機裡的圖片,也被WP Offload Media Lite自動上傳到S3儲存桶裡面了。
更大的問題還在後頭,這些被自動上傳到S3儲存桶的主機裡的舊圖片,在媒體庫列表的小縮圖都變成空白了,除此之外,如果這些圖片剛好又是文章的特色圖片,那麼在文章列表中的小縮圖就會變成破圖!

thumbnails in media library are broke|媒體庫列表中的小縮圖不見了

事發經過是這樣的:

原本在主機裡的舊圖片,因為使用ShortPixel壓縮後,就會被WP Offload Media Lite自動上傳到S3儲存桶,所以圖片的網址也會變成S3儲存桶的那組網址。
這時候圖片在前台都能正常顯示,進入圖片編輯頁面的時候也能正常顯示,問題都只出現在WordPress後台列表中的小圖示不見了!

thumbs_lost_in media_library_after_offload_to_s3|主機裡的圖片透過ShortPixel壓縮後被上傳到S3

一鍵修復小縮圖吧!

其實非常簡單,只需要使用Regenerate Thumbnails這個外掛《重新產生略縮圖》就可以了。

請注意,在啟用Regenerate Thumbnails這個外掛之前,請先將ShortPixel這個外掛停用,因為這二個外掛不適合同時啟用。

操作步驟

STEP-4-regenerate-thumbnails-to-s3-bucket

使用Regenerate Thumbnails這個外掛,解決媒體庫列表中的小縮圖變成空白或破圖的問題。

時間 2 minutes

STEP 1|安裝Regenerate Thumbnails

STEP-1-regenerate-thumbnails-to-s3-bucket

在關鍵字中搜尋《regenerate》,找到圖中名為【Regenerate Thumbnails】的外掛,點擊《Install/安裝》,並且《Active/啟用》。

STEP 2|對指定圖片重新產生略縮圖

STEP-2-regenerate-thumbnails-to-s3-bucket

直接前往媒體庫列表,找到小縮圖不見的那張圖片,滑鼠移到圖片下方後會出現可操作的選項,點擊【Regenerate Thumbnails】。

STEP 3|重新產生略縮圖並且刪除舊的略縮圖

STEP-3-regenerate-thumbnails-to-s3-bucket

這裡只有二個選項,第一個不勾,第二個要勾
Skip regenerating existing correctly sized thumbnails (faster).|不要對已經擁有略縮圖的尺寸重新產生略縮圖。☞這個不勾
Delete thumbnail files for old unregistered sizes in order to free up server space.|刪除沒用的略縮圖。☞這個要勾
▬說明▬
‧第一個選項取消打勾(不勾)☞無論略縮圖是否已經存在,都要重新產生,所以不勾。
‧第二個選項一定要打勾☞要刪除沒用的略縮圖,所以要打勾。(請放心,因為圖片已經在S3儲存桶裡面,所以其實並不會真的刪除。即便如此,這個選項一定要打勾,才能觸發實際的作用。)
最後,點擊藍色按鈕《Regenerate Thumbnails》。

STEP 4|檢查小圖示是否已正常顯示

STEP-4-regenerate-thumbnails-to-s3-bucket

回到媒體庫列表,找到小圖示不見的那張圖片,就能看到小圖示已正常顯示了。

☟為了讓這裡能夠永續經營,請容許一點點的廣告☟

如何透過ShortPixel優化主機裡的圖片?

在啟用WP Offload Media Lite的狀態下,主機裡的圖片無法直接使用ShortPixel壓縮,因為只要一壓縮,就會直接透過WP Offload Media Lite上傳到S3,而且媒體庫與文章列表的小圖會空白或破圖。

暫時停用WP Offload Media Lite

不想要讓主機裡的圖片透過WP Offload Media Lite上傳到S3,只能先暫時停用WP Offload Media Lite,再使用ShortPixel壓縮主機裡的圖片。

開啟網站維護模式

一旦停用WP Offload Media Lite之後,s3儲存桶裡面的圖片就會無法正常顯示,所以停用前最好先將網站設定為維護模式,或者是挑沒有訪客在線的時候操作。

透過Staging Site操作

如果想要完全不影響訪客瀏覽的話,也可以將這個網站拉到staging site做完再推送到Live Site(Cloudways有提供staging site的功能)。
但是這個功能不太適合購物網站,擔心臨時有人在Live Site下單,而Staging Site沒有這些訂單更新的資料;之後將Staging Site推送到Live Site,會缺少這段時間的訂單資料。
只是為了優化圖片,實在不需要這麼大動作,會建議設定維護模式比較容易也不會出錯。

後記

因為我使用的WP Offload Media Lite外掛是免費版的,所以只有新上傳的圖片才會被扔到S3儲存桶裡面。
如果想要將主機裡面的舊圖片也傳到S3儲存桶裡面,購買付費版就可以輕鬆完成。
當然,也可以直接透過Regenerate Thumbnails這個外掛完成,雖然功能不同,但是結果是一樣的,有點像是抄捷徑到達目的地的概念,不失為一個免費的小確幸。

★延伸閱讀☞如何將主機內的舊圖片透過外掛上傳到S3儲存桶+ShortPixel優化?

如何透過Regenerate Thumbnails這套外掛修復媒體庫列表的小縮圖無法正常顯示的解決方法就介紹到這裡了!如果有任何問題,歡迎在下方的留言板討論指教囉~

好嘛好嘛…臨走前幫我拍拍手嘛
如果你願意免費幫助我,請在下方圓形按鈕幫我拍拍手,最多可以按5下,那就幫我按5下吧!算我求你啦啦啦~~~謝謝你、我愛你❤
臉書或Google帳號都可以快速登入喲…

IMG_2349-miriammibao-100px

▍關於作者|MiriamMibao温唯

2019.02.11,我開始了這裡…
不懂css、不懂php,當然-也不知道誰是Nginx、誰又是Apache…
硬要WordPress架站,一切自己來,所有的細節,從0開始,自己架站會遇到的問題,遇到了才知道!這一路走來,跌跌撞撞,摸索過國內外能夠解決問題的資料…
是不是該好好紀錄這一段跌跌撞撞的探索日記?或許,也能帶給你們一些幫助...

咖啡贊助計畫

buy me a coffee-icon

我願意《將我所知道的一切,仔細地、真實地分享給你》
你願意《請我喝咖啡》嗎?
你的一杯咖啡,是我最溫暖的支持❤
用實際行動支持我創作更多好作品吧