• 跳至主要導覽
  • Skip to main content
  • 跳至主要資訊欄

免費資源網路社群

免費資源指南,每日網路資訊與科技新知

  • 免費軟體
    • Mac
    • VPN
    • 瀏覽器外掛
      • Chrome
      • Firefox
      • Safari
    • 防毒軟體
    • 系統工具
    • 圖片處理
    • 文字編輯
  • APP
    • iOS
    • Android
  • 線上工具
    • 雲端掃毒
    • 線上翻譯
    • 線上轉檔
    • 縮網址
    • 產生器
    • Proxy
  • 免費空間
    • 網路硬碟
    • 圖片空間
    • 影片空間
    • 網站空間
  • 熱門主題
    • YouTube
    • Facebook
    • Dropbox
    • LINE
    • 字型下載
    • 免費圖庫
    • 限時免費
  • 網路科技
    • 個人服務
    • 實用教學
    • 免費桌布
    • 資料查詢
  • 架站資源
    • WordPress
    • DNS
    • 素材模版
    • 免費圖示
    • 搜尋引擎最佳化
    • 網站監測
  • 編輯精選
首頁 / 雜七雜八 / 實用教學 / 在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學

在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學

在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學

本文參考資料為 Moving to HTTPS on WordPress, 原作者 Chris Coyier。

如果你有注意,從昨天開始,免費資源網路社群網站鏈結已經更新,改採 HTTPS 也就是俗稱的安全通訊協定(Secure Sockets Layer,簡稱 SSL),在網址列旁邊會顯示一個安全鎖頭小圖示,目的在於提高使用者瀏覽網站的安全性,在伺服器與用戶端傳送內容時,即使封包被擷取,也無法取得傳輸的內容。此外,透過一些公眾 WiFi 連線時,可能會在瀏覽網頁時置入特定的廣告代碼,使用 HTTPS 可避免這些問題發生。

另一方面,Google 去年公告將安全列為搜尋排名演算法的指標,以確保使用者在搜尋結果取得的都是安全鏈結。如果你有在自己網站、部落格連結本站,也別忘記更新一下免費資源網路社群的鏈結,即使舊鏈結都會自動重新導向至新鏈結。

在計畫更新網站鏈結前,我做了不少準備,還好在國外網站 CSS-Tricks 找到一篇完整教學,讓我在進行時減少可能出錯或發生問題的機會。特別利用這篇文章來紀錄如何在 WordPress 設定 HTTPS ,使網站可強制使用 SSL 安全加密協定。

若你本身有在維護 WordPress 網站,也打算讓網站走向 HTTPS 化,可參考本的操作設定步驟,就能用最短、最無痛的方式更新,轉換到新的安全協定。

一、取得 SSL 安全憑證

這是必要且最重要的步驟,就是在你的伺服器或虛擬主機安裝 SSL 安全憑證。購買方式很多,在這裡就不多做贅述。你可以從你的主機提供商獲取相關資訊,或者網路上也有不少販售 SSL 憑證的公司,價格都不一定,可從有折扣、價格較低的管道購得。

免費資源網路社群目前是使用由 CloudFlare 提供的免費 SSL 憑證,搭配主機端的 SSL 來做嚴格完整的 SSL(Full SSL),比較特別的是 CloudFlare 內建許多可選擇的 SSL 選項,即使你的主機端沒有 SSL 憑證,依然可利用它提供的 Flexible SSL 獲得加密傳輸的效果。這部分以前是必須付費的,但現在已經對免費帳戶開放。

當 SSL 憑證安裝完成後,你應該就能使用 HTTP 和 HTTPS 兩種協定來瀏覽網站。如果在連線時跳出錯誤或是警告訊息,有可能是憑證沒有正確安裝所致。

二、從控制台開始設定

在 WordPress 部分,建議從控制台的 HTTPS 開始設定(同時也測試一下是否有問題),設定方式很簡單,可以參考 Administration Over SSL 說明。這裡應該要能正常運作,而且不該出現任何錯誤(這裡的錯誤是指當網頁存在「混合內容」,也就是 HTTP 和 HTTPS 共存的情形,會跳出錯誤訊息)。

