Let's Encryptの導入を行いフルhttps化する準備ができましたので、この度https化しました。
WordPress+httpsで検索すると色々見つかると思うのですが、このサイトで試した手順を備忘録も兼ねて残したいと思います。
サーバー証明書の導入
Let's Encryptを使いました。
詳しくはサイトにLet's Encryptを導入しましたをご参照ください。
WordPressのhttps化の課題
サーバー証明書を導入することでhttpsでアクセスできるようになるのですが、その場合だと不十分な場合があります。
例えばchromeでサイトにアクセスすると以下のようになった場合対応が必要になります。
正しくhttps化できている場合は以下のようになります。
原因としてはhttps配下からhttpのコンテンツを呼び出そうとすると上記のようになります。
例えば以下のようなhtmlタグを入力していた場合が該当します。
[html]
<img src="http://www.beeete2.com/test.jpg">
<script src="http://www.beeete2.com/test.js"></srcipt>
<iframe src="http://www.beeete2.com/test.html"></iframe>
[/html]
今回はこれらを修正してWordPressでhttps化することを目標にします。
サイトの設定を修正する
管理画面のWordPressの設定＞一般内のサイトのURLとWordPressのURLをhttps後のURLに変更します。
投稿のhttpを置換する
投稿内部で使用している画像のパスをhttpからhttpsに置換します。
通常WordPressでメディアを追加等で画像を追加するとコンテンツにimgタグが追加されsrcはhttpになっています。
これをhttpsに置換します。
最初データベースを直接操作してupdateしようと思ったのですが調べたところプラグインで対応できそうだったのでプラグインをインストールしました。
Search Regexというプラグインです。
インストールすると管理画面の左メニューのツールにSearch Regexが追加されるのでクリックします。
置換前と置換後の文字列を入力してReplaceボタンをクリックします。
そうすると置換後のプレビューができるのでReplace & Saveボタンをクリックすることで変更が保存されます。
画面にも書いてありますが、取り消しができないので操作は慎重にバックアップを取ってから行ったほうが安心だと思います。
その他を置換する
あとはテーマ内で使われているhttpを置換する必要があります。
この時点でサイトのURLと投稿内の画像のURLがhttps化されていると思いますので、ページを開いてみてどこで問題が起きているか把握することにします。
Chrome等でデベロッパーツール(Windowsの場合F12)を開いてページを開きます。
問題があったらコンソールに警告が表示されますので、それを修正します。
使っているテーマやプラグインによると思いますがSNS関連で問題が発生しました。
連携するSNSサイトがhttpsに対応していればよいですが対応していない場合はテーマ・プラグインの利用を検討する必要があるかと思います。
httpへのアクセスをhttpsへリダイレクトする
これは必須ではないのですが、このサイトでは実施しました。
今の状態だとhttpでアクセスしても投稿にはアクセスできるのですがhttps化したのでhttpでアクセスがあった場合はhttpsへ自動的にリダイレクトするように設定します。
[bash]
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^/blog/(.*)$ https://%{HTTP_HOST}/blog/$1 [R=301,L]
[/bash]
まとめ
今回始めてWordPressのサイトをhttps化しました。
もしかしたら、対応に不完全な箇所等あるかもしれないので、しばらく様子を見ながら修正していきたいと思います。