デジタルライフ ブログ運営

WordPressで運営しているブログをhttps化する時に変更すべきURL

投稿日:2016年2月18日 更新日:

スポンサー

httpsとhttpが混ざっているサイトは安全ではない

このブログをhttps接続に対応しました。色々とやるべき作業はあったんですが、ここではブログ内で使っている内部リンクや読み込んでいる画像などのURL変更について書きます。

そもそもなんでhttpsに対応したらURLを変更しないといけないかっていうところから。

httpsのサイトを作る理由はユーザーが見ているページが安全なものだということを証明するためです。イメージとしてはこんな感じですかね。

すべてがhttpsで読み込まれるので安心

すべてがhttpsで読み込まれるので安心

 

この場合、ひまわりは自分がアップロードした画像、青い花は外部サイト(たとえばAmazon)から読み込んでいる画像とします。この場合はどちらの花の画像もhttpsで読み込まれているので画像が改ざんされることがなくて安全だと言えます。

つぎにこのパターンを見てください。

httpとhttpsが混在する場合。改ざんがないとは言い切れない

httpとhttpsが混在する場合。改ざんがないとは言い切れない

 

今度は外部サイトからの画像の読み込みがhttpで行われています。これは途中でデータが書き換えられる恐れがあるということを意味しています。こうなってしまうと今見ているページは本当に安全か?って言うことです。

こんな感じでhttps接続に対応しただけではまだまだ安全とはみなされません。実際に1つのページの中にhttpsとhttpが混じっているとChromeなどのブラウザは警告を表示するようになります。アドレスバーに鍵のマークが表示されなくなってますね。

警告メッセージ

警告メッセージ

 

そういう理由からブログ内の内部リンクなどのURLをhttpsに変更するという作業が必要になるんです。

ブログのhttps化に必要なURLの変更作業はこれ

ぼくが今回のhttps化で実際に行ったURLの修正作業はこんな感じです。この作業をする前には必ずデータベースのバックアップをしてくださいね。

  • 内部リンクをhttpsに変更
  • ソーシャルボタンをhttps対応に変更
  • はてなブックマークのユーザー数をhttps対応に変更
  • Amazonアソシエイトの画像リンクをhttps対応に変更

あとぼくのブログ環境も載せておきます。

ブログサービス:Wordpress(バージョン 4.4.2–ja)

テーマ:Stinger5

内部リンクをhttpsに変更

まず最初にブログの記事内に書かれている内部リンクを修正します。

具体的には記事名にあるURLをこんな感じに変換ですね。

(変換前)http://moori.musyozoku.com

(返還後)//moori.musyozoku.com

//moori.musyozoku.comっていう形はプロトコル相対URLというもので、httpのページからはhttp://moori.musyozoku.com、httpsのページからはhttps://moori.musyozoku.comというようにその時の環境に合わせてhttp/httpsが切り替わるようになります。

実際の変換方法ですが、さすがに記事を全部手で修正するのって大変。そんな時に役にたつプラグインがありました。それがSearch Regex。

よ〜く見てみると、このプラグインは今のWordpressのバージョンでテストされていないと書かれています。どうしようかなと思ったんですけどやってみることに。

Search Regex

Search Regex

プラグインをインストールして有効化しておきます。

ツール → Search Regexで画面を表示されます。

Search Regexを開けます

Search Regexを開けます

Search patternに今のURL、Replace patternに//で始まるプロトコル相対URLを入力します。ぼくの場合はこうなります。

Search pattern:http://moori.musyozoku.com

Replace pattern://moori.musyozoku.com

念のため”Search”ボタンを押して変更箇所を確認しておくことをおすすめします。問題なければReplace&Saveで完了です。

置換するURLを入力します

置換するURLを入力します

ソーシャルボタンをhttps対応に変更

次に修正するのがStinger5を使っている場合にはトップページと各記事の下に表示されるソーシャルボタンです。

ソーシャルボタン

ソーシャルボタン

 

これを出力しているのがこの2つのファイル。

  • sns-top.php
  • sns.php

まずこの2つのファイルを修正する前にやることはバックアップ。修正に失敗してボタンが表示されなくなったら嫌ですからね。

