WordPressを常時SSL化 httpからhttpsへの作業手順まとめ

WordPressを常時SSL化

最近では常時SSL化(HTTPS化)に対応している
サイトやブログの数がかなり増えてきました。

今後も常時SSL化に対応しているサイトはさらに増えていく流れになりますし、
新しくサイトを作る場合も最初から常時SSL化して作る機会が多くなってきます。

ですので、今はまだSSL化していないとしても、
将来的なことを考えるとなるべく早い段階でSSL化しておくべきす。

このブログも非SSLから常時SSLとなるように、
ブログの常時SSL化を実施しました。

この記事では、
そこで実施したブログのSSL化の作業手順の流れを全て解説します。

常時SSL化するブログの環境

今回SSL化したブログはワードプレスで作っています。

ブログのURL:http://www.polyglotconspiracy.net

 

サーバーはXサーバーを使用しています。

Xサーバーでは、独自SSLを無料で使うことができますので、
もしXサーバーを使っていれば、すぐにでも自分のブログをSSL化することができます。

 

Xサーバーでは、他にもブログ運営に役立つ様々な機能が盛り沢山なのでおすすめです。

Xサーバーの評価をこちらにまとめていますので参考にしてください。

アフィリエイトで失敗しないサーバー選び エックスサーバーの評価まとめ

 

XサーバーでのSSLの設定

まずはXサーバーでSSLを使えるように設定します。

これは数ステップのクリックだけで完了しますのですごく簡単です。

 

やり方はこちらで説明しています。

ワードプレスをSSL化(https化)する設定方法

 

XサーバーでのSSLの設定が完了したら、
SSL化されたURL(https://で始まるURL)でアクセスすることできるようなります。

 

ワードプレスのSSLの設定

XサーバーでのSSLの設定が完了したら、
次にワードプレスの設定をしていきます。

 

データベースのバックアップ

ワードプレスのSSLの設定では、
データベースの内容の変更をしますので、
まず予め作業前にデータベースのバックアップを取っておきます。

そうすることでもし何か不具合があっても、
バックアップから元に戻すことができます。

 

データベースのバックアップは
「BackWPup」というプラグインを使うのが簡単です。

ワードプレスの管理ページの左メニューから
「プラグイン」-「新規追加」をクリックします。

 

プラグインの検索

「プラグインの検索」テキストボックスに「BackWPup」と入力します。

 

プラグインのインストール

「BackWPup – WordPress Backup Plugin」が表示されますので、
「今すぐインストール」をクリックします。

 

プラグインの有効化

「有効化」をクリックしてプラグインを有効化します。

 

BackWPup設定

左メニューから「BackWPup」-「ダッシュボード」をクリックします。

 

BackWPup設定2

「データベースのバックアップをダウンロード」をクリックします。

 

ダウンロードが完了すると、
「.sql」という拡張子でバックアップファイルが作成されます。

例)xxxxxx.sql

 

画像リンクやCSSリンクなどリンクテキストを置換する

ブログ内の画像ファイルのリンクパスがhttpから始まるものになっている場合は、
そのリンクパスをhttpsにすべて置き換えていきます。

SSL化されたページ内で、
httpから始まる非SSLのリンクの読み込みがあると
「ページの一部が安全ではない状態」となり、
アドレスバーに鍵マークが表示されない状態になります。

 

【鍵マークのない状態】

鍵マークのない状態

 

【鍵マークのある状態】

鍵マークのある状態

 

リンクパスの置き換えには、
プラグインを使用してデータベースの中の該当データを
一括で置換していきます。

一括置換のプラグインには「Search Regex」が使いやすいです。

 

ワードプレスの管理ページの左メニューから
「プラグイン」-「新規追加」をクリックします。

「プラグインの検索」テキストボックスに「Search Regex」と入力します。

 

Search Regexのインストール

「Search Regex」が表示されますので、
「今すぐインストール」をクリックします。

 

プラグインを有効化

「有効化」をクリックしてプラグインを有効化します。

 

Search Regexの使い方

