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

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

当ブログテーマは自作しましたが、実際に使用しています。簡単な上、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の読み込みとほぼ同じです。

ソースコードの詳細説明

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

下記のように、１つの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の使い方と引数の意味を理解しておこう。

WordPress プログラミング初心者

SHARE LINKS

RELATED

お仕事の依頼はコチラからどうぞ