WordPressでCSS・JSファイルを読み込む方法。wp_enqueue_scriptsを解説

ワダショウゴ

2021年1月1日 17:55

この記事では、WordPressで推奨されている外部ファイルの読み込み方（wp_enqueue_scripts）について解説します。

当ブログテーマ（WADABLOG）は自作しましたが、実際に使用しています。簡単な上、WordPress開発では必ず使うので初心者必見です。

WordPressでCSS・JSファイルを読み込む方法

WordPressでは、header内でスタイルシートなどのCSSファイルを読み込むことは可能ですが公式で推奨のwp_enqueue_scriptまたはwp_enqueue_styleという関数を使用しましょう。

これらを使う利点としては、

・ファイルの重複読み込み回避ができる
・functions.php内で簡単に管理ができる

ですね。下記のような記述形式でfuctions.php内で使います。

function add_files(){
   // 読み込みこまれるJSファイル
   wp_enqueue_script('ハンドル名 A', 'ファイルのURL', '', 'バージョン');
   wp_enqueue_script('ハンドル名 B', 'ファイルのURL', array('先に読み込まれるファイルのハンドル名'),'バージョン', true);
   
   // 読み込まれるCSSファイル
   wp_enqueue_style('ハンドル名 ', 'ファイルのURL', '', 'バージョン');
}
// アクションフックで使用
add_action('wp_enqueue_scripts', 'add_files');

それでは解説です。

wp_enqueue_script関数の使い方

wp_enqueue_script関数のパラメータと説明は下記のとおりですね。

♦Code01（PHP）

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);

$handle
ファイルを区別するための名前（ハンドル名）を入力してください。
ダブり厳禁。必須項目です。初期値はなし。

$src
ファイルのURLを入力してください。初期値はfalse

$deps
先に読み込みたいファイルのハンドル名を入力してください。
入力するときはarray('ハンドル名')で記述。初期値はarray()

$ver
任意のバージョンを入力。初期値はfalse

$in_footer
ファイルの読み込み位置を指定。
trueでwp_footer()にて読み込みます。初期値はfalse

上のルールに従ってJSのファイルを読み込むときに使いましょう。

$depsでは、array('ハンドル名A', 'ハンドル名B')のように複数選択可能。

バージョンのところは日付が無難ですね。

♦Code02（PHP)

define("DIRE", get_template_directory_uri());

function add_files(){
   // scripts
   wp_enqueue_script('jquery', DIRE.'/scripts/jquery-3.5.1.min.js', '', '20201220');
   wp_enqueue_script('bootstrap', DIRE.'/scripts/bootstrap.bundle.min.js', array('jquery'),'20201220', true);
}
add_action('wp_enqueue_scripts', 'add_files');

１番目にjqueryとハンドル名をつけたjQueryのファイルを読み込み、２番目でjQueryのファイルが優先されるようにbootstrapと名付けたBootstrapのファイルを読み込みます。

Bootstrapは先にjQueryが読み込まれている必要があるので、このように優先度をつけて読み込ませます。

wp_enqueue_style関数の使い方

wp_enqueue_style関数もwp_enqueue_script関数とほぼ同じです。

♦Code03（PHP）

wp_enqueue_style($handle, $src, $deps, $ver, $media);

$handle
ファイルを区別するための名前（ハンドル名）を入力してください。
ダブり厳禁。必須項目です。初期値はなし

$src
ファイルのURLを入力してください。初期値はfalse

$deps
先に読み込みたいファイルのハンドル名を入力してください。
入力するときはarray('ハンドル名')で記述。初期値はarray()

$ver
任意のバージョンを入力。初期値はfalse

$media
media属性がしていできます。
all, screen, handheld, printなどが選択可能。初期値はall

こちらはCSSファイルを読み込むときに使いましょう。

違いとしては$mediaですがあまり使わないので未記入でも問題ないでしょう。

♦Code04（PHP）

define("DIRE", get_template_directory_uri());
function add_files(){
   // CSS
   wp_enqueue_style('main', DIRE.'/style.css', '', '20201220');
   wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.14.0/css/all.css', '', '20201220');
}
add_action('wp_enqueue_scripts', 'add_files');
JSの読み込みとほぼ同じです。

ソースコードの詳細説明

当ブログ（WADABLOG）で使用しているコードの一部抜粋です。

下記のように、１つのadd_filesという関数内でCSSとJSを同時によみこむことができます。

♦Code05（PHP）

define("DIRE", get_template_directory_uri());
function add_files(){
   // デフォルトのjQueryの読み込みをなくす
   if(!is_admin()) wp_deregister_script('jquery');
   
   // scripts
   wp_enqueue_script('jquery', DIRE.'/scripts/jquery-3.5.1.min.js', '', '20201220');
   wp_enqueue_script('bootstrap', DIRE.'/scripts/bootstrap.bundle.min.js', array('jquery'),'20201220', true);
   
   
   // CSS
   wp_enqueue_style('main', DIRE.'/style.css', '', '20201220');
   wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.14.0/css/all.css', '', '20201220');
}
add_action('wp_enqueue_scripts', 'add_files');

パスの指定は長くなるので省略しよう。

Code05の１行目で、define関数を使って、get_template_directory_uri()をDIREと短く定義して使いまわせるようにしています。

このget_template_directory_uri()はよく使うのでこのように短くしておくとかなり便利です。

jQueryを任意のバージョンで読み込む場合

Code05の５行目で、WordPressデフォルトのjQueryの読み込みを回避しています。

任意のバージョンのjQueryを使いたいときや、重複を回避する際には上の例のように記述しましょう。

必ずアクションフックで記述しよう

今回解説したwp_enqueue_scriptおよびwp_enqueue_styleは単体では使えない関数です。

Code05の16行目記載のようにadd_action('wp_enqueue_scripts', '関数名');
として使用してください。

参照

本記事の作成にあたって。以下の記事を参考にさせていただいたので詳しく知りたい方はチェックしてみてください。

・SMART | functions.phpでJSやCSSを一元管理する

・WordPressでファイルを読み込むためのwp_enqueue_styleとwp_enqueue_scriptの使い方と引数の意味を理解しておこう。

この記事が気に入ったらサポートをしてみませんか？