要讓 WordPress 控制台強制使用 HTTPS,只要在你 WordPress 根目錄的 wp-config.php 設定檔內置入以下程式碼:

define('FORCE_SSL_ADMIN', true);

記得先確保 WordPress 控制台能在 HTTPS 協定下正常運作,開啟 https://yoursite.com/wp-admin/ 測試。如果無法正確開啟,或者出現錯誤,這可能是你的 SSL 沒有正常運作。若持續錯誤,可以先把上面的程式碼移除。

若是正常運作,你會看到安全連線:

在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學

三、試著讓前台的單一頁面可以運作

下個步驟是要讓你的前台可以使用 HTTPS。要一次完成設定是非常困難的,我們可以循序漸進,先從一個目標頁面來測試、調整。對我來說,我任意挑選其中一篇文章來測試,或者你也可以選擇在註冊頁面進行,因為這頁面可能會需要更高的安全性。

有個很實用的外掛「WordPress HTTPS (SSL)」可以幫助你。透過這個外掛,你就能在文章或頁面編輯畫面,強制讓它透過 HTTPS 進行連線,這樣就能測試 HTTPS 能否在前台正常運作。

在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學

四、處理混合式內容警告

接下來要做的,就是處理下圖這個問題:

在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學

這就像是「嘿!使用 HTTPS 很不錯,但你還無法獲得綠色的鎖頭圖示!」。

如果你開啟開發人員工具的 Console,你可能會看到如下圖訊息:

在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學

在這裡,因為有些圖片使用 CodePen 內嵌語法,網址列為 http 所致。

但它有可能是任何東西,HTTP <script> s、HTTP CSS <link> s、HTTP <iframe> s。任何的 HTTP 請求在 HTTPS 頁面都可能觸發錯誤。

你必須把這些鏈結全部修復。

五、使用相對 URLs 協議!

你知道,這些鏈結是以 // 開頭,像是:

<img src="//example.com/image.jpg" alt="image">

這些都是你的朋友。它們會依照當前頁面的協定來載入該資源。或者鏈結是相對鏈結也是可以的,像是:

<img src="/images/image.jpg" alt="image">

我最後在自訂欄位的地方找到這些錯誤、必須修正的鏈結(編按:一般使用者不一定會用到自訂欄位功能,不過我們可以繼續看下去):

在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學

六、艱難的問題:在舊內容裡更新圖片鏈結

在網站上可能有成千上萬個頁面或文章,這些內容裡又有許多圖片。現在我們遇到的問題是:這些圖片使用 HTTP 鏈結,要如何進行更新?

我沒有使用 WordPress filter 來更新這些鏈結—我就只是想解決這些問題。首先,我們必須在資料庫執行一些 SQL 語法來修復鏈結,主要是把圖片 src 鏈結修改成相對鏈結:

在執行 SQL 語法前,請務必先備份你的資料庫,然後在本機測試一次:

UPDATE wp_posts 
SET post_content = ( Replace (post_content, 'src="http://', 'src="//') )
WHERE Instr(post_content, 'jpeg') > 0 
 OR Instr(post_content, 'jpg') > 0 
 OR Instr(post_content, 'gif') > 0 
 OR Instr(post_content, 'png') > 0;

然後再執行另一個解決單引號鏈結的語法:

UPDATE wp_posts 
SET post_content = ( Replace (post_content, "src='http://", "src='//") )
WHERE Instr(post_content, 'jpeg') > 0 
 OR Instr(post_content, 'jpg') > 0 
 OR Instr(post_content, 'gif') > 0 
 OR Instr(post_content, 'png') > 0;

我們甚至修復了在自訂欄位遇到的鏈結問題(如果你沒用過自訂欄位功能,那麼就無須執行這段程式碼):

UPDATE wp_postmeta 
SET meta_value=(REPLACE (meta_value, 'iframe src="http://','iframe src="//'));

七、確認新的圖片使用相對協定

