サイト全体のssl化を行う(ワードプレス さくらサーバ)

サイトの一部をssl化するという流れについて、以前に記事にしました。(参照:さくらサーバで特定ページのssl化を行う)管理人は、自分のサイトに2つのフォルダを持っていて、一つのフォルダでワードプレスを運営。もう一つは、phpファイルでapiを利用したお役立ち情報などを提供しています。

フォルダの1ページをssl化することによって流れが分かったので、思い切って全体をSSL化することにしました。

管理人はさくらのレンタルサーバを利用していますので、以下の説明はさくらサーバー用です。


google広告

1)ssl表示がゆずれないページへのリンクを https://にする

htaccessの縛りを一時的に外して(参照 参照:さくらサーバで特定ページのssl化を行うのhtaccessの書き込み 上図のhtaccess書き込み)、http://、https://どちらでも接続できる設定にしておいて、https://表示が問題ないか詰めていきます。以前ssl化した特定ページをご覧になるユーザーさんに少しでも迷惑がかからないように、このページへのリンクを http:// → https:// リンクに変えておきます。

作業を実際にして感じたのは、万が一変なことが起こっても、いつでも元に戻せるようにしておくことが大事。ファイルを書き込む前に必ずコピーを取る。思ったのと違った表示になったらすぐに元に戻せるようにしておくことが大事です。

2)htmlやphpページ(ワードプレス外の)でssl接続が問題ないかチェックする

まずは、ワードプレス外のフォルダにあるファイルをssl対応させていくのがよさそう。chromeブラウザで開いて、url左側の緑カギが表示されるか確認。されてない場合は、f12キーを押して、consoleを開き原因を確認します。

(1)変更が必要な箇所は、ほかのファイルでも変更が必要なのでメモを取る

管理人の場合は、以下のような変更点がありました。

  • src=”http://maps.google.com/maps/api/js → src=”//maps.google.com/maps/api/js
  • http://www.google.com/mapfiles → //www.google.com/mapfiles
  • src=”http://ad.jp.ap.valuecommerce.com → src=”//ad.jp.ap.valuecommerce.com

一つ一つ変更すると見落としがあるかもしれないので、まずはまとめておいて、ツールで一気に変更します。

(2)変更の前に、保険をかけるつもりでコピーを取る

これ必須です。変更しなくてもよいところまで変更して動作がおかしくなったのを実際に経験しました。もし、コピーを取っていなかったらと思うとぞっとします。

(3)ツールを利用して一括で変換する

ツールはあったほうが絶対便利。管理人は、Texchangeというフリーソフトを使っています。変更箇所の検索にも置換にも便利。テキストエディタに「秀丸」を使っておられる方は、grep機能を有効に使うのもよさそうです。

変換の時にはエンコードの種類にも十分注意してください。管理人は間違えて、shift-jisで保存してしまい。フォルダの全ファイルが文字化けして青くなりました。さらに、後述しますが、ワードプレス内の文章を変更するのは、Search Regexというプラグインが便利です。texchangeとSearch Regexの2刀流で一気にファイルを修正します。

(4)一つのフォルダのみssl表示にする

フォルダ内ファイルを訂正後、そのフォルダごとssl表示にしました。先日、一つのファイルをssl表示するというお話をしましたが、htaccessの部分を以下のように変更します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} ^(.*)/folder/(.*)$
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

RewriteCond %{REQUEST_URI} !(^(.*)/folder/
RewriteCond %{REQUEST_URI} !(^(.*)\.gif$)
RewriteCond %{REQUEST_URI} !(^(.*)\.jpg$)
RewriteCond %{REQUEST_URI} !(^(.*)\.css$)
RewriteCond %{REQUEST_URI} !(^(.*)\.png$)
RewriteCond %{REQUEST_URI} !(^(.*)\.js$)
RewriteCond %{HTTP:X-Sakura-Forwarded-For} !^$
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

2つ以上のフォルダやファイルのみをssl表示させるやり方が、結局最後まで分かりませんでした。[or]を使ってやってみたりしたんですが、http://接続でも行けるんですよね。

3)wordpressをssl化する

追記 2016/10/27

