mixhostでWordPressサイトをSSL対応(HTTPS化)しました【保護された通信】

mixhostへのサーバー移転の目的のひとつである、SSL導入(https化)を実施しました。

データベースにも手を加えることもあって、リスクヘッジしながらの対応作業なので仕方がないところですが、AMP対応と比べてかなり苦労しました。

まぁ、AMP化はSimplicity2の機能を使えば一瞬で終わっちゃいますけどね。

スポンサーリンク

mixhostでのhttps化

海の見える丘に女性

Simplicity2(Ver 2.4.9以上)に追加された、「簡単SSL対応機能」を使えば簡単&ローリスクで対応できるんだけど、「なるべく素の状態でhttps化したいなぁ」っていうことで真っ向から取り組みました。

サイトの規模が小さいことと、サーバー移転直後なのでトラブル対応しやすいという条件が整っていることも重要な要素です。

基本的な手順はmixhostのサイトで公開されているものに従っています。

参考 WordPressのSSL対応方法

1.SSLの設定が完了しているか確認

方法は簡単、”http://tokui55.com/”を”https://tokui55.com/”として開くだけ。

mixhost https接続テスト

エラーにならずに、サイトを開くことができればmixhost側の準備はできています。エラーになる場合はしばらく待ちましょう。ドメイン設定、ネームサーバーの変更後、最大72時間ほど待つ必要があるようです。

2.WordPress内のサイトURLを変更

WordPressアドレス(URL)とサイトアドレス(URL)を、https://から始まるアドレスに変更します。WordPressの管理画面でメニューから「設定」→「一般」を開きます。

WordPress サイトアドレス

修正後、保存すると強制的にログオフされてhttpsでの接続に切り替わりました。

3.リダイレクトの設定

“http://tokui55.com”でアクセスされたものを、”https://tokui55.com”にリダイレクトします。アクセスルートが複数あるのはSEO的にも良くないので、必ず設定しておきます。

WordPress設置ディレクトリの.htaccessの先頭に次のものを書き込みます。

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

