このところのhttps化に伴うトラブルが続出している。
今度はスマホ表示のときのグローバルメニューが開きっぱなしになってる問題だ。
もちろんpcで見てるとわからないし、スマホで見ても地味なのでリロードすれば直るだろうと思って気にしていなかった。
でも気がついたらhttps化したサイト全部がスマホ表示のグローバルメニューが開きっぱなしになってる。
これはどう考えても原因はhttps化でしょ。
原因はjqueryだった
ぐぐってみると割りと簡単に見つかった。
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
jqueryを読み込むのにこういう書き方をしていたのだが、https 通信下では jQuery 本体がブロックされてしまうそうだ。
つまりhttps化した事によってjqueryがまったく動いてなかったんんだ。
pcでは何にも気がつかなかったという事はほとんどjqueryに頼っていなかった・・・・あ〜、あった。
「page top」のスクロール時の挙動が変だったかもしれない。
たぶんjquery使ってたような。
というかjavascript関係はほとんどjqueryに頼っている。
気がついてないだけど挙動がおかしい部分が他にもあるのかもしれない。
とりあえず解決策
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
このjqueryを読み込む部分で「http」だけを削除すればいいんですって。
参考記事
なんでhttpsに変更しないかというと、
●https〜
http、https、のページのどちらとも動作する
●http～
httpsのページでは動作しない（今回のケース）
●http部分自体を書かない。
http、https、のページのどちらとも動作する
ということで一番シンプルな「http部分自体を書かない」ことにした。
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
これね。
先頭は「:」もなしで「//」これからにする。
たぶんまだ出てくるのだろう
投稿記事内の内部リンクはプラグインでhttpからhttpsに書き換えたけど、テーマの中のテンプレートファイル（phpファイル）、この中に直書きしてるものは手書きで変えるしかないね。
今回のはブラウザのコンソールで確認出来たんだけど、他のどうなんだろう。
jqueryはもう古い？
さんざんjqueryを使っていろんなサイトを作って来ましたが、ここ何年か言われているのは「jqueryはもう古い」って事。
今の人はもうjquery使わないんですかね。
新しいフレームワーク、Angular・React・Vueなどが主流なのでしょうか。
でも聞いたところによると一般企業のサイトの約70％がいまだにjqueryを使っているそうですよ。
まだまだ現役ってことなんですね。
wp_head()の問題
さっき単純に
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
これを書き換えればいい、なんで簡単にすませてしまったけど、実際にやってみようと思ったらつまづいた。
header.phpに書いてあるんだろうと探したが見つからない。
あれ？
ページのソースを見ていく。
それとブラウザのコンソール。
たしかに「http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js」の読み込みに失敗しました、っていうエラーメッセージは出ている。
ページのソースにもhttp://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.jsが記述されている。
よ〜く、ページのソースとheader.phpを見比べていくと、header.phpのwp_head()のあたりに出力されているようだ。
wp_head()関数がhttp://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.jsを出力しているのだ。
wp_head()関数の内容を書き換えるの？
wp_head()関数の内容を書き換え
といってもやり方はあった。
いろいろググっていると、これが見つかった。
<?php wp_deregister_script(‘jquery’); ?>
<?php wp_head(); ?>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
wp_head()関数の前にあるのは「jquery」の読み込みをやめろ、という指示。
それでwp_head()関数の後ろに改めて読み込んで欲しいものを書く。
うまくいきそうだ。
だめだった。
理由はわからない。
しかたがないのでwp_head()関数を定義しているファイルdefault-filters.phpをみてみる。
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.jsの記述があって、それを書き換えれば終了と思った。
しかし、みつからない。
functions.php
また調べる。
どうやらfunctions.phpが怪しい。
開いたら、ドンピシャ。
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.jsの記述があった。
//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.jsに書き換えてみた。
解決！
いや〜結構かかったね。
以上「https化してjqueryが動かなくなる問題」という記事でした。
気に入ってもらえたらシェアしてくれると嬉しいです。