Know Easy 
WordPressサイトを運営していると、特定のカテゴリやページで特別なJavaScriptライブラリを使いたい場面があります。
例えば、データビジュアライゼーションライブラリのD3.jsを「個別銘柄」というカテゴリの投稿で使いたいとしましょう。
全てのページでD3.jsを読み込むのは無駄な場合、特定のカテゴリだけでスクリプトを読み込む方法があります。
下記のマネックスグループについての投稿ですが、今回ご紹介するやり方でD3.jsを読み込んだページです。
マネックスグループ（8698）
特定のカテゴリだけでスクリプトを読み込む利点
それでは利点についておさらいしましょう
パフォーマンス向上する
不必要なスクリプトを読み込まないことで、ページの読み込み速度が向上します。
メンテナンス性が上がる
特定のカテゴリやページでしか使わないスクリプトがあれば、そのスクリプトの管理が簡単になります。
依存関係の簡素化できる
特定のスクリプトが特定のカテゴリやページでしか必要ない場合、そのスクリプトと他の要素との依存関係を簡単に把握できます。
では、どのような場面で利用すべきか？
スクリプトが重い場合、サイト全体で読み込んでしまうとパフォーマンスに影響が出る場合はカテゴリや特定のタグなどごとにスクリプトを読み込みます。
また、明らかに他の投稿カテゴリやタグでは必要ない場合。
サンプルコード
functions.phpに以下のコードを追加します。
function enqueue_d3() {
if ( is_single() && has_term( '個別銘柄', 'category' ) ) {
// D3.jsのスクリプトを読み込む
wp_enqueue_script( 'd3-js', 'https://d3js.org/d3.v7.min.js', array(), '7.0.0', false );
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_d3' );このコードを追加すると、「個別銘柄」というカテゴリの投稿ページでのみ、D3.jsが読み込まれます
wp_enqueue_scriptの引数について解説
| $handle | スクリプトのユニークな名前（識別子）。 この名前を使ってスクリプトを後で参照したり、依存関係を設定したりすることができます。 |
| $src | スクリプトファイルのURL。 絶対または相対URLを指定できます |
| $deps | このスクリプトが依存する他のスクリプトの配列。 指定されたスクリプトは、このスクリプトが読み込まれる前に読み込まれます。 デフォルトは空の配列です。 |
| $ver | スクリプトのバージョン番号。この引数は、キャッシュを制御するために使われることが多いです。 バージョン番号が指定されていると、スクリプトのURLの末尾にクエリパラメータとして追加されます。 |
| $in_footer | trueまたはfalseを指定します。trueに設定すると、スクリプトは</body>タグの直前に配置されます。falseに設定すると、スクリプトは<head>セクション内に配置されます。 |
今回のサンプルコードに照らし合わせて解説
wp_enqueue_script( 'd3-js', 'https://d3js.org/d3.v7.min.js', array(), '7.0.0', false );
$handle: 'd3-js'という名前でスクリプトを登録しています。
$src: スクリプトのソースとしてhttps://d3js.org/d3.v7.min.jsを指定しています。
$deps: 依存するスクリプトはないので、空の配列（array()）を指定しています。
$ver: バージョン7.0.0としています。
$in_footer: falseに設定しているので、このスクリプトは<head>セクション内で読み込まれます。