合わせて、www付き(https://www.tokui55.com)でアクセスされたものを、www無し(https://tokui55.com)に統一するための設定を行います。

これはmixhostのコントロールパネル、cPanelの「リダイレクト」から行います。httpのときにも同様の設定をしていたので、削除してからhttps用のものを追加します。

mixhost wwwリダイレクト

設定すると.htaccessに次のものが書き込まれます。

RewriteCond %{HTTP_HOST} ^www\.tokui55\.com$
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule ^/?$ "https\:\/\/tokui55\.com\/" [R=301,L]

.htaccessの最下行に書き込まれていたので、2番目の位置に移動しました。

4.リンクをhttpsに置き換える

外部サイトの画像(アフィリエイト広告に使われている画像など)を表示している場合は、SSL対応のものに差し替える必要があります。これをすべて解決しないと「保護された通信」を手に入れることができません。

アフィリエイトリンクを再作成しなくても、URLを書き換えることで対応できることが分かったので、次のようにツールを使って置換します。

【Amazonアソシエイト】
“http://ecx.images-amazon.com” → ”https://images-fe.ssl-images-amazon.com”
“http://www.amazon.co.jp” → ”https://www.amazon.co.jp”
“http://ir-jp.amazon-adsystem.com” → ”https://ir-jp.amazon-adsystem.com”
“http://ws-fe.amazon-adsystem.com” → ”//ws-fe.amazon-adsystem.com”

次のは、http付きのものが無かったのでそのまま
“//rcm-fe.amazon-adsystem.com”

【バリューコマース】
“http://ck.jp.ap.valuecommerce.com” → ”//ck.jp.ap.valuecommerce.com”
“http://ad.jp.ap.valuecommerce.com” → ”//ad.jp.ap.valuecommerce.com”

【アクセストレード】
“http://h.accesstrade.net” → ”https://h.accesstrade.net”

【A8.net】
“http://px.a8.net” → ”https://px.a8.net”

置換(データベースの更新)には、Search Regexプラグインを利用しました。

Search Regexプラグイン

Search Regexは変更後のイメージもつかめるので、安心して作業できます。

注意点など

基本的にはサイトのhttps化に先行して、アフィリエイトリンクの修正をしても大丈夫です。今、新規でアフィリエイトリンクを作成するとSSL対応のものが発行されるので、それを貼り付けることと同じになるためです。

アクセストレードのサイトに「一部広告素材は、SSLでの広告配信に対応していません。」との注意書きがあったので、置換の結果表示されない広告が発生する可能性があります。

詳しくは各社のサイトをご確認の上実施してください。

【内部リンクの修正】
“http://tokui55.com” → ”https://tokui55.com”

内部リンクは修正しなくても、「保護された通信」には影響がありませんでした。そのため落ち着いて作業できました。

http://tokui55.com“で検索すると700件を超えていたため、詳細をチェックすることが困難でした。一括で置換してしまうと、文脈などがおかしくなる恐れがあるので、分けて置換していくことにしました。

最初は”src“だけを抽出しました。画像なので単純な置き換えで大丈夫だろうとの判断です。

“src=”http://tokui55.com” → ”src=”https://tokui55.com”

次に、”href“を抽出。こちらも単純な内部リンクなので。

“href=”http://tokui55.com” → ”href=”https://tokui55.com”

href“の置換を行った後に問題が発生しました。「Simple Colorboxプラグイン」で画像のポップアップをしていたのですが、動作しなくなりました。

最後に”http://tokui55.com”で抽出します。19件まで減ったので、1件ずつ確認しながら対応しました。

「Simple Colorbox」の件、解決できたっぽいので記載しておきます。

Simple Colorboxは画像のリンクを開く際に、ポップアップ表示してくれるプラグインで、Lightboxという機能を使ったものです。どのタイミングで発生したのかは定かではありませんが、サーバー移転からhttps化までの間に機能しなくなっていました。

プラグインの相性の問題と考えて、「Responsive Lightbox」「Simple Lightbox」「Easy FancyBox」「Boxers and Swipers」「FooBox Image Lightbox」など次々と試してみましたが解決できず...

結果的には、画像の設定で「リンクを新しいタブで開く」にチェックを入れることで解決しました。

リンクを新しいタブで開く

プラグインは「Simple Colorbox」に戻しています。

DMC-FZ1000のレビュー、その3ということで「名古屋港水族館」に行ってきました。 まぁ、カメラレビューは子供を遊びに連れて行ったつい...

↑このあたりの記事で動作確認できます。画像をクリックしてみてください。(ファイルサイズが大きいため、表示には時間がかかるので注意してください。)

5.SNSのシェア数を引き継ぐ

「はてなブックマーク」を付けていただいている記事があるのですが、https移行後にシェア数がリセットされてしまうんですよね。大した数じゃないので心機一転ゼロからでもいいちゃあいいんだけど、できれば引き継ぎたいところなので調べてみました。

SNS Count Cacheが対応してました!

シェア数を高速に表示するためのキャッシュとして、このプラグインを入れていました。

設定の中に...

httpからhttps移行時にSNSシャア数を引き継ぐ設定

ドンぴしゃな項目がありましたよ。

HTTPからHTTPSへのスキーム移行モードを『有効』にして、移行日を入れるだけです。設定後、全てリセットされて再キャッシュが始ります。処理終了後、シェア数が戻っていれば成功です。

6.不具合はChromeのデベロッパーツールで

ここまでの手順で対応できたと思ったんですが...「保護された通信」になりません。

「やべ、考えられることはすべたやったんだけど...」と途方に暮れかけた瞬間、「困った時のChrome頼り」を思い出して、デベロッパーツールを起動してみました。

すると運よく不具合のヒントが見つかりまし。

https化エラー

これに従って対応したところ、ふたつの点が引っかかっていたことが分かりました。

1点は、プロフィール画像をサイドバーウィジェットで貼り付けているのですが、そのリンク(”http://tokui55.com/wp-content/uploads/2016/06/yupapa.jpg”)がhttp://のままでした。これはhttps://と書き直すことで対応できました。

もう一つは、こちらもサイドバーに設置していたGoogleアドセンスの「カスタム検索エンジン」でした。”http://www.google.co.jp”を”https://www.google.co.jp”に書き換えて対応。

ついに「保護された通信」をこの手に

きたコレ!

https 保護された通信

これですよこれ。安心安心。

当サイトの他に、”wp.tokui55.com”というサブドメインでも、WordPressサイトを運営していますが、この記事作成時点ではhttpのままです。プライマリドメインのサイトをhttps化したからといって、サブドメインのサイトは影響を受けません。順次、https化していくので、ご覧いただいたタイミングによっては移行済みの可能性があります。

どうせなら最初からhttps化したい

ドメイン変更ほどのインパクトは無いけれど、実質的にはURLが変更されますからね。Google Seach ConsoleやAnalyticsにも調整が必要だし、SNSのリンクも切れちゃうし。

できることなら、サイト開設時からhttpsにしておきたいところです。

いずれは、「sslに変更しました」って、登録するだけで自動的に調整してくれるようになるかもしれないけど、現時点ではサイト開設時に対応しておくに越したことはないですね。

mixhostなら月額480円のエコノミープランでも無料SSLが使えるので、サイト開設からhttps化できます。今からサイトを作る人がうらやましいです。

公式 mixhost
参考 mixhost 料金プラン


スポンサーリンク
アドセンス(PC)
アドセンス(PC)

フォローする

この記事が気に入ったら
いいね!してくれると嬉しいです
こんな記事も読まれてます
スポンサーリンク
アドセンス(PC)