WordPressのJSファイル読み込みで覚えておきたい便利ワザを2つ紹介します

WordPressには便利な関数が沢山用意されていますが、その全てが万能だということはありません。

今回はSEO対策でも必要になるdeferやasyncをスクリプトタグに付与させる方法と、テンプレートまでのパスをJSファイル内でも簡単に取得できる方法をサンプルコードをつけて解説します。

wp_enqueue_scriptを使った読み込み

WordPressでCSSファイルやJSファイルを読み込む場合、ヘッダーまたはフッター部分に直接記載する方法とfunctions.phpにアクションフックを記載するという方法の2つがあります。

ではまず、JSファイルの読み込みをするためのアクションフックの基本的な記述方法を見てみましょう。

// JSの読み込み

function scriptInclude(){

              wp_enqueue_script('common-script', get_template_directory_uri() . '/assets/js/common.js', [], date('U'), true );

}

add_action( 'wp_enqueue_scripts', 'scriptInclude' );

scriptIncludeという自作関数を作成し、最後のadd_actionでwp_enqueue_scriptsにフックしています。

引数の詳細については、以下のURLを参考にしてください。

引数によって色んな指定が可能ですが、状況によって必要になるパラメータを付与できないのが難点です。

ですが、フィルターフックを使用することによってこれを可能にします。

// deferの付与

function addDefer($tag, $handle) {

              $handles = ['common-script'];

              if(in_array($handle, $handles, true)) {

                            return str_replace(' src=', ' defer src=', $tag);

              }

              return $tag;

}

add_filter('script_loader_tag', 'addDefer', 10, 2);

return str_replace('>', ' id="'.$handle.'" data-temp_path="'.get_template_directory_uri().'">', $tag);

// get_template_directory_uri()で生成したパスを取得する関数
var getTempPath = function(){

              var temp_path = $('#common-script').data('temp_path');

}


// 作成した関数をまとめて発火
jQuery(function($){

              getTempPath();

});

まとめ

いかがだったでしょうか。

今回は「WordPressのJSファイル読み込みで覚えておきたい便利ワザ」について解説しました。

WordPressを使ったサイト制作やブログの立ち上げをする際、SEO対策や保守効率をあげるためには便利なので、ぜひ参考にしてくださいね。