如何在 WordPress 中查找和修復損壞的圖像

已發表: 2022-08-11

如何在 WordPress 中查找和修復損壞的圖像 您可能已經在您的網站上看到了一個看起來像一張被撕毀的圖片的圖像圖標。 這是一個損壞的圖像,如果您不替換它,它可能會對您的網站產生負面影響

圖像對大多數網站都很重要。 除其他外,它們使您的頁面更具吸引力,傳達關鍵信息並提高您的搜索引擎排名。

因此,一旦發現損壞的圖像並在您的網站上找到並修復它們,這一點很重要。 在本指南中,我們將解釋什麼是損壞的圖像,並向您展示如何在您的 WordPress 網站上修復它們。

內容:

  • 什麼是殘缺圖像?
  • 在您的網站上檢測損壞的圖像
  • 如何修復損壞的圖像問題
    • 文件路徑不正確
    • 交叉檢查文件名
    • 文件擴展名不正確
    • 使用相對路徑
    • 確保圖像存在
    • 轉移問題
  • 結論

什麼是殘缺圖像?

簡而言之,損壞的圖像是源鏈接不可用或損壞的圖像。 當用戶滾動到您網站上圖像損壞的部分時,他們將看到損壞的圖像圖標。 這可能是由於 URL 拼寫錯誤、文件路徑不正確,或者您可能鏈接到不再存在的站點。

破碎的圖標圖像

這是一個關鍵問題,因為它會對用戶體驗產生負面影響。 當用戶在您的網站上遇到丟失的圖像時,他們往往會離開您的網站去尋找競爭對手。

因此,您網站上的跳出率會增加。 因此,為防止這種情況發生,請始終掃描您的站點以查找損壞的圖像並修復它們。 讓我們在下一節中看看如何做到這一點。

在您的網站上檢測損壞的圖像

在 WordPress 網站上檢測損壞圖像的最簡單方法是使用插件。 此類插件之一是 Broken Link Checker。 使用此插件,您可以掃描網站的內部和外部鏈接以查找任何損壞的鏈接和圖像。

斷開鏈接檢查器插件

安裝並激活插件後,您可以通過Settings >> Link Checker訪問插件的設置頁面。

斷開的鏈接檢查器選項

Broken Link Checker 插件會掃描您的網站以查找損壞的鏈接。 如果有任何問題,您將在此處查看或通過電子郵件收到通知。

防止搜索引擎跟踪損壞的鏈接

該插件還為您提供了防止搜索引擎跟踪損壞鏈接的選項。 您可以啟用此選項,以便損壞的圖像不會影響您的 SEO 排名。

修復損壞的圖像

有幾種情況可能會導致 WordPress 網站上的圖像丟失。 在本節中,我們將討論原因以及如何解決它們。

文件路徑不正確

將圖像添加到您的網站時,WordPress 會創建一個指定圖像位置的文件路徑。 Web 瀏覽器使用圖像 src 屬性中的路徑來定位圖像。 如果圖片的路徑不正確,圖片將無法加載,也不會顯示。

要解決此問題,只需找到帶有損壞圖像圖標的帖子或頁面,然後將其替換為新圖像。 為此,請登錄您的儀表板並導航到您的 WordPress 帖子頁面。 然後將鼠標懸停在帶有損壞圖像的帖子上並選擇Edit 。

轉到所有帖子,然後單擊帖子名稱下的編輯

在帖子編輯器上,滾動到帶有損壞圖像的部分,然後單擊它並選擇Replace 。 您可以從媒體庫中選擇圖像或上傳新圖像。

單擊損壞的圖像並選擇替換

替換損壞的圖像後,單擊更新以保存更改。

單擊更新按鈕以保存更改

如果您使用的是經典編輯器,請單擊圖像,然後選擇鋼筆圖標來編輯損壞的圖像。

單擊筆圖標

在這裡,單擊替換按鈕,然後從您的媒體庫中選擇一個圖像。 最後,單擊更新以替換圖像。

從媒體庫中,單擊替換按鈕

替換自定義 HTML 圖像

如果您使用自定義 HTML 或 CSS 添加圖像,則需要驗證路徑是否正確。 要驗證這一點,您需要檢查添加圖像的位置。 它可能在 Additional CSS 塊上。 如果是這種情況,請按照以下步驟操作。

旁注:替換模板中的圖像可能是技術性的。 如果您是 WordPress 新手,您可以讓我們的專家幫助您解決模板問題。

首先,登錄您的 WordPress 儀表板,然後轉到外觀>>自定義。

轉到您的 wp 定制器

之後,選擇附加 CSS 塊或自定義 CSS 菜單。

選擇自定義 CSS 菜單

在代碼編輯器上,找到添加圖像的代碼行並突出顯示圖像的路徑。 接下來,右鍵單擊,然後選擇Go to path-to-file ...

選擇 Go-to-path-to-file

如果圖像不可用,您將收到 404 not found 錯誤。 您只需將圖像重新上傳到您的網站,然後將鏈接複製並粘貼到此處即可。

