WEB制作のための情報サイト / unazuki Library

基本構文と使い方（引数・実行結果）

基本構文

スタイルシートを登録し、読み込み対象としてキューに追加します。キューに追加されたスタイルシートは、wp_head() が出力されるタイミングで自動的に読み込まれ、サイトに適用されます。

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

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

引数

実行結果

スタイルシートを登録し、読み込み対象としてキューに追加します。

例１．style.min.cssをキューに追加

下記の例では、get_theme_file_uri()を使ってテーマ直下にあるcssディレクトリ内のstyle.min.cssをキューに追加しています。キューに追加されたCSSはwp_head()で呼び出されます。詳しくはページ下の「よくある使い方」を参照してください。

wp_enqueue_style('main', get_theme_file_uri('/css/style.min.css'), [], 'v2026.1.1');

wp_enqueue_style('main', get_theme_file_uri('/css/style.min.css'), [], 'v2026.1.1');

学習者向け補足情報

よくある使い方

下記の例では、２つのCSSをwp_enqueue_style()で、２つのJavaScriptをwp_enqueue_script()でキューに追加しています。キューに追加されたcssはwp_head()で呼び出されます。JavaScriptは設定次第でwp_head()あるいはwp_footer()で呼び出されます。詳しくはwp_enqueue_script()を参照ください。

function my_theme_scripts() {
	wp_enqueue_style('main', get_theme_file_uri('/css/style.min.css'), ['swiper'], '2.1');
	wp_enqueue_style('swiper', get_theme_file_uri('/lib/swiper/swiper.min.css'), [], '1.1');
	wp_enqueue_script('main', get_theme_file_uri('/js/script.js'), ['swiper'], '1.0', true);
	wp_enqueue_script('swiper', get_theme_file_uri('/lib/swiper/swiper-bundle.min.js'), [], '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

function my_theme_scripts() {
	wp_enqueue_style('main', get_theme_file_uri('/css/style.min.css'), ['swiper'], '2.1');
	wp_enqueue_style('swiper', get_theme_file_uri('/lib/swiper/swiper.min.css'), [], '1.1');
	wp_enqueue_script('main', get_theme_file_uri('/js/script.js'), ['swiper'], '1.0', true);
	wp_enqueue_script('swiper', get_theme_file_uri('/lib/swiper/swiper-bundle.min.js'), [], '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

このコードを実行すると下記のようにlink要素がwp_head()で呼び出されます。なお、style.min.cssはswiper.min.cssに依存する指定なので（依存関係を指定する第３引数でswiperを指定）、見た目の順番通りではなく、mainはswiperの後に呼び出されます。

結果例：
<link rel='stylesheet' id='swiper-css' href='https://example.com/wp-content/themes/template-theme/lib/swiper/swiper.min.css?ver=1.1' type='text/css' media='all' />
<link rel='stylesheet' id='main-css' href='https://example.com/wp-content/themes/template-theme/css/style.min.css?ver=2.1' type='text/css' media='all' />
※javaScriptは割愛しています。

関連するテンプレートタグ