WordPressデフォルトでは、ヘッダーでjquery.jsやjquery-migrate.min.jsが読み込まれます。
また、テーマやプラグインによっては、ヘッダーでJavaScriptファイルを読み込むものも多いです。
こういったJavaScriptファイルをヘッダーで読み込んでいる場合、読み込みが終了するまでブラウザ上で描画がされず処理が止まってしまいます。これが、レンダリングブロックです。
なので、レンダリングブロックが起こるJavaScriptファイルは、なるべくサイト描画は終わったあとのフッターで読み込むことが好ましいです。
というわけで、今回はヘッダーで読み込まれるJavaScriptファイルを、フッターで後から読み込ませるようにするためのWordpressカスタマイズ方法の紹介です。
目次
主な手順
今回のWordpressカスタマイズでやることは、以下の手順のみになります。
- functions.phpにコードをコピペ
数行のコードをコピペするだけの簡単な作業になります。
以下で、詳しい内容について説明します。
functions.phpにコードをコピペ
使用中のテーマのfunctions.phpに以下のコードを貼り付けてください。
//レンダリングブロックしているJavascriptの読み込みを遅らせる function move_scripts_head_to_footer_ex(){ //ヘッダーのスクリプトを取り除く remove_action('wp_head', 'wp_print_scripts'); remove_action('wp_head', 'wp_print_head_scripts', 9); remove_action('wp_head', 'wp_enqueue_scripts', 1); //フッターにスクリプトを移動する add_action('wp_footer', 'wp_print_scripts', 5); add_action('wp_footer', 'wp_print_head_scripts', 5); add_action('wp_footer', 'wp_enqueue_scripts', 5); } add_action( 'wp_enqueue_scripts', 'move_scripts_head_to_footer_ex' );
上記のコード内でやっていることを簡単に説明すると、まず、スクリプトファイル読み込みのwp_enqueue_scriptsをフックします。
そのフック関数内で、ヘッダーで読み込まれる「wp_print_scripts」、「wp_print_head_scripts」、「wp_enqueue_scripts」をremove_actionでキャンセルし、その後フッターでadd_actionにて読み込むようにしているだけです。
要は、「ヘッダーで読み込まれているスクリプトファイルをフッターで読み込め」と書いてある感じです。
今回のコードは、プラグインのコードを参考にさせていただきました。
参考 Speed Up – JavaScript To Footer — WordPress Plugins
注意点
上記のfunctions.phpに記入するコードは、wp_enqueue_script関数を用いて読み込まれているスクリプトファイルのみに有効です。
ですので、サイトの<head></head>内で直接<script>タグを用いて読み込んでいるプラグインや、テーマを利用している場合は、エラーが出ることがあるかと思います。
この方法を用いることにより、動作しなくなるプラグインやスクリプトもあるかと思います。エラーが出たり、スクリプトが正常動作しなくなる場合は、カスタマイズを元に戻してください。
jQueryが読み込まれていないので出るエラーの例
例えば、<head></head>内で、jQueryを利用するコードが直接書き込まれていた場合は、jQueryがフッターで読み込まれるため、利用できないので以下のようなコンソールエラーが出たりします。
Chromeの場合
Uncaught ReferenceError: jQuery is not defined
Firefoxの場合
ReferenceError: jQuery is not defined
動作確認
このようにカスタマイズすることで、Wordpressデフォルトでは<head></head>内で読み込まれていた以下のようなscriptタグがフッター部分に移動しているはずです。
<script src='https://xxxx.com/wp-includes/js/jquery/jquery.js'></script> <script src='https://xxxx.com/wp-includes/js/jquery/jquery-migrate.min.js'></script>
ソースコードをなどから確認してみると、移動しているのがわかるかと思います。
ちなみに、フッターに移動する場所は、テンプレートファイル内のwp_footer関数が読み込まれている場所です。
wp_footer();
まとめ
こんな感じで、wp_enqueue_script関数を用いて読み込まれているスクリプトファイルは、結構簡単にフッターに移動することができます。
ただ、<script>タグで直接読み込まれているスクリプトファイルには適用されないので、テーマやプラグイン利用時にデベロッパーツール等のコンソールを開いてエラーが出ていないかチェックする必要があります。
そんなわけで、「jquery.jsやjquery-migrate.min.jsをフッターに移動したい」なんて場合には、結構手軽かもしれません(要エラーチェック)。
わいひらさん、はじめまして。
記事を拝見しまして、コメントします。
functions.phpで、JavaScriptファイルをフッターに移動させると、スマホ時に、フッターかヘッダーにボタンを固定で表示した場合、「メニュー、サイドバー」が動きません。
Speed Up – JavaScript To Footerを使った場合ももちろん同様です。
そもそも自分の場合は、プラグインを入れておかしくなり、検索したらわいひらさんのこちらの記事を見つけ、念のため手動方法として試しました。
自分のサイトはちょっとカスタマイズしてしまっているし、プラグインもいくつかいれているので、念のため
新しいwordpressをサーバーにあげ(4.8.1)
プラグインは、デフォルトのみ、記事はHello world!のみの状態、
テーマは最新のsimplicity2.6.0.4+子テーマ
で確認してみましたが、やはり動きません。
Chromeによるとjquery.sidr.min.jsのエラーかなと。
レスポンシブにしている場合は、そもそも
[モバイルメニュータイプ]→[スライドイン・・・]は選択できないと思いますので、問題なくて、気付かない部分だと思います。
(レスポンシブ時の右上のハンバーガーは大丈夫ですので)
お忙しいとは思いますが、よろしければ確認していただけたら嬉しいです。
トピックスのほうでも同様の話がないか検索しましたが、CSS関係の読み込みの話は出てきましたが、Speed Up – JavaScript To Footerが原因でのボタンが機能しないという話はありませんでした。
速度アップの目的でこのプラグインを入れている方もいるのではと思います。
ただ自分の環境だけで起きている不具合の可能性もあるかもしれませんので、わいひらさんのほうでこの現象が確認できないようでしたら、このコメントは削除してくださってかまいません。
またはすでに解決している話でしたら、自分がその記事を探せなかったので、余計なことを書き、すみませんでした。
最近は突然の雨も多いし、暑かったり涼しかったりもありで体調を崩しやすいと思います。
無理せずゆっくり休んでくださいね。
体調が良くなってから見ていただけたら幸いです。