左メニュの「ツール」-「Search Regex」をクリックします。

 

Search Regexで置換

「Search pattern」に置換対象の文字

「Replace pattern」に置換後の文字

を入力します。

 

ブログ内で使用している画像やCSS、Javascriptなどのファイルを
一括で置換する必要があるので、通常は、

「Search pattern」:SSL化する前のブログのURL

「Replace pattern」:SSL化後のブログのURL

を入力します。

 

SSL化する前のブログのURLは、
ワードプレスの左メニューの「設定」-「一般」をクリックして、

ブログのURL

そこにある「WordPress アドレス (URL)」と「サイトアドレス (URL)」
に入力されているものになります。

 

ブログのURL

例えばこのブログの場合は、

「Search pattern」:http://www.polyglotconspiracy.net

「Replace pattern」:https://www.polyglotconspiracy.net

となります。

 

Search Regexで置換

次に置換する対象のデータを確認するために「Replace」をクリックします。

 

すると置換する対象のデータがズラズラっと一覧されます。

この時点ではまだ一覧されるだけでデータベースの内容は書き換えられないです。

実際に「Search Regex」が置換する箇所が赤字でハイライトされます。

 

置換処理

上が置換前のデータで、
下が置換後のデータになります。

 

一旦、「Search Regex」でデータベースの内容を一括置換してしまうと、
あとからやり直すことができませんので、置換対象となる一覧のチェックは
しっかりとやっておきましょう。

もし置換処理後にやり直したい場合は、
最初に取ったデータベースのバックアップから、
データベスを処理前の状態に復元するしかないです。

 

置換処理を実行

一括置換する内容に問題がなければ、
「Replace & Save」をクリックして置換処理を実行します。

置換処理が完了したら、完了のメッセージが表示されます。

 

外部サイトの画像やアフィリエイト広告画像などを記事内に入れている場合は、
その外部サイトがSSL対応している場合は、それに合わせて画像パスを
httpからhttpsに変更します。

こちらも「Search Regex」を使用すれば、
対象を一括置換できるので便利です。

 

例えば、

対象を一括置換

「Search pattern」:src=”http://

「Replace pattern」:src=”https://

のようにすれば、httpで始まる画像パスをhttpsに一括置換できます。

 

ただし、外部サイトがSSLに対応していない場合は、
置換した画像パス先のファイルはリンク切れになってしまいますの
注意してください。

 

「Replace」をクリックしたあとの一覧で問題ないかをしっかりとチェックします。

一括置換する内容に問題がなければ、
「Replace & Save」をクリックして置換処理を実行します。

 

ワードプレスの一般設定を変更する

次にワードプレスの一般設定で設定しているURLを変更します。

 

一般設定で設定しているURLを変更

ワードプレスの管理ページの左メニュー

「設定」-「一般」

をクリックします。

 

「WordPress アドレス (URL)」「サイトアドレス (URL)」
に入力されているURLをhttpからhttpsに変更します。

 

例えば、このブログの場合はこうなります。

 

【変更前】

URL変更前

 

【変更後】

URL変更後

 

URLを変更したら

「変更を保存」をクリック

「変更を保存」をクリックします。

 

.htaccessにリダイレクト用のコードを記述する

ブログをSSL化したら、SSL化する前のURLに来たアクセスを
すべてSSL化したURLに移る(リダイレクトする)ようにします。

.htaccessファイルを編集するには、
FTPツールを使ってサーバーにログインする必要があります。

FTPツールはいろいろありますが、
おすすめは「FFFTP」というツールです。

 

FFFTPの使い方は、「FFFTP 使い方」で検索すると簡単に見つかりますので、
使い方が分からない場合はチェックしてみてください。

 

.htaccessファイルは、ドキュメントルート以下
(通常は「public_html」以下)にあります。

※サーバーによっては「public_html」ではありません。

 

Xサーバーであれば、「public_html」以下に.htaccessファイルがあります。

ここでは、Xサーバーの場合を例にして説明します。

 

ファイルのダウンロード