404錯誤頁面

要上傳圖像,請轉到媒體 >> 添加新的。 之後,單擊選擇文件,然後選擇圖像文件。 上傳完成後,單擊將 URL 複製到剪貼板按鈕。

上傳圖片然後復製到url

現在返回定制器頁面,將損壞的圖片鏈接替換為您剛剛上傳的鏈接。 最後,單擊發布以保存您的更改。

替換損壞的圖像鏈接,然後單擊發布

交叉檢查文件名

這是圖像加載問題的常見原因。 確保圖像的拼寫與媒體庫中的拼寫相同。 錯誤也可能只是不同的特殊字符。 鍵入下劃線 (_) 而不是破折號 (-) 可能會導致圖像損壞。

要解決此問題,您需要將帖子或頁面上的文件名與媒體庫中的原始圖像進行比較。 為此,請登錄您的 WordPress 儀表板,然後轉到Media >> Library 。

WordPress 媒體庫

現在,使用搜索框查找要比較的圖像。 之後,將鼠標懸停在圖像上,然後選擇View 。

在地址欄上,您將看到圖像的路徑。 突出顯示的部分是圖像的名稱,如下所示。

圖片文件路徑

現在轉到帶有損壞圖像的帖子並驗證文件名。 為此,請在瀏覽器上打開頁面,然後右鍵單擊損壞的圖像並選擇Open image in new tab 。

選擇在新標籤頁中打開圖片

如果兩個文件名之間存在差異,則可能是圖像未顯示的原因。 您最終會看到 404 not found 錯誤。

404 未找到錯誤

要解決此問題,您需要使用損壞的圖像編輯帖子並將錯誤的文件名替換為媒體庫中的文件名。

替換錯誤的文件名

更正文件名後,您應該會看到帖子編輯器上顯示的圖像。 如果沒有,您可以重新上傳圖片並將其添加到您的帖子中。 確保更新帖子以保存更改。

文件擴展名不正確

您還應該檢查文件擴展名。 有時,文件名可能拼寫正確,但文件擴展名可能不正確。 例如,您可以將圖像上傳為 .jpg 文件,但在代碼中,它是 .png 擴展名。 這可能會導致問題。

“jpg”和“jpeg”圖像擴展名出現另一個常見問題。 儘管這兩種格式相同,但如果將一種格式換成另一種格式,您可能會遇到損壞的圖像錯誤。

使用相對文件路徑

相對路徑鏈接到與主頁 URL 相關的文件。 在WordPress中,一個相對路徑取出域名,並且只使用域後面的路徑。

因此,在“src”屬性中,源不是“https://example.com/wp-content/uploads/image.png” ,而是“/wp-content/uploads/image.png” 。 並且您的圖像將與短鏈接一起正常工作。

使用相對路徑的好處之一是即使您更改了域名,您的圖像也能正常工作。 只要文件仍然託管在同一台服務器上,就會出現這種情況。

您可以使用 Make Paths Relative 插件等插件來強制 WordPress 為您的媒體文件使用相對路徑。 該插件易於安裝和設置。

製作路徑相對插件

安裝並激活插件後,轉到Make Paths Relative >> Settings打開插件設置頁面。

進行路徑相對設置

在這裡,勾選啟用圖像相對路徑的選項,然後單擊保存更改以註冊您的更改。 您現在將能夠使用相對路徑在頁面上顯示圖像。

確保圖像存在

您可能已鏈接到託管在不同網站上的圖像。 如果該站點出現故障或重新定位到其他服務器,則圖像將不復存在。

此外,直接鏈接到另一個站點會增加您從中獲取圖像的站點上的服務器使用率。 如果主機網站禁用熱鏈接,它將阻止您的圖像顯示。

為防止這種情況發生,最好先將每張圖片上傳到您的網站,然後再將它們添加到頁面。 此外,除非您有權使用,否則請避免使用來自第三方網站的圖片。

轉移問題

這不是一個常見的問題,但確實會發生。 有時,您的服務器不堪重負,無法在請求超時之前足夠快地加載所有頁面資產。

它主要發生在廉價的網絡服務器上。 要解決此問題,您需要升級服務器容量或遷移到可靠的 Web 主機。

您還可以使用插件為圖像啟用延遲加載。 當您啟用它時,您的服務器只會在用戶滾動到該部分時加載圖像。 這將釋放您的服務器資源並加快您的網站速度。 您可以在我們的速度優化指南中了解更多信息。

摘要–修復損壞的圖像

網站遇到圖像損壞或丟失的問題並不少見,但這是一個非常嚴重的問題,應該及時處理。 如果您有在線商店,如果用戶在您的商店中看不到產品圖片,您可能會失去潛在客戶。

在本指南中,我們解釋了圖像損壞的一些原因以及如何在 WordPress 網站上修復它們的提示。

修復損壞的圖像是降低網站跳出率的一種方法。 您還需要優化圖像以提高網站的性能。 有關這方面的詳細教程,請查看我們的圖像優化指南。