セキュリティ

 

こんにちは。在宅ブログワークで2人の子どもを育てる、シングルマザーブロガーのささえみです。

今回は、WordPressで運営中のhttpサイトを完全にhttps化するまでの手順を説明していきます。

 

  • どんな手順で?
  • どんなツールを使って?
  • どこに注意をしなければならないか?

 

などなど細かいところを、WordPressのhttps化が初めての人でも分かるようにお伝えします!(私自身もサブサイトを初めてhttps化しましたが、今回ご紹介する手順を踏んだらできました。)

それでは早速どうぞ!

 

 

WordPressのhttps化に必要なツールや事前準備

 

WordPressをhttps化するにあたって、まず必要なツールや事前準備を紹介します。

料理のレシピのように、はじめに必要なものを揃えておくことで、作業効率は格段に上がります。ちゃっちゃとhttps化を済ませられるように、準備をしておきましょう。

 

WordPressのhttps化に必要なツールや事前準備

 

 

【補足1】プラグイン「Search Regex」とは?

 

Search Regexは、WordPressサイト内の内容を一括変換できるプラグインです。例えば、サイト内に散らばっている”A”という表記を一括で”B”に変換したいときに使います。

 

https化をするには、サイト内の内部リンクをすべてhttp://~からhttps://~にする必要があります。1記事ずつ手作業で直していくのもひとつの方法ですが、かなり手間がかかります。(特に記事数が多い場合!)

 

なのでSearch Regexを使って、内部リンクのhttp://~を一括でhttps://~に変換します。

おいおい使いますので、最初に入れておきましょう。(インストールと有効化まで済ませます)

 

Search Regex

 

 

【補足2】Webブラウザ「Firefox」はなぜ必要?

FireFox

 

サイト内に1つでもhttpの要素があると、完全なhttps化はされません。で、多くの場合、サイト内のどこかしらにhttpの要素が隠れています(涙)

 

最終的に、そのhttp要素をしらみつぶしで探していくことになるのですが、その時にめちゃくちゃ便利なのがFirefoxです。

「この画像のURLがhttpのままだよ~」とか「このアフィリエイトリンクのURLがhttpのまま貼られているよ~」なんてことを教えてくれます。

 

 

正確にはGoogle Chromeでも教えてくれますが、英語表記なので読めません!!(英語OKな人はGoogle Chromeでもいいと思います。この記事ではFirefoxを使ったやり方のみ説明していきます。)

 

英語に自信がない方や、とにかくちゃっちゃとhttps化を済ませたい方は、Firefoxをパソコンにダウンロードしてください。

>>Firefoxの無料ダウンロードはこちら

 

 

さて、事前準備が整ったら、早速WordPress内でhttps化の作業をしていきましょう。

 

目指すは完全https化されたこの表示!↓

httpsマーク

 

 

 

作業① ダッシュボード内でURLを変更する 

 

まずはじめに、WordPressダッシュボードの「一般設定」で、サイトのURLをhttpからhttpsに変更します。

WordPressアドレスとサイトアドレスを、両方ともhttpからhttpsに書き換えて保存しましょう。

 

wp一般設定

 

wp一般設定2

 

 

作業② .htaccessファイルの編集

 

次に、WordPressを構成しているファイルのひとつ「.htaccess(エイチティーアクセス)」を編集します。

 

.htaccessを適切に編集することで、httpのアドレスにアクセスしてきたユーザーが、自動的にhttpsサイトに飛んでくれるようになります。(←これをリダイレクトと言います)

 

補足説明

 

実はサイトをhttps化すると、全く同じ内容のページがhttpとhttpsの2パターン生まれることになります。そして、今現在検索エンジンでヒットするページはhttpバージョンのものです。

 

ここでWordPressの動作をつかさどる.htaccessファイルに「httpのページにアクセスした人を、httpsバージョンに誘導してくれ!」という命令を書き込むことで、検索エンジンなどからhttpページにやってきた人を、同じ内容のhttpsページに自動的に移動させることができます。

 

