コンピュータ・インターネット関係

Stinger5 20141011とAffingerをHTTPS化する際に注意する事項

おはようございます。
TOMOROHです。

さて、先日、本サイトをSSL化したのですがHTTPS化した際、画面の表示が正しく表示されない状態になりました。
SSL化についてはこの夏GoogleがSSLサーバ証明書を発行するとか言っていたので、検索結果への影響にSSL化されていることが今まで以上に重要になってくる可能性があります。
といっても、正直良質な外部リンク以上に影響がでるとは思えませんが。

1.HTTPS化した時の基本のお話

サイトをHTTPS化するにあたり、基本的な注意点は以下のとおりです。
  Wordpressの場合はHTTPS用のプラグインを導入する必要があります。
  これについては、「Wordpress HTTPS」あたりでググっていただければそれなりにでてくると思うので各自ご確認を。

IE:
  InternetExplorerを利用した場合、HTTPSのサイトで同一サイト以外からファイルを呼び出していた場合、警告メッセージが表示され、
  「すべてのコンテンツを表示」をクリックしないと正しく表示されない事象が発生します。
  この場合、確認するのは以下の点
  ・外部のスタイルシートを呼び出しているかどうか
  ・iframeタグを利用し外部のソースを呼び出していないか
  ・Scriptタグを利用し外部のソースを呼び出していないか
  が主かと。

これにより発生する事象としては、
  ・スタイルが崩れる
  ・SNSアイコンが表示されない
  上がクリアされないと、
  ・Googleアドセンスが表示されない
  とったところです。

2.対処方法

今回、利用したStinger5は20141011のバージョン。
  ※最新の「Affinger」ではCSSの部分は修正されていたため変更が不要となっていました。
  ですので、外部リソースを利用(CDNの利用等)している場合は、
  リンクの頭の
  「http://」を
  「//」
  へ変更します。

テーマとしては、おそらくこれだけです。

あとの編集箇所は各プラグイン。
  これも同様にすべて変更する必要があります。

これ、修正を始めると、利用しているプラグインの中のURIをすべて上記対応する必要があります。

手元のプラグインで修正が必要そうだなぁと感じたのが以下の2つ
  ・Content Form 7
  ・Yet Another Related Posts Plugin(YARPP)
  ・Wordpress Popular Posts

3.テーマの変更箇所

基本、外部のファイルを参照しているものはプロトコル(httpの部分)を削除していきます。

ヘッダー:header.php

おそらく最新版では修正されていそうです。
変更前:link href="http//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"
http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js
変更後:link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"
//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js

sns.php

こちらは2か所
変更前:
iframe src="http://www.facebook.com/plugins/like.php?href=sns-top.php

こちらも2か所
変更前:
iframe src="http://www.facebook.com/plugins/like.php?href=single.php

こちらは同じところが2か所あるので注意です。

変更前:
div itemscope itemtype="http://data-vocabulary.org/Breadcrumb

変更後:
div itemscope itemtype="//data-vocabulary.org/Breadcrumb

functions.php

こちらはStingerだけです。

変更前:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

変更後:
//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

ということで、かなり修正個所が少ないと感じました。

WordPressのバージョンが4.2以上の場合

あと、WordPressのバージョンが4.2以上の場合は以下のプラグインの追加を推奨します。
WordPressの4.2から絵文字が追加されており、このバージョンが管理画面の速度低下を招いていたりと、悪さをしていたようです。
正直、絵文字は私は不要ということで、プラグインで無効化しました。
なお、これは、function.phpでも無効化できますが、テンプレート変更したらアウトなのでプラグインのほうがわかりやすいと思います。

無効化したプラグイン

・Yet Another Related Posts Plugin(YARPP)
  ・Wordpress Popular Posts
です。
コンテンツフォームはこれから考えます。

ということで、WordPressを利用している方は、HTTPS化はプラグインの検証がかなり必要になりそうです。

最後に、テンプレートの作者であるENJIさんありがとうございました。

ではでは。

参考URL:

2015/06/23 「header.php」の修正漏れを追記

広告

-コンピュータ・インターネット関係

Copyright© TOMOROH’sBlog , 2020 All Rights Reserved Powered by AFFINGER5.