在把舊的內容改好後,我們也要確保新的內容不會發生問題。這意味著我們必須修改媒體上傳、插入鏈結的網址協定,使它成為相對鏈結。幸運的是我已經插入自訂的 <figure> 標籤,所以這只是一個簡單的調整。把以下的程式碼貼到 functions.php ,我想你就可以達成我們要的功能:

class CTF_Insert_Figure {
/**
 * Initialize the class
 */
 public function __construct() {
 add_filter( 'image_send_to_editor', array( $this, 'insert_figure' ), 10, 9 );
 }
/**
* Insert the figure tag to attched images in posts
*
* @since 1.0.0
* @access public
* @return string return custom output for inserted images in posts
*/
public function insert_figure($html, $id, $caption, $title, $align, $url) {
// remove protocol
$url = str_replace(array('http://','https://'), '//', $url);
$html5 = "<figure id='post-$id' class='align-$align media-$id'>";
$html5 .= "<img src='$url' alt='$title' />";
if ($caption) {
$html5 .= "<figcaption>$caption</figcaption>";
}
$html5 .= "</figure>";
return $html5;
}
}

八、你的 CDN 也需要 SSL

如果你使用 CDN 服務(像是 MaxCDN),這表示 CDN 使用完全不同的伺服器和網址,它也需要透過 SSL 來傳輸文件。幸運的是 MaxCDN 可以做到。

若你還沒開始使用 CDN ,可參考我之前介紹的「Photon 免費 CDN 圖片分流、加速服務,每個 WordPress 用戶都該開啟的外掛」,這個由 Automattic 提供的免費 CDN 服務可以在 SSL 下運作。

九、開始在所有地方使用 HTTPS

在根目錄的 .htaccess 檔案放入以下程式碼:

# Force HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

當你一旦完成後,就可以移除之前安裝的 WordPress HTTPS (SSL) 外掛,並將 wp-config.php 內剛才加入的程式碼移除,對目前來說那些是多餘的。

此外,也別忘了在「設定 > 一般」內更新 WordPress 位址以及網站位址,加入 https://,讓 WordPress 內的所有鏈結都轉換成新的 HTTPS 網址。

在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學

十、持續調整,修復問題

在轉換為 HTTPS 後,持續檢查其他頁面是否有混合內容警告訊息。你只需要繼續觀察、調整,把這些問題解決即可。

祝你好運!

分類:實用教學, 站長工具, 開源程式 標籤:HTTPS, SEO, SSL, WordPress, WordPress SSL, WP, 加密, 安全相關, 安全防護, 搜尋引擎優化, 搜尋引擎最佳化, 架站教學, 部落格

Avatar for Pseric

關於 Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

主要側邊欄

使用電子郵件訂閱網站

輸入你的電子郵件地址訂閱網站新文章,使用電子郵件接收通知。

站內搜尋

最新文章

  • Hexometer Website Analyzer 分析網站使用那些第三方服務或工具(Chrome、Firefox)
  • Online Video Cutter 線上影片裁切工具,集合旋轉方向和調整畫質功能
  • 換新手機如何備份和轉移 Google Authenticator 兩步驟驗證資料?
  • Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌(Chrome 擴充功能)
  • Go64 升級 macOS 10.15 前幫你檢查電腦上還有那些 32 位元應用程式
  • Headset 跨平台音樂播放器,全天免費聽各種類型音樂
  • UNIQLO 商品價格追蹤、比價網站,找出歷史高低價差變化
  • Hide Likes Everywhere 隱藏臉書、IG 按讚愛心數,回歸最真實的分享(Chrome、Firefox)

