ロリポップのブログを独自SSLでhttps化しました!WordPressでやったことまとめ


 
ロリポップのブログを「https化(SSL化)」しました!
 
これからはhttpsが主流になりそうなのと、Chromeが10月からセキュリティ強化する、と言うこともあり、いまのうちにやった方が良いかなと。
 
 
いろいろと調べながら作業して、10個のブログで8時間かかりました。
https化自体はすぐに終わったんですけどね。。。
 
この記事では、やったことをざっくりまとめておきます。
 


作業その1「下準備」

まずは下準備です。
 
先にやれることはやっておきましょう。
 

ファイルとDBのバックアップ

ロリポップの「バックアップオプション」を使って、3日に一回、自動的にバックアップしてます。
念のため、作業前にも手動でバックアップしておきました。
 

置換プラグイン「Search Regex」のインストール

URLが「http → https」に変わりますので、記事内のURLも変更が必要です。
けど、一つ一つを手動でするのは超大変!
 
このプラグインを使うと、ブログ内の全記事を一括置換できます。
 
しかも、「検索だけ」「置換内容を表示」「置換して保存」の3機能があるので、置換して良いかを確認しながら作業できました。
素晴らしい!!
 

旧ドメインの画像ファイルをコピー

あまおとろぐブログは10個あるんですが、まだ「ロリポップの旧ドメイン」の画像ファイルを使ってる記事が残ってました。
独自ドメイン(amaotolog.com)に移行した時の名残ですね。
 
残念ながら、旧ドメイン(junbr.raindrop.jp)は独自SSLの対象外。
画像ファイルの移行が必要です。
  
画像パスの変更が少しでも楽になるように、フォルダ構造を維持してファイルコピーしておきます。
・旧:http://junbr.raindrop.jp/am/img/167-2.jpg
・新:https://amaotolog.com/amalog/wp-content/uploads/am/img/167-2.jpg
 

ロリポップで独自SSL(無料)を申し込む

Let’s Encrypt」という認証局を使ってるようですね。
 
これまでは、一番安い「クイック認証SSL」でも \2,000/月からでしたが、今回申し込むのは無料。
ありがとうロリポ!
 
早速申し込んでみると、https化は数十分で完了しました。
かなり早かった。。。
 
この状態でも、まだhttpにもアクセスできるので安心です。
これで下準備ができました。 
 

作業その2「ブログ毎の作業」

既に、ブログのhttps化はできてますが、これだけではまだ完了ではありません。
 
ブログの設定や記事内の文字で「http」を使ってるところを、「https」に変更していく必要があります。
 
 
使っているWordPressテーマは、「responsive」「BlogPress」「Chill」の3つ。
それぞれを変更していきます。
 
地道に。そして確実に。
 

サイトアドレス (URL)

このブログは、マルチサイト化してます。
画面左上の「参加サイト – サイトネットワーク管理者 – サイト」をクリックして、「サイトを編集」からURLを変更していきます。
 
「サイトアドレス (URL) 」を変更すると、「Siteurl」と「Home」は自動的に変わりました。
あと、必要かは分かりませんが、「Ossdl Off Cdn Url」「Ossdl Off Blog Url」も変更しておきます。
  

Favicon

All in one Favicon」プラグインの設定画面で、ファビコン画像のパスを変更します。
この時、「s」を付けるだけでなく、変更後のパスをブラウザのアドレス欄に入力して、ちゃんとアクセスできるかを確認しておくと安心ですね。
 

ブックマーク

Link Library」プラグインでも同じ。
ポータル画面のパスを「https://amaotolog.com/」に変更します。
  

サイドバーのメニュー

「外観 – ウィジェット」です。
HTMLメニューを「テキスト」ウィジェットで作ってるんですが、ここのパスを変更しておきます。
 

画面上のメニュー

「外観 – メニュー」です。
間違って「全角のs」にならないように!!
 

twitterのパス

TCDテーマの場合、「外観 – テーマオプション」ですね。
「https://twitter.com/amaotolog」に変更しました。
  

