jQuery uiを読み込んだらエラーがでたThis request has been blocked; the content must be served over HTTPS.

以前、IE11でjQuery uiのデイトピッカーの表示されないということがありました。

その時と同じフォームにて、Google Chromeのデベロッパーツールでエラーメッセージが出ていることに気がつきました。

Mixed Content:The page at '該当ページのURL' was loaded over HTTPS, 
but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.js'. This request has been blocked; the content must be served over HTTPS.

メッセージの内容は、該当ページはSSL化されたページなのに、デイトピッカーの日本語化ファイルjquery.ui.datepicker-ja.jsを読み込んでいるURLはhttpsじゃないからブロックしてる。。。httpsで読み込みなさいといった感じのメッセージでしょうか。

wp_enqueue_scriptで読み込んだファイルを以下のSSL対応のURLに変更します。

https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js

さらに別のエラーが

httpsから始まるURLに変更して解決したかと思いきや、別のエラーが出ました。

jquery.ui.datepicker-ja.js Uncaught ReferenceError: jQuery is not defined.

jQueryを読み込んでいるはずなのにjQuery is not defined.と言われてしまう。

原因は、jQueryよりも、jquery.ui.datepicker-ja.jsの方が先に読み込まれていたからでした。

それもそのはず、wp_enqueue_scriptの記述に依存関係が記載されていませんでした。

修正前

wp_enqueue_script('jquery.ui.datepicker-ja','https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js');

修正後

wp_enqueue_script('jquery.ui.datepicker-ja','https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js',array('jquery'),'', true);

すごく初歩的なミスでした。。。

ひとまずこれでエラーは解消されました。。。

jQuerycontact form 7

Posted by ともろう