以下の作業は一度、htaccessのこの記載を削除して行いました。全部ssl化できたあとの記載は後述しています

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} ^(.*)/folder/(.*)$
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

RewriteCond %{REQUEST_URI} !(^(.*)/folder/
RewriteCond %{REQUEST_URI} !(^(.*)\.gif$)
RewriteCond %{REQUEST_URI} !(^(.*)\.jpg$)
RewriteCond %{REQUEST_URI} !(^(.*)\.css$)
RewriteCond %{REQUEST_URI} !(^(.*)\.png$)
RewriteCond %{REQUEST_URI} !(^(.*)\.js$)
RewriteCond %{HTTP:X-Sakura-Forwarded-For} !^$
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]
</IfModule>

いよいよ本丸のワードプレスをssl化します。

  1. 一般設定を変更する
  2. wp-config.phpを変更する
  3. ファイルや文章の中身を変更する
  4. htaccessを変更する

まず、一般設定を変更しましょう。設定 → 一般から

fullssl001

ワードプレスアドレスとサイトアドレスをhttps://に変更します。管理人はワードプレスというフォルダにファイルを入れて運営しているのでこんな感じ。

さらに、wp-config.phpファイルを変更します。さくらでURL正規化を正しく行うSSLの設定方法、何度も紹介していますが、この通りにやります。wp-config.phpファイルの上部に、(<?phpの下)

// プロクシでIPが入るとSSLアクセス状態をセットする
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
}

ここまででhttps://表示が可能だと思います。何度も言いますが、変更する前に必ずファイルをコピーしておきましょう。そして、表示に不具合があればすぐに元のファイルに戻します。htaccessの設定は最後にやります。

ワードプレスを構成するファイルで変更する箇所がないかチェックする

ワードプレス外でやったチェック方法でブラウザで表示をチェック。おかしければ、f12キーを押して原因を特定して修正します。

管理人はワードプレスをカスタマイズしているので、変更箇所がけっこうありました。このときに、上記でメモしておいたチェックリストが結構役に立ちます。管理人の場合、single.php や functions.phpで google maps api関連のファイルの修正をしました。ちなみに上記texchangeを使って一括変換しています。

  • src=”http://maps.google.com/maps/api/js → src=”//maps.google.com/maps/api/js
  • http://www.google.com/mapfiles → //www.google.com/mapfiles

しつこいようですが、変更前のファイルを必ずコピーして取っておいてください。管理人は、functions.phpの変更しなくていいところまで変更して、画面が真っ白になり頭も真っ白になった経験があります。

ワードプレスで書いた文章内の記述を訂正する

外のサーバーから引っ張って表示している画像や、アフィリエイトリンクは訂正が必要です。アフィリエイトリンクは、ユーザー表示数をカウントするのにimgタグを使っている場合が多いので、この部分の訂正が必要。 管理人の場合、バリューコマースのアフィリエイトタグと、ワードプレスにアップロード後の直貼り付け画像がhttp://表示だったので //に切り替えました。

Backwpupを利用してバックアップをとる

今までと違ってワードプレスの記事をバックアップするのにコピーではできません。管理人は、Backwpupを使って頻繁にバックアップを取りました。(参照:Backwpupの保存先をSugarSyncからgmailに変更する) ちなみに、Backwpup → ジョブ → 今すぐ実行でバックアップが取れます。

プラグインsearch regexを使う

ワードプレス内の記事はtexchangeで訂正できないので、プラグインを使います。Search Regex — WordPress Pluginsは管理人も使ってみましたがおすすめです。文章を一括して訂正できるいいのはないかな?と探していたところだったので一石二鳥でした。 (参照:Search Regexプラグイン(記事やコメント内容を一括置換)

htaccessファイルの変更

あらかた作業が終了したところでhtaccessを変更しました。以前書いた特定ページssl化部分を削除して、以下のファイルを書き込んでルート直下に上げます。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]
</IfModule>

ほかにやることチェック

ブログの完全HTTPS化を完了、HTTPからHTTPSへの移行プロセスを共有 | 海外SEO情報ブログ 最後に、このページをチェックして以降に伴う手続きで自分のサイトでもやったほうがいいことをやりました。