精選主題

  • 思源黑體:Adobe 與 Google 合作開發開放原始碼中文字型
  • 思源宋體 Noto Serif CJK 字型免費下載!Google、Adobe 再次攜手推出開放原始碼字體
  • Apple Music 登陸台灣!免費三個月試用音樂串流服務,不聽音樂要幹嘛?
  • [下載] WinRAR 解壓縮軟體正式推出中文免費版,別再用盜版破解版了!
  • Mipony 白馬下載器:網路下載必裝!支援數百免空可突破下載限制
  • Outline 來自 Google 全自動自架 VPN 安裝工具,突破中國網路封鎖限制
  • Cloudflare 1.1.1.1 免費公眾 DNS 服務,創造更快速、安全隱私的網路環境
  • Spotify 免費聆聽 4000 萬首歌,音樂串流應用 iOS、Android 版下載
  • Kaspersky Free 2019 卡巴斯基最新免費防毒軟體下載,改善速度、安全性和掃描技術
  • Peggo 終止服務!5 個 YouTube 轉檔下載替代方案推薦
  • 日本亞馬遜 AmazonGlobal 線上購物直送台灣,免消費稅免找代購
  • 台北黑體 Taipei Sans TC 繁體中文字型免費下載,更適合印刷的字體風格
  • PS4 Pro 更換 SSD 教學,也許最大的敵人不是魔王而是讀取速度太慢
  • 中華郵政 i郵箱初體驗,24 小時自助郵局寄件取件超方便
  • YouTube Music 免費音樂串流服務正式登場,升級 Premium 零廣告體驗

贊助商連結

實用教學

  • 46個免費圖庫網站總彙整
  • 15個免費下載高解析度圖片最佳圖庫
  • 下載高畫質相片素材的13個免費圖庫資源精選
  • 12個你應該知道的中英文假字、文章產生器
  • 20個免費下載創用 CC 授權音樂的網站彙整
  • 40個設計師必備免費資源超推懶人包
  • Google 商家被留負評該檢舉刪除?或許業主更該做的是回應疑慮
  • Facebook 全新下載資料副本功能,一次備份所有臉書記錄匯出
  • Instagram 資料下載讓使用者完整備份相片影片、留言、訊息等個人記錄
  • 7 個線上接收手機簡訊驗證碼的免費網路服務整理
  • 如何重灌 Mac 電腦?重新安裝 macOS 自動更新為最新版本教學
  • PayPal 兩步驟驗證設定教學,以手機簡訊或應用程式降低被盜用風險
  • 以 YubiKey 實體安全金鑰設定 Google 兩步驟驗證教學

WordPress 架站資源

  • 搬家自架 WordPress 推薦的五個虛擬主機服務
  • 架站更上一層樓,我推薦的五個虛擬專屬主機(VPS)服務
  • WordPress Hosting 架站空間精選,最多人推薦的五個國外虛擬主機方案
  • 如何挑選一個適合你的虛擬主機服務?我參考的七個比較項目
  • 自架 WordPress 虛擬主機租用教學,將網誌備份匯出、匯入到新家
  • 在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學
  • 殺手級 WordPress 體檢項目:101 個建立新網站的超簡易捷徑!
  • Cloudflare 架站者必備免費 CDN、DNS 託管服務設定教學
  • 台灣用戶也能在 Google Domains 註冊購買網域名稱,詳細申請設定教學
  • 16 個免費網站速度測試工具推薦!網頁效能評比,搜尋引擎最佳化必備
  • 亞馬遜 VPS 服務 Amazon Lightsail 搭配 ServerPilot 快速架設 WordPress 教學
  • 165 個 WordPress 官方開發佈景主題設計 Jetpack 使用者免費下載
  • 使用 Google Cloud Platform 雲端主機免費版架設 WordPress 教學
  • 使用 Cloudways 架設 WordPress 網站教學,快速部屬最佳化環境
  • RunCloud 佈署最佳化主機環境,整合 DigitalOcean 架設 WordPress 教學
  • 使用 SiteGround 虛擬主機一鍵快速安裝 WordPress 教學
  • Cloudflare 變身域名註冊商,以最低價續費含免費 SSL、WHOIS 隱藏功能
  • FastComet 評價極高的虛擬主機推薦,一鍵安裝 WordPress 教學

贊助商連結

Powered by Cloudways
We Love Jetpack!
Stock Photos, Vectors and Royalty Free Images from 123RF

授權方式

免費資源網路社群由 Pseric 製作,以創用 CC 姓名標示-非商業性-禁止改作 4.0 國際授權條款釋出。

  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram
  • RSS

免費資源網路社群使用 WordPress 建置,最高級的語意化個人出版平台・關於本站・隱私權政策