WordPressのフロント表示にCSSとJavaScriptファイルを読み込む方法

WordPressのフロント表示にスタイルCSSファイルとJavaScriptファイルを読み込ませます。wp_enqueue_style()関数とwp_enqueue_script()関数をwp_enqueue_scriptsにフックして実現します。

コンテンツ

フロントエンドにスタイルシートを読み込む
- wp_enqueue_style() 書式
- 記述例
フロントエンドにスクリプトを読み込む
- wp_enqueue_script() 書式
- 記述例
スタイルシートとスクリプトをまとめて記述する

フロントエンドにスタイルシートを読み込む

スタイルシートを<head>タグ内で読み込むためには、wp_enqueue_style()関数をアクションフックであるwp_enqueue_scriptsにフックさせます。

function my_emqueue_styles() {
    wp_enqueue_style(
        string $handle,
        string $src = '',
        string[] $deps = array(),
        string|bool|null $ver = false,
        string $media = 'all'
        )
    };
add_action('wp_enqueue_scripts', 'my_emqueue_styles');

wp_enqueue_style() 書式

$handle	必須。一意のスタイルシートの名前を指定する。
$src	任意。スタイルシートのURL。初期値：`''`
$deps	任意。依存する（このスタイルシートより前に読み込まれる必要がある）スタイルシートのバンドルを配列で指定。依存関係がない場合は空の配列を指定するか、記述しない。初期値：`array()`
$ver	任意。スタイルシートのバージョン番号を指定する文字列。クエリ文字列として URL に追加される。`false`の場合はWordPress のバージョン番号、`null`の場合はバージョンは追加されない。初期値：`false`
$media	任意。スタイルシートのメディアを指定。初期値：`all`

注意事項

バンドル名が重複している場合、あとから読み込んだスタイルシートが読み込まれない。
依存関係を指定しない場合、依存関係を指定したスタイルシートが優先的に読み込まれたあとに読み込まれる

記述例

必須のバンドル名を指定

function my_enqueue_styles() {
    wp_enqueue_style(
		'test01-style',
		get_theme_file_uri('/css/test01.css')
	);
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');

<!-- 結果 -->
<link
	rel="stylesheet"
	id="test01-style-css"
	href="https://pensta.net/pensta/wp-content/themes/pensta-theme/css/test01.css"
	media="all"
>

依存するスタイルシートのバンドル名で指定

依存関係がない場合

function my_enqueue_styles() {
    wp_enqueue_style(
		'test01-style',
		get_theme_file_uri('/css/test01.css'),
		array()
	);
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');

依存関係を指定する場合。この場合、test01.cssの次にtest02.cssが読み込まれ、スタイルは上書きされる。

function my_enqueue_styles() {
    wp_enqueue_style(
		'test01-style',
		get_theme_file_uri('/css/test01.css')
	);
    wp_enqueue_style(
		'test02-style',
		get_theme_file_uri('/css/test02.css'),
		array('test01-style')
	);
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');

<!-- 結果 -->
<link
	rel="stylesheet"
	id="test01-style-css"
	href="https://pensta.net/pensta/wp-content/themes/pensta-theme/css/test01.css"
	media="all"
>
<link
	rel="stylesheet"
	id="test02-style-css"
	href="https://pensta.net/pensta/wp-content/themes/pensta-theme/css/test02.css"
	media="all"
>

常に最新のファイルを適用させる

$verにファイルの更新日時を付与し、ファイルパスのクエリストリングを変更すると、キャッシュが破棄され、常に最新の更新ファイルの内容が適用されます。

function my_enqueue_styles() {
    wp_enqueue_style(
		'test01-style',
		get_theme_file_uri('/css/test01.css'),
		array(),
		filemtime( get_theme_file_path( '/css/style.css' ) )
	);
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');

<!-- 結果 -->
<link
  rel="stylesheet"
  id="test01-style-css"
  href="https://pensta.net/pensta/wp-content/themes/pensta-theme/css/test01.css?ver=1735398743"
  media="all"
/>

フロントエンドにスクリプトを読み込む

JavaScriptファイルフロントエンドの<head>タグ内で読み込むためには、wp_enqueue_script()関数をアクションフックであるwp_enqueue_scriptsにフックさせます。

function my_enqueue_scripts() {
	wp_enqueue_script (
		string $handle,
		string $src = ”,
		string[] $deps = array(),
		string|bool|null $ver = false,
		array|bool $args = array()
	)
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

wp_enqueue_script() 書式

$handle	必須。一意のスクリプトの名前を指定する。
$src	任意。スクリプトのURL。初期値：`''`
$deps	任意。依存する（このスクリプトより前に読み込まれる必要がある）スクリプトのバンドルを配列で指定。依存関係がない場合は空の配列を指定するか、記述しない。初期値：`array()`
$ver	任意。スタイルシートのバージョン番号を指定する文字列。クエリ文字列として URL に追加される。`false`の場合はWordPress のバージョン番号、`null`の場合はバージョンは追加されない。初期値：`false`
$args	任意。キーが`strategy`と`in_footer`からなる連想配列を指定する。 `strategy`：`'defer'`もしくは`'async'`を指定。 `in_footer`：スクリプトをフッターで出力するか。初期値は`false`のため未指定の場合は`head`でよみこむ

記述例

スクリプトをdeferとしてhead内で読み込む

function my_enqueue_scripts() {
  wp_enqueue_script(
	'test01-script',
	get_template_directory_uri() . '/js/test.js',
	array(),
	filemtime( get_theme_file_path( '/js/test.js' ) ),
	array(
		'strategy'  => 'defer'
		)
	);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

<!-- 結果 -->
<script
  src="https://pensta.net/pensta/wp-content/themes/pensta-theme/js/test.js?ver=1735542890"
  id="test01-script-js"
  defer=""
  data-wp-strategy="defer"
></script>

スクリプトを</body>直前で読み込みたい場合は'in_footer' => trueを指定します。

function my_enqueue_scripts() {
  wp_enqueue_script(
	'test01-script',
	get_template_directory_uri() . '/js/test.js',
	array(),
	filemtime( get_theme_file_path( '/js/test.js' ) ),
	array(
		'strategy'  => 'defer',
		'in_footer' => true,
		)
	);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

スタイルシートとスクリプトをまとめて記述する

function my_enqueue_files() {

	wp_enqueue_style(
		'test01-style',
		get_theme_file_uri('/css/test.css'),
		array(),
		filemtime( get_theme_file_path( '/css/test.css' ) ),
		false
	);

	wp_enqueue_script (
		'test01-script',
		get_template_directory_uri() . '/js/test.js',
		array(),
		filemtime( get_theme_file_path( '/js/test.js' ) ),
		array(
			'strategy'  => 'defer'
			)
		);

}
add_action('wp_enqueue_scripts', 'my_enqueue_files');

リファレンス

ペンギンスタート