WordPressをhttps化する方法とさくらサーバーでの注意事項

wpssl

WordPressサイト全体をhttps化する方法です。すでにサーバーにSSL証明書がインストールされて環境が整っている方が対象です。

当サイトもLet’s encryptで全ページhttps化しました。Let’s encryptによるSSL証明書の取得はこちらの記事をご覧ください。

スポンサーリンク

やることリスト

  • 管理画面の設定変更
  • ソース内の絶対パス書き換え
  • 投稿内の絶対パス書き換え
  • .htaccessの追記
  • さくらレンタルサーバー利用時の対応

管理画面の設定変更

以下の画像の箇所を修正します。httpをhttpsに書き換えて保存します。

wpssl01

ソース内の絶対パス書き換え

テーマファイルのソース内で絶対パスでhttp指定のものをhttpsに書き換えます。外部ファイルの読み込み(CSS、javascript、フォント、画像など)が対象になると思います。

相対パスで指定している場合、書き換える必要はありません。例えば、スタイルシートの読み込みをget_stylesheet_uri()等で行っていれば不要です。

注意すべきなのが、外部サービスのファイルを読み込んでいる場合に、外部サービスがhttpsに対応しているかどうかです。書き換え後に動作しなくなった場合、未対応なのでhttpに戻しましょう。

投稿内の絶対パス書き換え

次に投稿内の絶対パスを書き換えます。投稿時に挿入している画像はデフォルトでは絶対パスです。おそらくこれが一番めんどくさいですが、プラグインを使用すればかんたんです。

使用するプラグインはSearch Regexです。このプラグインは全投稿データの投稿内容を一括で置換できます。

アップロード画像の場合、

  • http://ドメイン名/wp-content/uploads/ を
  • https://ドメイン名/wp-content/uploads/ に置換します。

置換前に検索して確認できます。プラグインで置換する前にバックアップを取り、慎重に作業してください。

.htaccessの追記

.htaccessを使用している場合、httpからhttpsにリダイレクトするように記述します。SEO的にはhttpとhttpsでは違うサイトの扱いなので、301リダイレクト(サイト移転の意味)してサーチエンジンの評価を引き継げるようにしましょう。

以下の内容を.htaccessの先頭に追加します。ドメイン名は設定対象のドメイン(当サイトの場合webtatan.com)を指定してください。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://ドメイン名/$1 [R=301,L]
</IfModule>

さくらレンタルサーバーの場合、この方法ではリダイレクトできません。対応方法は以下をご覧ください。

さくらレンタルサーバー利用時の対応

ひとおおりのhttps化作業をおこなっても私の場合、CSSがうまく読み込まれませんでした。調べたところ、さくらレンタルサーバーの仕様によりhttpsからhttpへリダイレクトされてしまうようです。

さくらインターネットの場合、httpsの判定は'HTTP_X_SAKURA_FORWARDED_FOR'という文字列で行います。

以下2ファイルの修正が必要です。

  • wp-config.php
  • .htaccess

wpconfig.phpの修正

wp-config.phpの先頭に以下を追加します。ドメイン名は設定対象のドメイン(当サイトの場合webtatan.com)を指定してください。

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
    $_SERVER['HTTP_HOST'] = 'ドメイン名';
    $_SERVER['SERVER_NAME'] = 'ドメイン名';
    $_ENV['HTTP_HOST'] = 'ドメイン名';
    $_ENV['SERVER_NAME'] = 'ドメイン名';
}

wp-config.phpファイルはWordPressをインストールしたフォルダの直下にあります。

.htaccessの修正

以下の内容を.htaccessの先頭に追加します。ドメイン名は設定対象のドメイン(当サイトの場合webtatan.com)を指定してください。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://ドメイン名/$1 [R=301,L]
</IfModule>

.htaccessはWordPressをインストールしたフォルダの直下にあります。

最終確認

以上で、WordPressのhttps化が完了です。サイトを表示してみてください。CSSが適用され、画像も表示されていますでしょうか。ブラウザによりますが、アドレスバーのカギアイコンが正しく表示されていればOKです。

サイト表示上問題ないのに、カギアイコンに!マークが付いてたり、色が変わっていたりする場合、どこかにhttpの読み込みが混ざっています。使用しているプラグインがhttpで何か読み込んでいるかもしれません。一度、ブラウザでhtmlソースを確認してみてください。

スポンサーリンク

この記事が気に入っていただけたらシェアお願いします。励みになります。
prev Let’s encryptのSSL証明書をMacで作成!さくらレンタルサーバーに導入する方法 next AtomでMarkDown記法を使いこなす!MarkDownエディタはAtomがおすすめ

Comment

  1. […] ■ 参考サイト WordPressをhttps化する方法とさくらサーバーでの注意事項 […]

  2. h.hasegawa より:

    ありがとうございます。とても参考になりました。
    おかげさまで、半日悩んでいた事が10分で解決しました。

  3. 吉田 より:

    始めまして。私もさくらサーバでwordpressを運営していますので、本記事を参考にしようと思い、設定画面からhttpをhttpsに書き換えて保存したとたん、ブックマークからも検索からも自分のブログサイトにアクセスできなくなり、

    Not Found The requested URL /cc/wp-admin/ was not found on this server

    としか表示されなくなりました…

    どうすればいいでしょうか?

  4. t.t より:

    はじめまして。ご覧いただきありがとうございます。
    ご質問内容に明確に答えることはできないのですが、以下サイトを参考に試されてはいかがでしょうか。
    http://bazubu.com/how-to-login-to-wordpress-22995.html

    あるいはさくらの場合、さくらのコントロールパネルからphpmyadminでWordPressのデータベースを編集できるのでバックアップ取得後、wp_optionsの中にあるURLを直接編集してhttpのURLに戻すととりあえず復旧できるかもしれません。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です