wordpressサイトで常時SSL化した手順2/2[エックスサーバー]

サーバー側での作業が終わったので、今度はwordpress側での設定作業を行います。

管理画面の「設定」>「一般」の URL を 2 ヶ所「http://~」→「https://~」に変更します。

「変更を保存」をクリックすると自動的にログアウトするので、再度ログインしましょう。

Search RegexでURL一括置換する

今まで書いてきた記事や固定ページのなかにある内部リンク・画像リンクを修正します。

[プラグイン]>[新規追加]から「Search Regex」を検索して、インストール&有効化します。

有効化したら、[ツール]>[Search Regex]に入り、「http://自分のドメイン」を「https://自分のドメイン」に一括置換します。

①ボタンで変更箇所を確認し、問題なければ②ボタンで一括置換をします。

次に「http://」を入力して[Search]を押します。
そうすると外部のURLが出てきますので画像など読み込んでいるものがあればhttps化してるか外すかして対応します。

ウィジェットやプラグインも外部画像など設定していないか「http://~」で始まるものは全て確認してください。
ちなみに私はAll in one SEOのSNS向けの画像がhttp://~になっていました。

WordPressテーマをチェックする

WordPress テーマ内で、自サイトの URL が直接記述されているところがないかチェックします。
画像やscriptを読み込んでいる部分などがあれば、すべて「https」に変更していきます。
主にheader.phpやCSSで直リンクしているものが私はヒットしました。

こちらも「http://」で検索すると外部のURLが出てきますので画像やscriptなど読み込んでいるものがあればhttps化してるか外すかして対応します。

最終チェック

全てのページのアドレスバーが「保護された通信」と表示されているか確認して終了です。

wordpressサイトで常時SSL化した手順1/2[エックスサーバー]

かねてから予告されていた通り、2018年7月からGoogle Chrome(グーグルクローム)ブラウザではSSLに対応していない「http://」で始まるすべてのWebサイトでURLバーに目立つように警告が表示されるようになります。

この関係でHPをSSL化してほしいという依頼が増えてきているので、実際に自分のサイトをSSL化してみた手順をまとめてみました。

ちなみに下記サイトで警告が出るサイトかどうかを調べることができます。
https://www.websecurity.symantec.com/ja/jp/support/ssl-checker

エックスサーバーでの設定

サーバーパネルのドメイン>「SSL設定」をクリックします。

ドメインを確認し、選択するをクリック。

「独自 SSL 設定の追加」タブをクリック。
再度ドメインを確認し、右下の「独自 SSL 設定を追加する(確定)」を押して終了です。「CSR 情報(SSL 証明書申請情報)」のチェックボックスは空欄で問題ありません。(ちなみに画像では(設定済)とついていますが通常は出ませんので気にしないでください←すでに設定した後でキャプチャ取ったため)

これでサーバー側の設定は終わりですが、すぐに「https://~」を見ても以下のような画面が表示されるだけです。

設定完了まで 30 分 ~ 1 時間ほどかかり、その後サイトが表示されるようになります。
「https://~」でサイトが表示されるのを確認してから次の作業に移ってください。
表示される前に WordPress 側で作業してしまうと、サイトが真っ白になって管理画面に入れなくなることもあります。

常時SSL化

独自SSLの設定が完了した時点では、自動的に「https://~」のURLへ転送されません。
Webサイトにおけるすべての表示を常時SSL化する場合は、「.htaccess編集」で以下の記述を追加します。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

「http://~」のURLでアクセスした際、自動的に「https://~」のURLへ転送されていれば設定完了です。

contact form7のお問い合わせフォームから海外のスパムメールが増えたので対策

wordpressでメールフォームを設置する際に便利なプラグイン「contact form7」。
本当にお世話になっているんですよね。
設置も簡単だし、カスタマイズも出来るし、プログラマーではないデザイナーの私にとってはwordpress様様で、contactform7様様なのです。

そんなメールフォームから最近ちょくちょく海外からのスパムメールが来まして。
スパムメールの対策を調べてやってみたところ、あまりに簡単だったのでメモとして残します。

プラグイン「akismet」を追加

akismet:author

送信者の名前を入力する項目にこのオプションを追加する。
例: [text* your-name akismet:author]

akismet:author_email

送信者のメールアドレスを入力する項目にこのオプションを追加する。
例: [email* your-email akismet:author_email]

akismet:author_url

送信者の URL を入力する項目にこのオプションを追加する。
例: [text your-url akismet:author_url]

この赤文字のテキストを既存のフォームに追加するだけでバッタリスパムメールが来なくなります。

たまにチェックボックスを追加してスパムを弾く方法とか出てますけど、やってみたら普通にスパムきてました(笑)
contact form7であればAkismetと連携した、このテキスト追加で結果が変わります。効果があります。

ぜひご参考までに~!