WordPress(ワードプレス)で製作したホームページの常時SSL化【素人でもできる】

スポンサーリンク
IT
スポンサーリンク

2019年10月3日にGoogleがhttpsとhttpの混在コンテンツをブロックすることについて発表しました。

これは段階的に進められます。

2020年2月リリース予定のChrome81バージョンではhttpsで読み込みに失敗した画像は完全ブロックされるようになります。

 

※画像はGoogle Security Blogより抜粋

 

2020年2月と言ったら、もうすぐですね。

そこで、最後まで手を付けていなかったhttpで運用しているホームページをhttpsしました。

慣れていない人でも一時間ぐらいでできます。
素人でもできるように具体的な方法と手順を以下に説明します。

HPの常時SSL設定をするとき、最初にすること

バックアップを取ります。
何かあったとき、すぐに元の状態に戻せます。

事前準備:FTPクライアントアプリを手に入れる

バックアップには、FTPのソフトでサーバーに接続して、ワードプレスで作ったHPのデータ全てを自分のパソコンにダウンロードします。

よく使われるのは「FFFTP」か「FileZilla」です。

僕は「FileZilla」をお勧めします

「FFFTP」よりも圧倒的に速く、エラーが少ないです。

探すのが面倒だと思いますので、ここにリンクを貼っておきます。
どちらも無料です。

・FFFTP(窓の杜
・FileZilla(FileZilla

FileZillaでさくらインターネットやエックスサーバーのサーバーに接続

接続のために必要なサーバー情報を確認してメモします。

1.サーバーホスト名
2.ユーサー名
3.パスワード

Fizillaを起動させるとウィンドウが開きます。

FileZilla起動画面

左上のファイルからタブからサイトマネージャーを選択するとこのようなウィンドウが開きます。
ここに先程確認した3つの情報を入力して、接続ボタンを押します。

FileZilla site manager

右の窓にサーバーにアップロードされているワードプレスのファイルが表示されるので、それを丸ごと左側の窓(事前に自分パソコン内のコピー先フォルダを作っておく)にドラッグ&ドロップすればOKです。

SSL化のワードプレスプラグインを無効にする

ワードプレスのプラグインを使ってSSL化している場合はこれらを無効化します。

サーバーのSSL設定をする

XSERVERやさくらインターネットなどでは無料SSLを提供しています。
自分が使用している各社の手順に従ってSSL設定をします。

検索が面倒だと思いますのでここでもリンクを付けておきます。

内部リンクと外部ファイルのパスを書き換える

自分の書いた記事にあるワードプレスの内部リンクをhttp→httpsに書き換えます

一つ一つ書き換えるのは大変なので、テーマが格納されているフォルダを対象にgrep置換をするとあっという間に終わります。

サクラエディタや秀丸などでgrep置換できます。

ここでも同じく、入手先リンクを付けておきます。

外部ファイルのパスもhttp→httpsに書き換えます

jQuery等々の外部ファイルのパスをhttpsに書き換えます。

大量にある場合は関数を使って取得出力します。
こちらを参考にしてください。初心者にはちょっと難しいかもしれません。

jQuerytって何?と思った方は無視しても良いと思います。
多分、ご自身で使っていないと思うので。

ワードプレスのエディタで記述した内部リンクのパスを書き換えます

プラグインを使うと便利です。

1.Search Regexをインストール
2.ツールからSearch Regexを選択
3.Search patternに「http://自分のドメイン」を入力
4.Replace patternに「https://自分のドメイン」を入力
5.Replaceボタンをクリック(置換前後のソースコードを確認)
6.Replace & Saveをクリック(置換が反映)

ワードプレスの設定メニューにあるURLをhttpsに変更します

1.「設定」→「一般」を選択
2.「WordPress アドレス (URL)」と「サイトアドレス」をhttp→httpsに書き換える。
3.「変更を保存」クリック

.htaccessにリダイレクト処理を記述する

「.htaccess」ファイルにhttpsへの301リダイレクト処理を追記します。

追記の位置は「#BEGIN WordPress」の上です。
一行空けてその上です。

位置を間違えるとリダイレクトしません。

コピー&ペーストできるようにテキストでも書いておきます。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

リダイレクトの確認をします

http→httpsにリダイレクトされるか確認です。
全てのページがリダイレクトされるか確認します。

ミスがあると、TOPページだけはリダイレクトされて、下層ページはされない、ということもあります。

SSL化できないときは混在コンテンツ(mixed contents)のチェックをします

httpsのみ場合は、ブラウザのURL窓の頭にFirefoxもChromeも「鍵マーク」が表示されます。

httpとhttpsが混在している場合は、「鍵マークが表示されない」または「鍵マーク+警告マーク」が表示されます。

混在のあるページでhttpを探しあてます

ChromeやFirefoxで「http」と「https」が混在しているページを表示させます。

次のキーを押します。

Windows:「F12」
Mac:「Command + Option + I」
Linux:「Ctrl + Shift + I」

 

するとブラウザウィンドウの右側または下に窓が開きます。
画像はFirefoxです。

Firefoxなら「コンソール」、Chromeなら「Console」をクリックします。 表示されている内容を確認します

Firefoxの場合は「混在アクティブコンテンツ」を見ると、httpで始まるURLが書かれているので、それが書かれているファイルを修正します。

Chromeの場合は「Mixed Content」を見ると、httpで始まるURLが書かれているので、それが書かれているファイルを修正します。

私は以上の手順でいくつかのサイトのSSL化に成功しました。
大体のケースでは以上の手順を踏めOKです。

基本は「http→httpsに変える」です。

上手く完全SSL化できない場合は、httpが何処に残っているのかを突き止めましょう。