Blog

WordPressテーマのCSSとJSをfunctions.phpで読み込む方法

2017.03.19 2020.10.25 WordPress

WordPressテーマでは、CSSやJSなどの外部ファイルをfunctions.phpで読み込むことが推奨されています。外部ファイルの読み込みにはwp_enqueue_style関数、wp_enqueue_script関数を呼び出すアクションフックを作成します。

wp_head関数でCSSとJSを読み込むサンプルソース

下記のようにfunctions.phpに追記します。

functions.php
/* CSSの読み込み
---------------------------------------------------------- */
function register_stylesheet() { //読み込むCSSを登録する
	wp_register_style('reset', get_template_directory_uri().'/css/reset.css');
	wp_register_style('slick', get_template_directory_uri().'/js/slick/slick.css');
	wp_register_style('style', get_template_directory_uri().'/style.css');
}
function add_stylesheet() { //登録したCSSを以下の順番で読み込む
	register_stylesheet();
	wp_enqueue_style('reset', '', array(), '1.0', false);
	wp_enqueue_style('slick', '', array(), '1.0', false);
	wp_enqueue_style('style', '', array(), '1.0', false);
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

/* スクリプトの読み込み
---------------------------------------------------------- */
function register_script(){ //読み込むJSを登録する
	wp_register_script('slick', get_template_directory_uri().'/js/slick/slick.min.js');
	wp_register_script('functions', get_template_directory_uri().'/js/functions.js');
}
function add_script(){ //登録したJSを以下の順番で読み込む
	register_script();
	wp_enqueue_script('slick', '', array(), '1.0', false);
	wp_enqueue_script('functions', '', array(), '1.0', false);
}
add_action('wp_print_scripts','add_script');

テーマで使用するCSSやJSをwp_register_style関数、wp_register_script関数で登録します。

get_template_directory_uri関数は親テーマのディレクトリURIを返しますので、子テーマでこのアクションフックを使用する際にはget_stylesheet_directory_uri関数と使い分けるようにしましょう。

なぜアクションフックでCSSやJSを読み込むのか？

WordPressでは標準でwp_head関数からjQueryライブラリを読み込むようになっています。

WordPressテーマ独自で使用するjQueryプラグインなどは通常jQueryライブラリのあとに読み込ませたいわけですが、アクションフックを使えばそれらの読み込み順などの管理が容易になります。

また、子テーマを利用する場合、親テーマのCSSやJSファイルの内容を子テーマの方に格納されているファイルで上書きしたいというケースも出てきます。

その際に子テーマのfunctions.phpでアクションフックによって親テーマのファイルを読み込み、その後に子テーマのファイルを読み込むことで上書きすることができます。

子テーマを利用する場合、子テーマのCSSから@importで親テーマのCSSを読み込むこともできますが、この方法は現在では推奨されていません。アクションフックを利用して読み込むようにしましょう。