如何修復 WordPress 中的混合內容問題

已發表: 2022-07-06

您是否在 WordPress 網站上遇到混合內容錯誤? 該博客向您展示瞭如何輕鬆解決 WordPress 網站上的混合內容問題。

現在必須為您的網站擁有 SSL 證書。 安全掛鎖符號不僅可以幫助您獲得客戶的信任,還可以讓您在搜索引擎上獲得更好的位置。 不幸的是,在從 HTTP 遷移到 HTTPS 期間,您可能會遇到幾個問題。 例如“混合內容”、“不安全內容”或已被阻止的顯示腳本。 當您的網頁的某些特定屬性未通過 SSL 安全加載時,就會出現這些問題。

為了幫助您,今天我們將展示如何查找哪些資源未通過 HTTPS 加載,以及如何為 WordPress 網站和 Elementor 解決此問題。

為什麼要等? 讓我們從基本的什麼是混合內容錯誤開始。

什麼是 WordPress 中的混合內容錯誤

混合內容錯誤是 WordPress 上的一個常見問題,這是由於在您的網站上加密它時不正確的 SSL 設置而發生的。

混合內容錯誤不會影響您的網站功能。 但是會對您網站的 SEO 性能和用戶體驗產生負面影響。

擁有一個安全的網站非常重要,因為用戶在使用您的網站時會感到安全地共享他們的機密信息,例如電子郵件、密碼等。

加密 SSL 證書會在瀏覽器中您網站的 URL 旁邊添加一個掛鎖圖標。 這告訴用戶您的網站可以安全使用。

SSL Green PadlockIcon
具有 SSL 證書的網站