リダイレクトをすることで、httpバージョンの際に蓄えたSEOパワーも引き継ぐことができます。

 

リダイレクトのイメージ
※リダイレクトのイメージ

 

 

さて、早速.htaccessの編集作業に入っていくわけですが、このファイルはWordPressの動作に大きくかかわる大事なファイルです。

なくしたり編集を間違ったりして元に戻せなくなると大変ですので、慎重に作業していきましょう。

 

 

最初にWordPressのプログラムファイルから、.htaccessをダウンロードします。

 

エックスサーバーでサイトを運営している場合は、エックスサーバーからダウンロードできます。手順は次の通りです。(サーバーから.htaccessを入手できない場合は、FTPソフトを使ってダウンロードしてください)

 

エックスサーバーのインフォパネルにログインします。

 

エックスサーバー インフォパネル

 

 

契約しているサーバー一覧の中から、https化したいサイトに該当するものを選び「ファイルマネージャー」をクリックします。

 

エックスサーバー ファイルマネージャー

 

 

Web FTPという画面に切り替わります。ファイルの一覧が表示されますので、https化したいサイトのドメインと一致するものをクリックします。

 

エックスサーバー ウェブFTP

 

 

画面が変わって、またファイルの一覧が出てきます。その中から「pubric html」をクリック。

 

エックスサーバー ウェブFTP2

 

 

次の画面のファイル一覧の中から、「.htaccess」を探してクリックします。クリックと同時にファイルがダウンロードされます。

 

エックスサーバー ウェブFTP3

 

Web FTPのページはあとから使います。そのままにしておきましょう。

 

 

次に、ダウンロードした.htaccessファイルのコピーを作っておきます。複製しておくことで、万が一ファイルをなくしてしまった時でも安心です。

 

コピー

 

 

コピーができたら、原本をテキストエディタで開きます。テキストエディタを起動させ、「ファイルを開く」で開くとスムーズです。

※今回はMKEditor for Windowsというテキストエディタを使いましたので、その画面で説明していきます。

 

 

テキストエディタで.htaccessファイルを開いたら、先頭に次のコードを挿入します。これがリダイレクトの命令をするコードです。↓

 

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

 

htaccess編集

 

その他のコードは一切触らないでください!

 

 

リダイレクトのコードが挿入できたら保存します。「名前を付けて保存」を選んだあとは、次の4点に注意して保存してください。

 

  1. ファイルの名前を.htaccessにする!先頭の「.」を忘れないように注意!(画像では「.」が入っていません、あしからず)
  2. ファイルの種類を「全てのファイル」にする!
  3. 文字コードと改行コードを「UTF-8N(BOMなし)」にする!
  4. 改行=自動にする

 

htaccess保存

 

 

保存ができたら、エックスサーバーのWeb FTPのページに戻ります。

 

画面右側の「ファイルの選択」ボタンをクリックすると、パソコン内のファイルを選択できます。先ほど編集して保存しておいた.htaccessファイルを選びましょう。

画像のように「.htaccess」という表示が出たら「アップロード」ボタンをクリックします。

 

エックスサーバー WebFTP4

 

これで.htaccessファイルの編集が終わりました。

 

 

作業③ プラグインSearch Regexで記事中の内部リンクと画像URLを一括変換する

 

次は、今まで書いてきた記事に入っている内部リンクと画像のURLをhttpsにしていく作業です。

 

最初の方でサイトのトップページのURLをhttpsに変更しましたが、記事中の内部リンクや画像URLには反映されません。httpのまま残され、そのままにしておくと完全https化はできません。

 

そこで、あらかじめ導入しておいたプラグインSearch Regexを使って、一括変換をしていきます。

 

まずはWordPressダッシュボードの「ツール」から「Search Regex」を選択します。

 

Search Regex

 