FFFTPでサーバーに接続後、
「public_html」以下の.htaccessファイルをダウンロードします。
(ドラッグ&ドロップでダウンロードできます。)

 

ダウンロードしたファイルは、コピーしてバックアップしておきます。

コピーしてバックアップしておくことで、
もし編集したオリジナルの.htaccessファイルの記述に間違えがあって、
ブログの表示に問題が発生しても、バックアップしたファイルの名前を元に戻して、
サーバーにアップロードすることで.htaccessファイルを編集前に状態に戻すことができます。

 

ダウンロードした.htaccessファイルをテキストエディタで開きます。

.htaccessファイルの先頭に下記のコードを貼り付けます。

リダイレクトコード

 

こちらからコードをダウンロードできます。

リダイレクト用のコード

 

,htaccessへのリダイレクト記述

 

その後、ファイルを保存して、
編集した.htaccessファイルをサーバーの元の場所にアップロードして上書きします。

これで、http:// で始まるURL(SSL化前のURL)へのアクセスが、
https:// で始まるURL(SSL化後のURL)にリダイレクトされるようになります。

 

以上で、ブログのSSL化の作業は完了です。

実際にブログを見て問題ないかを確認してみましょう。

 

ブラウザでブログを確認する

まず、SSL化前のURLでアクセスしたら、
SSL化したURLに移るかを確認してみます。

ブラウザのアドレスバーにhttpで始まるURLを入れてエンターを押したら、
httpsで始まるURLに移ればOKです。

 

アドレスバーのSSL化前のURLを入力

↓↓↓

SSL化後のURLに移る

 

SSL化されるとブラウザのアドレスバーに鍵マークが表示されます。

例えば、Firefoxではこのようになります。

FirefoxでのSSL鍵表示

 

画像ファイルやCSS、Javascriptファイルなどで
SSL化されていないファイルを読み込んでしまうと、
このようにページの一部が安全ではない状態となり、
アドレスバーに鍵マークが表示されないです。

SSL化されていないファイルの読み込み

 

その場合は、SSL化されていないファイルのパスを
httpからhttpsに書き換えないといけないですが、
もしそれが外部サイトのファイルで、その外部サイトがSSL化されていない場合は、
ファイルのパスをhttpからhttpsに書き換えてもリンク切れになってしまいます。

 

ですので、そのファイルの読み込み自体を削除するか、
もしくはページの一部が安全ではない状態のままにしておくかになります。

 

ページの一部が安全ではない状態になる場合、
ページ内のどこが原因になっているかは、
ブラウザのデベロッパーツールを使うことで確認できます。

 

開発ツールを表

例えば、Firefoxの場合は、ブラウザ上部のメニュー項目から

「ツール」-「ウェブ開発」-「開発ツールを表示」

をクリックすることでデベロッパーツールが表示されます。

 

「コンソール」タブをクリック

開発ツールが表示されたら、「コンソール」タブをクリックします。

 

SSL化されていないファイルの読み込みが分かる

するとこのようにSSL化されていないファイルの読み込みが分かります。

 

Google Search Console(グーグルサーチコンソール)の再設定

ブログをSSL化するとURLが変更になるため、
Google Search Console への登録を再度設定する必要があります。

Google Search Console への登録方法は、
こちらの記事で解説しています。

Google Search Console(サーチコンソール)の使い方と登録方法

 

まとめ

ブログやサイトのSSL化は、
今後は必須と捉えたほうが良い流れになってきています。

SSL化を導入しているサイトも多くなってきていますし、
SSL化を導入する敷居も低くなって対応しやすくなっています。

Xサーバーであれば無料でSSL化することもできますので、
もしXサーバーを使っていれば、今回の記事を参考に
サイトのSSL化を是非進めてみてください。

この記事へのコメント

  1. るなっち さん

    はじめまして

    ランキングからきました。
    作業手順の流れが図解入りでとてもわかりやすかったです!!
    いつもありがとうございます。
    また訪問させてください。

コメントを残す

ご質問&ご感想をお気軽にどうぞ!
メールアドレスが公開されることはありません。