分類

展開全部 | 收合全部

分類

展開全部 | 收合全部

【WordPress】問題解決: wordpress 引用文章/文章連結 時 縮圖壞掉/破圖/沒有顯示縮圖 ,分享文章到 facebook 時 縮圖壞掉/破圖/沒有顯示縮圖 (附例圖)

前言

這篇是我自己碰到問題時的情況,與整個解決問題過程的筆記。

真的非常困擾啊!
更何況我解這個 bug 解了快一個禮拜!不寫篇文實在是過不去啊!

主要分成下面兩種問題:

  • wordpress 引用文章/文章連結 時 縮圖壞掉/破圖/沒有顯示縮圖:

圖片說明如下:

這篇是我自己引用自己文章時,意外發現產生的破圖情形!!
可以很明顯看到就是圖片壞了。(但實際上是有圖的)

  • wordpress 引用文章/文章連結 時 縮圖壞掉/破圖/沒有顯示縮圖:

圖片說明如下:

可以看到 facebook 並沒有顯示這篇文章的縮圖!
(但實際上是有圖的)

解決過程

第一種嘗試 – 重新更新縮圖

既然是圖片的問題,想當然就直接就縮圖重新產生下手。

因此我找了「regenerate Thumbnails」之類的外掛,

  • 結果:失敗了。

第二種嘗試 – 把 wordpress 外掛全關掉的嘗試是常識吧! (誤)

把 wordpress 外掛全關掉的嘗試是一定要做的!

畢竟今天搞不好是哪個外掛不小心衝突了,誰知道呢?

  • 結果:失敗了QQ。

插曲01 – 好像只有 windows 有問題?

這是我偶然嘗試後的發現,
其實這個問題只有出現在 windows上的 chrome

因為我試了「mac」、「手機」 以下都能夠正常的顯示出圖片:

△(mac 上顯示的示意圖,看!是我可愛的大臉(誤))

第三種嘗試 – 直接換掉原圖

因為有插曲01的關係,
我推測可能是因為「mac」、「手機」螢幕比我的 windows 小,
所以我就開始嘗試替換掉原圖 (700×700),換一張更大的原圖給他!

主要原因是因為在第一種嘗試中,意外發現缺少了某些大小的縮圖:

「直接換掉原圖」也是超冷門的知識,意外在這次解法中學到了!
我找到「ENABLE MEDIA REPLACE」這個外掛!

至於之所以會這樣做是因為我發現其實在手機上可以正常顯示的!
我打算直接把原本的圖片換掉!給他一張更大的!

  • 結果:還是失敗了。

插曲02 – 好像只有 chrome 有問題?

這是我偶然嘗試後的發現,
其實這個問題只有出現在 windows上的 chrome

以下都能夠正常的顯示出圖片:

  • mac – safari
  • mac – chrome
  • iphone – safari
  • iphone – chrome
  • windows – edge
  • windows – firefox

看到後來我就以為是 chrome 的問題了

第四種嘗試 – 用 chrome 無痕嘗試、關閉所有 chrome 的擴充功能

我以為是擴充功能在搞鬼,但結果不是QQ
不論是「用 chrome 無痕嘗試、關閉所有 chrome 的擴充功能」結果都沒有效QQ

  • 結果:失敗了

第五種嘗試 – 能google的都找完了,能試的都試了,只好問客服了

我得到的答案包含一個關鍵字可能是「防盜鏈」設定的問題!
(客服很貼心的還提供我可以參考的程式碼)

只好來研究一下自己沒碰過的 php 惹 QQ

因此我找到了這篇網站

如何用.htaccess防止圖片、檔案盜連?

照著他所說的改! 感覺很有機會哦!

這邊提示一下:要更改的路徑位置在 「./public_html/.htacess

  • 結果:還是失敗了,但我認為某些人的情況應該可以成功

第六種嘗試 – 就是「防盜鏈」設定的問題!

上面直接暴力改 code 沒用,原本已經心灰意冷覺得沒救了!
後來打開我自己的 GUI後台,
意外發現這個!

點進去設定一下,意外的!!!

  • 結果:成功! (個人猜測可能這邊的設定會把第五種嘗試的 php 洗掉,才會導致這樣。)

△(看!是我可愛的大臉! 終於順利跑出來了! (誤))

△(facebook 分享也是一併正常的囉!)

Reference

WordPress Plugin Enable Media Replace – 圖片替換外掛程式

如何用.htaccess防止圖片、檔案盜連?

me

⭐WordPress 相關文章整理⭐:
1.【WordPress】建立/架一個網站大概要花多少錢? 與個人建立網站心態分享 (以我的 wordpress 網站為例,持續更新) How Much Does It Cost to Build a WordPress Website?
2.【WordPress】wordpress 初學者尋找特定選單的編輯位置
3.【WordPress】wordpress 初學者建立文章縮圖的方法
4.【WordPress】wordpress 調整文章內表格顏色, 格式 的方法 (markdown 也適用) modify table color, format (內附範例 css 程式碼) sample code
5.【WordPress】Bug & 問題解決: wordpress 引用文章/文章連結 時 縮圖壞掉/破圖/沒有顯示縮圖 ,分享文章到 facebook 時 縮圖壞掉/破圖/沒有顯示縮圖 (附例圖)
6.【WordPress】Bug & 問題解決: 使用 markdown 撰寫文章後,編輯時全部變回 html 格式
7.【Wordpress】如何放置 google slides (powerpoint, ppt, 簡報) 在 wordpress 的文章中直接顯示
8.【WordPress】如何利用 Rank Math SEO 提交 sitemap (圖文說明)
⭐Google AdSense 相關文章整理⭐:
1.【Google AdSense】申請 Google AdSense 如何設置 ads.txt (內附圖文說明)
2.【Google AdSense】問題解決: 申請 Google AdSense 卡在「我們正在為你完成設定」 後一直沒有變化 (內含圖文說明)
3.【Google AdSense】問題解決: 「收益警示:您必須修正某些 ads.txt 檔案問題,以免造成嚴重的收益損失。」
4.【Google AdSense】問題解決: 很抱歉造成您的不便,但是我們目前無法處理您的要求。我們已將此問題告知工程師,並會儘快加以解決。
⭐【喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡!
如果喜歡我的文章,請幫我在下方【按五下Like】 (Google, Facebook 免註冊),會由 「LikeCoin」 贊助作者鼓勵繼續創作,讀者們「只需幫忙按讚,完全不用出錢」哦!

likecoin-steps
Howard Weng
Howard Weng

我是 Howard Weng,很多人叫我嗡嗡。這個網站放了我的各種筆記。希望這些筆記也能順便幫助到有需要的人們!如果文章有幫助到你的話,歡迎幫我點讚哦!
另外,因為定位是「個人的隨手筆記」,有些文章內容「⚠️可能我理解有誤⚠️」或「?只寫到一半?」,如果有發現這樣的情況,歡迎在該文章的最下面留言提醒我!我會儘快修正或補上!感謝大家的建議與幫忙,讓網站能變得更好?

文章: 866

6 則留言

    • 這跟網站架設的方式有關係, 我的網站本身是請雲端主機服務商幫忙弄得,
      GUI 指的就是雲端主機服務商的後台,
      這個每個人都可能會不太一樣, 要看自己怎麼讓 wordpress 服務上線的~

★留個言吧!內容有誤或想要補充也歡迎與我討論!