SNS Count Cache

以下の設定を変更しました。
・対象SNS:「Facebook、Google+、はてなブックマーク、Pinterest、Pocket、Twitter」にチェック。
・シェア数のチェック間隔(秒):3600。シェアの頻度は低いので。。。
・一度にチェックするコンテンツ数:10
・HTTPからHTTPSへのスキーム移行モード:有効。これだけで、http時代のカウントも合計してくれます。スゴイ!
・HTTPからHTTPSへのスキーム移行日:2017/10/12。切り替えた日ですね。
 
ついでに、Facebookの「APP ID」取得、Twitterの「widgetoon.js & count.jsoon」申込みもやっておきます。
 
[2017/10/17追記]
SNS Count Cache 0.11.1では、Facebookの「いいね!」をカウントしてくれなかったので、このサイトを参考にPHPファイルをカスタマイズしました。

内部リンクの置換

ここからは、「Search Regex」を使った文字置換作業です。
間違わないようにじっくりと。

とはいえ、普通であれば、この変換だけで十分のはず。 
・旧:http://amaotolog.com
・新:https://amaotolog.com
 
いきなり置換するのではなく、まずは「Search」でどれくらいあるか探して、「Replace」で置換後の文字を確認し、「Replace & Save」で置換&保存するのがポイントです。
  

画像ファイルパスの置換

旧ドメインで残ってた画像パスを変更しました。
http://junbr.raindrop.jp/am/img/
https://amaotolog.com/amalog/wp-content/uploads/am/img/
 

amazonのパス置換

ブログ内に貼っているamazonパスも変更しておきます。
 
正直なところ、いくつかは「ホントにこれで良いのか?」なパスもありますが。。。
http://www.amazon.co.jp/exec
https://www.amazon.co.jp/exec
   
http://www.amazon.co.jp/gp/product
https://www.amazon.co.jp/gp/product
   
http://www.assoc-amazon.jp/
https://www.assoc-amazon.jp/
   
http://ecx.images-amazon.com
https://images-na.ssl-images-amazon.com
   
http://ir-jp.amazon-adsystem.com/
https://ir-jp.amazon-adsystem.com/
   
http://ws-fe.amazon-adsystem.com/widgets/
https://ws-fe.amazon-adsystem.com/widgets/
   
http://www.amazon.co.jp
https://www.amazon.co.jp
おかしいのがあれば、後から修正する方向で。
  
http://ws.assoc-amazon.jp/widgets
だけは、変換後のパスが分かりませんでした。古すぎるのかも。
 

バリューコマースのパス置換

これも変更しておきます。
http://ck.jp.ap.valuecommerce.com
https://ck.jp.ap.valuecommerce.com
  
http://ad.jp.ap.valuecommerce.com
https://ad.jp.ap.valuecommerce.com
   

念のためチェック

もう一度検索してみると、意外にひっかかるものです。
http://junbr.raindrop.jp
http://amaotolog.com
  
自分のブログ以外で、https対応していないところ」は変更しないように!
余分な変更には十分注意です。
 
一つのブログを修正したら、簡単な動作確認をしておきます。
 
リンクをクリックして画面が変わるか、chromeでアクセスしてアドレス欄に「保護された通信」と表示されるか、など。 
 
 
F12キーを押して出てくる「DevTools」を使うと便利です。
 
httpが残っている場合、Consoleに「Mixed Content」と表示されますよ。
 

作業その3「残りの調整」

作業の終盤です。
 
もう一息。
 

親サイトのサイトアドレス (URL)

設定画面からは変更できないので、DBを直接変更します。
  

モバイル端末向けのヘッダ画像調整

モバイル向けに小さいヘッダ画像を表示してたんですが、パスがhttpのままでした。
<img src="<?php echo str_replace( 'http://', 'https://', esc_attr( $options['画像のパス'] ) ) ; ?>
みたいな感じで変換しました。
  

オリジナルSNSボタン

これまでは、「WP Social Bookmarking Light」プラグインとテーマ標準のボタンを使ってました。
けど、どちらも「はてなブックマーク」ボタンで「まだhttpですよ」エラーが出る。。。
 