画面が変わったら、次のように入力していきます。

 

  • Source→Post Content(個別記事)を選択
  • Search Pattern→サイトのトップページの旧URL(例:http://〇〇.com)を入力
  • Replace Pattern→サイトのトップページの新URL(例:https://〇〇.com)を入力

 

間違いがないか確認できたら「Search>>」をクリック。

 

Search Regex操作

 

 

すると「一括変換する候補がこれだけあったよ~」という結果が表示されます。特に問題がなければ「Replace>>」ボタンをクリック。(このボタンを押してもまだ変換はされません)

 

一括変換リスト

Search Regex変換2

 

 

最終確認の画面が表示されます。「この内部リンクをhttpsのURLに変更するで!」みたいな項目が、サイト内で該当する部分全部について出てきます。

 

Search Regexというプラグインは、一括変換後にもとに戻すことができません。間違いがないか、なるべくたくさんの項目をチェックして最終確認をおこないましょう。

問題がなければ「Replace&Save」をクリック。

 

Search Regex変換3

 

これで、サイト内の記事の内部リンクと画像URLが一括でhttpsに変換されました。(試しに数記事確認しておくといいです)

 

 

作業④ ウィジェット・グローバルメニュー・フッターの内部リンクを確認する

ウィジェット メニュー

 

次は、ウィジェット・グローバルメニュー・フッターに貼ってある内部リンクの確認です。ここで使用している内部リンクはhttpのままですので、全部httpsに変更しましょう。

カスタムリンクを設定している場合も、リンク先のページのURLをhttpsに直してください。

 

ウィジェット

 

メニュー

 

 

作業⑤ ファビコン(サイトアイコン)の再設定をする

 

ファビコン(サイトアイコン)を設定している場合は、その画像のURLがhttpのままになっていることがあります。

「外観」→「カスタマイズ」で、サイトアイコンが設定してある部分を見つけてください。今設定されている画像をいったん削除して、再設定をしましょう。

 

サイトアイコン再設定

 

※WordPressのheader.phpにコードを直接書き込んでファビコン(サイトアイコン)を設定している場合は、その画像URLをhttpsに書き換えてください。

 

ファビコン コード書き換え

 

 

作業⑥ その他残ったhttpのURLをFirefoxで捜索して直していく

 

ここまで作業してもなお、完全https化しない場合があると思います。とくに、Amazonアフィリエイトや楽天アフィリエイトの古いリンクがどこかに貼られていると、緑の鍵マークは出てきてくれません。

 

httpsマーク

↑これがなかなか出てくれない・・・

 

なので、怪しいかも・・・と思うページをFirefoxを使ってひとつひとつ調べていきます。

 

怪しいページがはっきり分かっているようならば、そのページのみの調査で構いません。私の場合はどのページが怪しいかさっぱり分からないほど記事数があったため、片っ端から調べていきました。(←時間はかかりますが、確実と言えば確実です。)

 

それでは、Firefoxを使って残りのhttpのURLを探していく手順をお話しします。

 

 

まず、調べたいページをFirefoxで表示させ、URL横の鍵マークをクリックします。すると悲しきかな、「この接続は安全ではありません」というメッセージが表示されます。

次に、メッセージ横の「>」マークをクリックします。

 

Firefoxで問題を調べる

 

 

次に出てきた表示の下のほう、「詳細を表示」をクリックします。

 

Firefoxで問題を調べる2

 

 

次の画面で項目を「メディア」に切り替えてください。すると、そのページ内で使われているメディア(画像など)のリンクが一覧になって表示されます。

 

その一覧をチェックしていき、httpのままになっているリンクがないか調べます。私の場合は、かなり前に貼ったAmazonアフィリエイトや楽天アフィリエイトのリンクが原因になっていると分かりました。

どの画像に割り当てられているURLなのか、プレビューで確認することができます。

 

Firefoxで問題を調べる3

 

アフィリエイトリンクが原因になっている場合は、ASPのサイトに行ってもう一度最新のアフィリエイトリンク(httpsバージョン)を取得し、記事編集画面で貼り変えましょう。

 

 

この作業は、記事数が多ければ多いほど根気と集中力が必要です。しかし、原因になっているリンクをすべて潰せば終わる!!完全https化できる!!!

来世のために徳を積むんだと思って乗り切りましょう。

 

 

作業⑦ ここまでやってもなお、完全httpsにならない場合は・・・

 

ここまで作業してきたのに、まだ緑の鍵マークが出ない!!!なぜだぁぁぁぁ・・・!!!となった場合、もしかすると、今使っているWordPressのテーマ(テンプレート)のプログラムファイル(php)の中にhttp要素が隠れているかもしれません。

 

「外観」→「テーマの編集」で、phpのコードが書かれている画面を開き、httpがないか片っ端から調べていきましょう。

 

テーマの編集

 

完全https化を妨げている可能性が高いコードは、次のような例です。

 

  • iframe src=”http://〇〇~”
  • img src=”http://〇〇~”
  • form method=”post” action=”http://〇〇~”
  • script src=”http://〇〇~”

 

上のようなコードを見つけたら、httpsに修正して保存しましょう。

修正をミスして元に戻せなくなるのが心配な方は、あらかじめコードのコピーをとっておくことをおすすめします。

 

 

ちなみに、プログラムファイルの中から効率よくhttpを見つけるには、パソコンのショートカットキーを使った検索機能が便利です。

Windowsなら「Ctrl+F」Macなら「command+F」で、右上に検索バーが表示できます。

 

その検索バーの中に例えば「http」と入力すると、プログラムファイルの中からhttpと書かれている場所に色が付きます。そのhttpの直前にiframe src=とか、img src=が書かれていた場合、完全https化を妨げている原因の可能性が高いです。

 

ショートカットキー

 

こんな感じで、WordPressのテーマのプログラムファイル内を隅から隅までチェックし、原因の可能性があるhttpを全てhttpsに変更してください。

 

おそらくここまでやれば、完全https化はできるはず!!

 

 

まとめ

 

以上が、httpで運営しているWordPressサイトをhttps化するまでの流れになります。記事数が多いサイトの場合、かなり労力がいります。

 

しかしながら、今後のSEOの動向をつぶやく「Google ウェブマスター向け公式ブログ」では、確実にhttps推しの流れが来ています。

 

※2017年7月21日付けのブログより抜粋

Google は 1 月に、Chrome で HTTP ページの接続セキュリティが通知される方法の改善に着手しました。Chrome では現在、パスワード フィールドまたはクレジット カード フィールドがある HTTP ページを「Not secure」とマークしています。

2017 年 10 月からは、新たに 2 つの状況(ユーザーが HTTP ページにデータを入力した場合と、HTTP ページにシークレット モードでアクセスした場合)において「Not secure」の警告が表示されるようになります。

 

最終的には、シークレット モードではないときも、すべての HTTP ページに対して「Not secure」警告を表示する予定です。

今後のリリースが近づいた際にアップデートを公開しますが、HTTPS への移行はできる限り早く進めてください。

 

 

今後のGoogleの方針としては、httpサイトに対して、さらに分かりやすく「このサイト、セキュリティ的に危ないよ!」と表示していくようです。

 

長期的に運営していくサイトであれば、早めにhttps化に取り組んでおいた方がよさそうです!(何より、記事が増えてからのhttps化はしんどい!笑)

 

 

そして、完全https化ができたら、GoogleアナリティクスとGoogle Search Consoleの再設定もやっておきましょう。

 

httpサイトとhttpsサイトは全く別物です。今後運営していくhttpsサイトの正しいデータがとれるように、上の2つのツールへの再設定もお忘れなく!

 

GoogleアナリティクスとGoogle Search Consoleの再設定のやり方は、下の記事で詳しく解説しています!↓

>>http→httpsにしたサイトをGoogleアナリティクスとSearch Consoleに再登録する方法