【簡単コピペ】wp_enqueue_script で asyncやdeferを簡単に付与する方法

Webサイトの高速化するにあたって、jsファイルの読み込みの制御の async と defer 属性の付与が必要になると思います。今回は、設定するときに面倒になりがちな記述を簡単に設定できるようにしたソースを共有しとこうと思います。

Classを使用し、一行で指定するようにします。

wp_enqueue_scriptを使用してasyncかdeferを簡単に付与するソース

下記の『Classのソースを用意』『Classを呼び出し実行する』をコピペすればとりあえず動きます。

Classのソースを用意

functions.phpに下記を追記します。
(Classファイルを作成し別ファイルとして管理するほうがいいとは思いますが)

<?php

Class EnqueuScript
{
	private $handle;
	private $src;
	private $deps;
	private $ver;
	private $in_footer;
	private $attribute;

	public function __construct($handle = '', $src = false, $deps = [], $ver = false, $in_footer = false, $attribute = false)
	{
		$this->handle = $handle;
		$this->src = $src;
		$this->deps = $deps;
		$this->ver = $ver;
		$this->in_footer = $in_footer;
		$this->attribute = $attribute;


		$this->enqueue_styles();
		$this->add_attribute();

	}

	private function enqueue_styles(){
		add_action('wp_enqueue_scripts', function(){

			wp_enqueue_script( $this->handle, $this->src, $this->deps, $this->ver, $this->in_footer);
		});
	}

	private function add_attribute() {
		if (empty($this->attribute)) {
			return false;
		}

		add_action('script_loader_tag', function($tag, $handle){
			if ($handle === $this->handle) {
				return str_replace(' src=', " $this->attribute src=", $tag);
			}

			return $tag;

		}, 10, 2);
	}
}

Classを呼び出し実行する

Class EnqueuScript を記述したら、下記ソースで処理をさせます。

new EnqueuScript('main-script', '/assets/app.js', [], '1.0.0', true, 'async');

第１～５引数までは、wp_enqueue_scriptの指定。

第６引数で、『”async”』の指定をしています。

『defer』を指定する場合は、第６引数を『”defer”』の文字列を渡してあげてください。何も指定しない場合は、『false』を渡してあげてください。

まとめ

これなら『Classを呼び出し実行する』の部分を追記していけばいいし、wp_enqueue_script と似たかきかたでシンプル化と思うのでいいんじゃないかなと思います。

改良したら、この記事のソースコードをアップデートしていきたいと思います。