WPプラグインのJsの読み込みを移動させる

WEB開発

2018.08.15

この記事は約2分で読めます。

ワードプレスのプラグインを導入した場合に、ヘッダーにjavascriptが挿入されレンダリングブロックされてしまう場合があります。
そのさい、javascriptをヘッダーからフッターへ移動させる方法。

以下をfunction.phpへ記述。
なお、すべてのheaderで出力しているjavascriptの呼び出しがフッターに移動されるため注意。
導入後はバグなく動いているか確認しよう。

/*
 * JSファイルをフッターへ移動
 */
add_action('wp_enqueue_scripts', function(){
  //ヘッダーのスクリプトを一旦削除
  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);
});

参考
WordPressでプラグインから出力されるjQueryライブラリやCSSを整理する
 WordPress : レンダリングをブロックしている JavaScript/CSSへの対策