[WordPress] HTTP 與 HTTPS 協定兼容的設定

本篇文章更新時間：2019/02/16
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣贊助支持。

Beginning in January 2017 (Chrome 56), we’ll mark HTTP pages that collect passwords or credit cards as non-secure, as part of a long-term plan to mark all HTTP sites as non-secure.

以上引用自Google Security Blog

就是大家（！？）都知道的明年（2017）一月起，Chrome 將要把沒有加密連線的網站打上「非安全連線」的標籤，想必應該會有一票轉換潮。

但對正在進行開發中或是規劃兩種協定並行的網站要怎做？

WordPress 在一般系統設定中會認預設的 Host 網址，不過內容部分都是直接插入上傳資源的完整網址（包含協定、網域名稱、資源請求路徑），這對兩種協定的轉換都有問題，必須選擇一邊統一處理，或是要轉移上線時遍歷一次資料庫抓字串替換。

比較彈性的做法會是使用「Relative Protocol」，這要將所見即所得的內容編輯器中「新增媒體」功能做前處理。

作法如下：

在主題 functions.php 中，加上下面程式碼

add_action( 'media_send_to_editor', 'mxp_before_insert_media');

function mxp_before_insert_media($html, $id, $attachment) {
    // remove protocol
    $html = str_replace(array('http://','https://'), '//', $html);
    return $html;
}

如此一來新增的媒體檔案路徑就變成相對協定（Relative Protocol）啦～

CSS-Tricks也有為此寫一篇文介紹，很詳細，值得一讀！（本篇文章也有 @Pseric 翻譯的在 WordPress 設定 HTTPS，強制使用 SSL 安全加密協定教學版本，感謝他努力付出！）

會再補這篇純粹是因為文中那段使用的 filter （image_send_to_editor） 用途僅只有圖片，改使用 media_send_to_editor 兼顧輸入的其他多媒體了。

原本以為是image_send_to_editor被改了無法正確呼叫，後續追查才知道是執行時的權重影響了資料，但也剛好看到這方法 wp_ajax_send_attachment_to_editor 中有定義下方的事件 media_send_to_editor可以針對全部多媒體。（WordPress 4.7 後還增加對 PDF 的預覽）

有需要就改用上面新版的吧！

後記

論有無此必要，我個人也是取向統一一種協定（HTTPS）就好，但規劃任何路徑資源本來就是要謹慎一點，留點彈性囉！