WordPress で Javascript の読み込み位置を調整する方法についてのメモ書きです。
TwentyTwelve のカスタマイズ中に wp_print_scripts を利用して独自の Javascript を読み込ませていましたが、ページの <head> 内に出力されてしまうので対処したいと考えていました。
ブラウザの表示上には問題ありませんが、書籍「ハイパフォーマンス Web サイト」のルールにもあるとおり、Javascript は後に読み込んだ方が表示のパフォーマンスは良くなるみたいですので今回対応しました。
WordPressのJavascript出力キューを調整する
WordPress で Javascript の読み込む位置を調整するには wp_enqueue_script を利用すると簡単です。
WordPress Codex を読むと wp_enqueue_script にはフッタ部分に出力するパラメータがあるのでこれを有効にすると良いです。
WordPress 関数メモ
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
- $handle = スクリプトのハンドル名
- $src = スクリプトのパス (uri)
- $deps = 関連するスクリプトのハンドル名
- $ver = スクリプトのバージョン
- $in_footer = </body> の直前に出力
※ $in_footer を使うにはテンプレートファイルで wp_footer() が記述されている必要があります。
実際に以下のような記述になります。
wp_register_script('myscript', get_stylesheet_directory_uri().'/js/navigation.js', false, '1.0', true );
functions.php に記述する内容は以下のような感じにしました。
if (!is_admin()) {
function deregister_script(){
wp_deregister_script('jquery');
wp_deregister_script('comment-reply');
wp_deregister_script('twentytwelve-navigation');
}
function register_script(){
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js', false, '2.0.0', true );
wp_register_script('scroll-top', get_stylesheet_directory_uri().'/js/scroll-top.js', array('jquery'), '1.0', true);
wp_register_script('comment-reply', home_url('/wp-includes/js/').'comment-reply.min.js', array(), '1.0', true);
wp_register_script('twentytwelve-navigation', get_stylesheet_directory_uri().'/js/navigation.js', array(), '1.0', true);
}
function add_script() {
deregister_script();
register_script();
wp_enqueue_script('jquery');
wp_enqueue_script('scroll-top');
wp_enqueue_script('twentytwelve-navigation');
wp_enqueue_script('social');
}
add_action('wp_enqueue_scripts', 'add_script');
}
add_action で wp_print_scripts を使っても </body> の直前で出力はしてくれるのですが、ここは Codex を参考に wp_enqueue_scripts へ変更。
変更後は Javascript の動作に問題がないか、HTML ソースを見て意図している位置に出力されているかを確認します。
この読み込み位置の変更がどれくらい効果があるかは後で検証してみたいと思いますが、WordPress の表示高速化をする際にはこういう細かい対処もしていきたい所です。
簡単ですが Javascript の読み込み位置を調整する方法は以上になります。
参考にしたページ