これも「SNS Count Cache」プラグインで解決です!
 
ボタンの作り方を公開されているサイトを参考に、各ブログに配置していきます。
画面表示が速いのと、デザインに統一感が出たのがうれしい。
   

ツイッターの紹介ページ

ここにもURLがありましたね。
忘れないように修正です。
  

GoogleのSearch Console

以前は「ウェブ マスター ツール」だったような。
知らない内に名前が変わってたようです。
 
URLは変更できないので、「プロパティを追加」で新しくブログを登録しました。
サイトマップ(sitemap.xml)の登録と、robots.txtが正しいかを確認します。
しばらくすると、クロールされてインデックスが登録されました。
良かった。。。
  

Googleアナリティクス

画面左下で「管理」アイコンをクリックし、プロパティ設定で「デフォルトのURL」、ビュー設定で「ウェブサイトのURL」を「https://」に変更しました。
これは、プルダウンを変更するだけで簡単でした。
 

リダイレクト設定

httpにアクセスがあった場合、すべてhttpsにリダイレクトするように設定します。
FTPで「.htaccess」ファイルを修正しました。
ここの作業は要注意です!
 
私の場合、既に「RewriteEngine on」になってたので、以下の2行を追記しました。
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
環境によってコマンドが異なるかも知れないので、良く調べておきましょう。
万が一に備え、修正前に「.htaccess」のバックアップも忘れずに!
  

全画面の確認(パソコン)

パソコンからアクセスして、画面が正しく表示されるかを確認します。
できれば全画面ですが、大変なので少しずつ。
 

全画面の確認(スマホ)

同じくスマホでも確認します。
パソコンではOKでもスマホではNG、という画面がいくつかありました。
問題があれば、地道に修正していきましょう。
これですべての作業が完了しました!! 
 
今回は8時間くらいかかりました。。。 
 
https化だけであればすぐにできるので、パスの修正やボタン作成がなかったら、1~2時間で終わる気がしますよ。
 

やって良かったと思うこと

セキュリティ向上だけでなく、その他にも良い事がありました。
 

Googleの評価が良くなる

どこまで効果があるかは分かりませんが。
httpのままよりは良いらしい。
  

WordPressの管理画面も安心

当たり前ですが、通常のブログ画面だけでなく、管理画面もhttpsになります。
通信データが暗号化されるので安心。
  
 

まとめ

あまおとろぐのブログをhttps化しました!
 
地道な作業が多くて大変でしたが、すべての作業が終わったあと、みなさまにアクセスして頂いてるのが確認できて安心してます。
 
良かったですよ。
 
スポンサーリンク
タグ: PHP, Wordpress, まとめ, やってみる


タグ: PHP, Wordpress, まとめ, やってみる
ロリポップのブログを独自SSLでhttps化しました!WordPressでやったことまとめ” への1件のコメント
  1. 匿名 より:

    こんばんは。コメントは初めてになりますが
    いつも更新を楽しみにしています(^^)

    同じロリポップを使っています。と言ってもまだ大変日が浅いですが(^^;)

    設定に8時間ですか!?(゚Д゚;)ひぃぃぃぃ
    すでに心が折れてしまい、たぶん年内に処理できないで年を越すと思います(;^ω^)
    コメントも何でか分かりませんが、ログインしないとコメント出来ないようになってて
    もうそれだけで私の中ではパンク!!!(´Д⊂ヽ
    結局、私が好きなブロガーさんのブログに尋ねる、
    そしてその方のブログでコメントし合ってて(+o+)

    • だーしゅ より:

      コメントありがとうございます。

      https化はゆっくりと確実にするのが良いですね。
      パスなどを間違うと大変ですし。

      > コメントも何でか分かりませんが、ログインしないとコメント出来ないようになってて
      ログインしなくてもコメント入力できますよ。
      実際、このコメントも見れていますので。
      少し気になりますね。

コメントを残す

メールアドレスが公開されることはありません。