ぼくはFTPクライアントソフトでサーバに接続してこの2つのファイルをダウンロードしておきました。面倒くさいなら管理画面からこの2つのファイルの編集画面を出してそれぞれメモ帳にコピーしておいてもいいかと。

次の操作で編集画面を表示させることができます。

外観 → テーマの編集

右にファイル名が表示されるので選択する。

sns-top.php

Twitter、Googleはすでにhttpsに対応しているので変更は不要。

Facebookは<iframe>タグのsrcに書かれているURLをhttpsに変更。

はてなは<img>と<script>タグのsrcに書かれているURLをhttpsに変更。

sns-top.php

sns-top.php

sns.php

Twitter、Googleはすでにhttpsに対応しているので変更は不要。

Facebookは<iframe>タグのsrcに書かれているURLをhttpsに変更。

はてなは<img>と<script>タグのsrcに書かれているURLをhttpsに変更。

sns.php

sns.php

はてなブックマークのユーザー数をhttps対応に変更

内部リンクを貼るときにこんな感じでブックマークされたユーザー数を表示するようにしている場合には変更が必要です。

ブックマークのユーザー数

ブックマークのユーザー数

 

変更箇所はリンクと画像の2箇所です。 Search Regexで次のように置換しました。

リンクの置換

(置換前) http://b.hatena.ne.jp/entry///moori.musyozoku.com

(置換後)http://b.hatena.ne.jp/entry/s/moori.musyozoku.com

ユーザー数画像

(置換前)<img src=”http://b.hatena.ne.jp/entry/image/http://moori.musyozoku.com

(置換後)<img src=”https://b.hatena.ne.jp/entry/image/https://moori.musyozoku.com

Amazonアソシエイトの画像リンクをhttps対応に変更

Amazonアソシエイトを利用している場合にも変更が必要になります。

Amazonの場合にはhttpとhttpsとでは画像の取得先が違います。

httpの場合:http://ecx.images-amazon.com

httpsの場合:https://images-na.ssl-images-amazon.com

ということでこれも Search Regexで次のように置換しました。

(置換前)http://ecx.images-amazon.com

(置換後)https://images-na.ssl-images-amazon.com

Amazonの画像取得先を変更する

Amazonの画像取得先を変更する

実はまだ未対応なものもあるのです

今回は以上の変更を行ったんですが、使用しているサービスによってはhttpsに対応していないものもありました。それらを使用しているページでは警告が表示されてしまっています。

こればかりはhttpsに対応されるまで待つしかないのかなっていう感じでしょうか。また新しい情報が分かったら追記したいと思います。

-デジタルライフ, ブログ運営
-,

「デジタルライフ」のオススメ

Google Nowの画面

Google Nowからの興味ない通知をさせないようにする方法

興味のない通知はGoogle Nowで拒否しよう 最近ぼくのスマホによくこんな通知が現れます。 阪神 0ー0 中日 ゲーム中 どうでもいいがな! 野球ファンの方すみません。ぼくは野球にまったく興味がな …

SIMカード

SMS対応SIMの方が良い理由

SMSの必要に迫られた ぼくは今まで格安SIM・OCNモバイルONE(月額料金は972円)を使っていました。最初のうちは全然これで問題なかったんですけど最近になってSMSが使えた方が良いって思うように …

使ってみようをタップ

自分のスマホをもっと便利に使わない?Google Nowの始め方

Google Nowを使うとなにが良いのか? Googleの提供しているGoogle Nowって言うのが地味に便利なので紹介します。何が便利かっていうとですね、自分の必要としている情報が一つのページに …

Chromeでは緑の鍵マークが付く

エックスサーバーでSSLを申し込む手順

このブログをhttpsで接続できるようにしました。 WordPressで運営しているブログをhttps化する方法 | 人生は宇宙だ! このブログはエックスサーバーというレンタルサーバーを使っているので …

【WordPress・Mac】テスト用ブログを作って自分のパソコンで動かす方法徹底解説

こんにちは、元SEをやってたmoriです。 今回は自分のブログを自分のパソコンに入れて動かす方法について紹介します。 今回お話しする内容は、公開しているブログは今まで通りに運用して、デザインやプログラ …

moriのプロフィール

自炊の楽しさ伝えます!

自炊デリバリー

検索

カテゴリー

今日もいろいろつぶやきます

moriのほしいもの

noteもやってるよ

Instagramもよろしくね