こんにちは、Webデザイナー主婦・ほしこです。
WordPressをいじり倒していたところ、
- 子テーマの「javascript.js」に自分で書いた記述が反映されない
- なんなら親テーマの「javascript.js」も反映されていない
- ページごとに適用される「カスタムCSS」の記述が反映されない
という問題が起こり、色々原因を探した結果、プラグインの設定の見直しで、すべてが一度に解決しました。
結論から言うと、JavaScriptを読み飛ばすプラグイン「Flying Scripts」の対象から「jquery.min.js?ver=1.12.4」をはずして、解決しました。
Googleの「PageSpeed Insights」でサイトをチェックし、読み込み速度の改善のため「使用していない JavaScript の削除」を行うべく、手っ取り早くFlying Scriptsを導入している人も多いんじゃないでしょうか。
検索してもなかなか解決方法が見つけられなかったので、かんたんに書き残しておきます。
トラブルの内容
最初に困ったのは、「子テーマフォルダ内のJavaScript.jsが、どうも効かなくなった」と気づいた時です。
ブログのテーマは「Cocoon」。子テーマ（Cocoon Child）のjavascript.jsに、スムーススクロールやモバイルサイドバーの開閉などを自分で仕込んでいたのですが、ある時からこれらが動かなくなっていました。
また、ページ先頭へスクロールする右下のボタンも、いつのまにか消えていました。つまり、自分ではさわっていないはずの親テーマのjavascript.jsも、反映されていないのです。
次に異変を感じたのは、投稿ページの「カスタムCSS」への記述が、表示に反映されなかった時です。カスタムCSSは、特定の投稿ページなど1ページだけに適用したいCSSを付加できる機能です。
キャッシュの削除、記述の誤字脱字の徹底チェックなど、ひととおりを試しても反映されず、途方に暮れました。
Flying Scripts設定変更で解決
解決法を探し求め、同じくCocoonを利用している方のソースコードを、Webデベロッパーツールなどで読ませてもらいました。すると、明らかに違う点が。
<footer>より少しあとのスクリプト系の記述が、自分のソースにはごそっと無い。
はっと気づき、少し前に導入した「Flying Scripts」というプラグインの対象から「jquery.min.js?ver=1.12.4」をはずすと…
javascript.jsも、カスタムCSSも、戻ってきました！
「Flying Scripts」は、WordPressの無料プラグインで、不要なJavaScriptファイルの読み込みを抑制するはたらきがあります。
少し前に、Googleの「PageSpeed Insights」でサイトの読み込み速度をチェック。読み込みを速くするため「使用していない JavaScript の削除」欄にピックアップされた「jquery.min.js?ver=1.12.4」を、Flying Scriptsを使って排除していたのです。
これが、jsファイルやカスタムCSSが読み込まれない原因でした。
いや、使われていないJSって、思いきり使っとるやん。
サイト表示高速化とJS読み込みの整合については、そのうち手を入れるかもしれません。
解決の手順
WordPress管理画面の左メニューから【プラグイン】→【Flying Scripts】を選択。Include Keywordsの項目から「jquery.min.js?ver=1.12.4」を削除して、【Save Changes】をクリック。これで一発OKでした。
まとめ
- 子テーマの「javascript.js」に自分で書いた記述が反映されない
- なんなら親テーマの「javascript.js」も反映されていない
- ページごとに適用される「カスタムCSS」の記述が反映されない
この問題への対処として、「Flying Scripts」という、JaveScript読み飛ばしプラグインの対象から「jquery.min.js?ver=1.12.4」をはずして解決した方法をまとめました。
サイト表示速度の改善をめざして、Flying Scripts以外にも同様のプラグインを使っていたり、JaveScriptまわりをいじっている人は多いでしょう。
もし似たような不具合が起こった場合、このページが参考になれば幸いです。