サーチコンソールへの追加

サーチコンソールへサイトを登録します。https://example.com と https://www.example.comの2つ。管理人は表示をwwwなしを選択しました。

snsやブックマーク表示を変更する

もともと、snsでのリンクなどほとんどないサイトなので、削除してもよかったんですが、一応付けました。はてなブックマークは以前からのものだと、はてなが扱っている javascriptファイルがhttp://接続があるとかで上手くいかなかったので作り直しています。

などなど。管理人はやってないけどほかの設定もありますので上記リンクを参考にされてください。

追記

全ページssl化し、緑色のカギが出るようにして、ブラウザで表示を確認すると PCのchrome、Edge、Firefoxでは大丈夫なのに、iOS10のchrome、Safariでは緑色にならず、安全でないリソースがあると表示されるんです。

苦心惨憺して原因を探ったところ、SNSのソーシャルボタンにありました。今回、はてぶのブックマークのみ作り直して、それ以外(ツイッター、フェイスブック)はそのままにしておいたのがまずかったみたいです。

もともとブックマークなど少ないブログなのでボタンは外しました。また気がむいたらつけるかもしれません。

google mapsで現在位置情報が取得できない原因がわかりました

iphone7に機種変更して、運営しているサイトを見たとき気が付きました。google mapsで現在地が取得できないんです。 iOS10以上の端末、およびグーグル クロムブラウザでは・・・ 以前から、パソコンでもできな・・・

2016年10月21日

さくらサーバで特定ページのssl化を行う

さくらサーバーで運営しているサイトの中で、特定ページ、一部ページをssl化することに取り組んでみました。 できたこと、できなかったこと(というかやらなかったこと) 先に少し結論を書いておきます。管理人はさくらサーバーでワ・・・

2016年10月21日

送信されたデータは、このサーバで利用できない証明書です に対応する(さくらサーバ)

サイトのssl化をしていた時、ちょっとハマったというか困ったことがありましたので、記事にします。文字通り、「送信されたデータは、このサーバで利用できない証明書です」と表示され、証明書がインストールできないんです。(さくら・・・

2016年10月21日

サイト全体のssl化を行う(ワードプレス さくらサーバ)

サイトの一部をssl化するという流れについて、以前に記事にしました。(参照:さくらサーバで特定ページのssl化を行う)管理人は、自分のサイトに2つのフォルダを持っていて、一つのフォルダでワードプレスを運営。もう一つは、p・・・

2016年10月23日

ssl化、iOS10端末、iphone7などで「安全でないリソースが含まれている」表示の時、ここをチェック

SSL化して、windows10パソコンではブラウザ(chrome、Edge、Fire Fox) どれでも、url欄にきれいな鍵が出ている。それなのに、手持ちのiphoneで、chrome、safariで見ると、「安全で・・・

2016年10月25日

https接続にしたらBackwpupでエラー。ジョブが開始されましたが、10秒間応答しません。(さくらサーバーの場合)

一度ssl化したら、ほかのサイトも同じ手順で簡単だろうとタカをくくっていたんですが、サイトごとに雨後の筍のように問題が出てくるのは辟易します。今回は表題通り、ssl化したらBackwpupが止まって動かないという問題。 ・・・

2016年10月27日

ssl化後の自分のサイトへのリンクはできるだけ、「http:」を省いたほうがよさそう

ssl化したのち、読み込む画像やjavascriptのurl「http:」部分、丁寧に拾って削除するか「https:」に変換しました。しかし、テキストのアンカーリンク部分はhttp:のままにしていました。単にブラウザに表・・・

2016年11月04日

さくらサーバー、ラピッドsslの更新手続きを行ってみた

さくらサーバーで、ラピッドsslを導入して1年経ちました。更新手続きの案内が来たのでやってみたんです。サーバーの設定を自分でやり直す必要があるのがちょっと面倒ですね。 契約年数を決める さくらサーバのコンパネから手続きを・・・

2017年09月12日

キャプチャ写真はぱくたそから引用しました。素敵な写真をありがとうございます。

google広告

コメントを残す

*

このページの先頭へ