JSファイルを読み込むときに、deferやasyncを付与したい・・・
get_template_directory_uri()をJSファイル内で使用したい・・・
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を参考にしてください。
・WordPress Codex日本語版
引数によって色んな指定が可能ですが、状況によって必要になるパラメータを付与できないのが難点です。
ですが、フィルターフックを使用することによってこれを可能にします。
deferまたはasyncを付与する
SEO対策も考慮して、一部のJSファイルにはdeferやasyncなどのパラメータを付与したいですね。
ですが、先ほどのwp_enqueue_scriptだけではできないので、script_loader_tagというアクションフィルターを使用してスクリプトタグの記述を書き換えます。
今回はdeferを付与するサンプルを公開します。こちらもfunctions.phpへ記述してください。
// 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);
指定したハンドルに該当する場合は、deferを付与するという内容です。
今回if判定でin_arrayを使用しているのは、もし複数のハンドルを指定する場合や追加のスクリプトタグが必要になったときに手間がかからないため、保守の面から見ても良いからです。
str_replaceの部分で、$tagに格納されているスクリプトタグの【src=】という部分を【 defer src=】に書き換えています。こうすればdeferやasyncの追加は簡単にできます。
idやdataをもたせる
scriptタグに対してIDや、dataを持たせることができれば、PHPで使用している変数の値をJSファイル内に渡せるので便利です。
ですが、こちらもwp_enqueue_scriptだけでは付与できないので、前項でdeferを追加したときと同様のアクションフィルターを使用して付与します。
テーマまでのパスを取得
WordPressの場合、JSファイル内で画像のパスを指定するのが少し面倒です。相対パスにするわけにいかないため、絶対パスで記述することになりますが、テーマファイルまでのURLを毎回コピペしていれば可視性も保守性も悪くなります。
なので、get_template_directory_uri()で取得したURLをdataへセットします。
return str_replace('>', ' id="'.$handle.'" data-temp_path="'.get_template_directory_uri().'">', $tag);先ほどのサンプルコードのreturn部分を変更しました。
こうすることでidにハンドル名が設定でき、data-temp_pathにget_template_directory_uri()で生成したパスをセットすることができます。
あとはこれを、JSファイル側で受け取るだけです。
今回はWordPressのためjQueryを使用したサンプルコードになります。
// get_template_directory_uri()で生成したパスを取得する関数
var getTempPath = function(){
var temp_path = $('#common-script').data('temp_path');
}
// 作成した関数をまとめて発火
jQuery(function($){
getTempPath();
});
まとめ
いかがだったでしょうか。
今回は「WordPressのJSファイル読み込みで覚えておきたい便利ワザ」について解説しました。
WordPressを使ったサイト制作やブログの立ち上げをする際、SEO対策や保守効率をあげるためには便利なので、ぜひ参考にしてくださいね。