WordPressヘッダーでレンダリングブロックしているJavascriptをフッターで読み込むカスタマイズ方法

WordPressデフォルトでは、ヘッダーでjquery.jsやjquery-migrate.min.jsが読み込まれます。

また、テーマやプラグインによっては、ヘッダーでJavaScriptファイルを読み込むものも多いです。

こういったJavaScriptファイルをヘッダーで読み込んでいる場合、読み込みが終了するまでブラウザ上で描画がされず処理が止まっしまいます。これが、レンダリングブロックです。

なので、レンダリングブロックが起こるJavaScriptファイルは、なるべくサイト描画は終わったあとのフッターで読み込むことが好ましいです。

というわけで、今回はヘッダーで読み込まれるJavaScriptファイルを、フッターで後から読み込ませるようにするためのWordpressカスタマイズ方法の紹介です。

ヘッダー部分に書かれたCSSファイルでもレンダリングブロックはおきますが、回避するための対処方法が変わってくるため、今回はJavaScriptファイルのみのカスタマイズ方法の紹介です。
スポンサーリンク
レクタングル(大)広告

主な手順

今回のWordpressカスタマイズでやることは、以下の手順のみになります。

  1. functions.phpにコードをコピペ

数行のコードをコピペするだけの簡単な作業になります。

行かれ、詳しい内容について説明します。

functions.phpにコードをコピペ

使用中のテーマのfunctions.phpに以下のコードを貼り付けてください。

上記のコード内でやっていることを簡単に説明すると、まず、スクリプトファイル読み込みの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の場合

ChromeでのjQueryエラー

Uncaught ReferenceError: jQuery is not defined

Firefoxの場合

FirefoxのjQueryエラー

ReferenceError: jQuery is not defined

動作確認

このようにカスタマイズすることで、Wordpressデフォルトでは<head></head>内で読み込まれていた以下のようなscriptタグがフッター部分に移動しているはずです。

ソースコードをなどから確認してみると、移動しているのがわかるかと思います。

ちなみに、フッターに移動する場所は、テンプレートファイル内のwp_footer関数が読み込まれている場所です。

まとめ

こんな感じで、wp_enqueue_script関数を用いて読み込まれているスクリプトファイルは、結構簡単にフッターに移動することができます。

ただ、<script>タグで直接読み込まれているスクリプトファイルには適用されないので、テーマやプラグイン利用時にデベロッパーツール等のコンソールを開いてエラーが出ていないかチェックする必要があります。

そんなわけで、「jquery.jsやjquery-migrate.min.jsをフッターに移動したい」なんて場合には、結構手軽かもしれません(要エラーチェック)。