當您向 WordPress 網站添加 SSL 證書並且您的網站內容同時在HTTPHTTPS連接上運行時,會發生混合內容錯誤。 這意味著在 SSL 加密之後,您的一些相同的網站資源同時加載到安全和不安全的連接上。 檢查以下示例-

  • https://yourwebsite.com/image.jpg (安全)
  • (http://yourwebsite.com/image.jpg) (不安全)

甚至搜索引擎巨頭 Google 也建議在您的 WordPress 網站上添加 SSL,否則它會將您的網站視為不安全的。 這是一個非 SSL 網站的示例。

Without SSL Website
非 SSL 網站

大多數 WordPress 託管服務提供商在其軟件包中提供免費的 SSL 功能。 如果您的託管公司不提供它,您可以使用像真正簡單的 SSL 這樣的插件來為您的網站添加免費的 SSL 證書。

如何在您的 WordPress 網站中查找混合內容

您可以按照以下步驟檢查您網站的混合內容:

第一步:您可以通過轉至檢查 (Ctrl+Shift+I) (對於Windows )或(Cmd+Alt+I) (對於macOS)來檢查網站的混合內容錯誤。

Click on the Inspect Button
谷歌瀏覽器檢查選項

然後您需要使用Google Chrome瀏覽器轉到控制台選項卡。 然後您將獲得如下圖所示的界面。

Check Mixed content error
控制台區域顯示混合內容

第二步:您可以在Chrome DevTools安全選項卡中檢查混合內容警告。

Go to Chrome DevTools Security Tab
Chrome 開發者工具

第三步:同樣可以在 Chrome DevTools Network區域查看混合內容錯誤。

如何解決您網站中的混合內容問題

現在我們將向您展示如何修復 WordPress 網站上的混合內容錯誤。

讓我們開始吧:

您可以通過安裝 SSL Insecure Content Fixer 插件來簡單地修復您網站上的混合內容警告。 查看指南以了解如何安裝 WordPress 插件。

安裝並激活插件後,您需要進入Settings->SSL Insecure Content區域。

Go to Settings-SSL Insecure Content
在設置區域下找到 SSL 不安全內容選項

您將獲得修復混合網站內容的所有基本設置。 在下面的部分中,我們將解釋設置。

簡單的
這是修復混合內容的最快和最推薦的方法。 此選項可修復您的網站混合內容的腳本,如 javascript、樣式表 CSS 和媒體文件(如圖像和視頻)。

內容
如果簡單方法不能修復您的混合內容,您可以選擇內容選項。 此方法解析了您的內部WordPress 內容小部件文本內容。 這意味著您在網站內容中添加的鏈接(如錨點、段落)將使用 HTTPS 進行更新。

小部件
您使用了指向網站小部件的簡碼或內部鏈接,並且在激活 SSL 後仍然使用 HTTP 進行統計。 通過啟用此選項,您可以將所有URLHTTP轉換為HTTPS加載到您的網站Widgets中。

Fix Insecure Content
SSL 不安全內容設置區域

捕獲
頁眉和頁腳是網站中最重要的部分,我們在其中保留了許多腳本、樣式表和其他鏈接。 當我們激活 SSL 時,頁眉和頁腳中的許多鏈接保持不變。 這意味著這些鏈接加載了 HTTP 連接。 如果您選中 Capture 方法,則您的網站HeaderFooter通過將其替換為HTTPS來混合內容。

全部捕獲
如果上述所有方法都不能解決您的問題,您可以嘗試捕獲全部選項。 此方法強制修復您所有網站的混合內容。

您還將在插件設置區域中獲得一些其他設置。

如果您想修復特定插件和主題的混合內容,您可以選擇修復特定插件和主題選項。

如果您想將指向外部站點的網站內容保留為HTTP ,您可以選擇忽略外部站點選項。

完成混合內容修復級別後,您可以定義HTTPS 檢測。 通過此設置,您可以選擇如何檢測 WordPress 網站上的 HTTPS 內容。 推薦使用默認的標準WordPress 功能。 所以你不需要改變它。

Fix other insecure content
保存 SSL 不安全內容設置

最後,您必須單擊“保存更改”按鈕以保存設置。

獎勵 1:修復 Elementor 網站的混合內容錯誤

如果您的網站是使用 WordPress 和 Elementor 構建的,並且需要修復網站上的混合內容,您可以按照以下步驟操作。

首先,您需要訪問Elementor->Tools區域。

Elementor Tools
查找 Elementor 工具選項

接下來,您將獲得 Elementor 工具設置。 只需單擊替換 URL 選項卡。 然後將您網站的舊 URL (http://yourwebsite.com/)(https://yourwebsite.com/)插入更新站點地址 (URL)區域。

最後,您需要點擊Replace URL按鈕將您的所有網站 URL 從HTTP替換為HTTPS

Elementor Replace URL Settings
替換網址

而已。

還有另一種解決混合內容問題的方法。 您需要聯繫您的託管服務提供商來解決此錯誤。 如果您的 SSL 加密錯誤,那麼您的大部分網站混合內容警告將得到解決。 然後您可以按照上述方法修復其他混合內容問題。

獎勵 2:一些混合內容類型的示例

由於 SSL 設置錯誤,您的網站上有許多類型的內容會混合在一起。 以下是值得注意的:

樣式表:您的網站在構建時使用了幾種類型的樣式表。 這是一個非常常見的內容,在激活 SSL 後會混合。 檢查下圖以了解它。

Mixed Content in the Stylesheet
樣式表中的混合內容

腳本:與樣式表一樣,您的網站腳本文件將面臨混合內容錯誤。 這是一個例子。

Mixed Script files
腳本中的混合內容

媒體文件:從 HTPP 遷移到 HTTPS 後,您的許多網站媒體文件(如圖像、橫幅等)仍然通過 HTTP 連接加載。 下面是一個算作混合內容的硬編碼圖像文件示例。

Image Mixed Content
將內容混合到硬編碼的圖像中

小部件:在 WordPress 網站中,小部件是我們用來顯示靜態和可鏈接內容的基本功能。 因此,小部件區域中總是有混合內容的機會。

主題和插件:有時開發人員錯誤地使用 HTTP,如白色開發主題或插件。 因此,即使您加密了 SSL 證書,這些 HTTP 鏈接仍然保留在您的網站上。 所以你需要小心地修復這個混合內容,稍後在我們的教程部分你將學習如何處理這個問題。

結論

在上述指南中,我們分享了有關如何修復 WordPress 網站上的混合內容問題的詳細指南。 我們還討論了什麼是混合內容錯誤以及如何解決 Elementor 網站的混合內容問題。

如果您仍然需要更多信息或對此主題有任何疑問,可以對我們發表評論。

此外,查看此博客並了解如何修復您的 WordPress 網站的不加載問題。

我們要求您連接您的 Facebook 和 Twitter 頻道並訂閱我們的時事通訊。

訂閱我們的新聞

獲取有關 Elementor 的最新消息和更新