Blog

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

2017.03.19 2017.03.20WordPress

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

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

下記のようにfubnctions.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でアクションフックによって親テーマのファイルを読み込み、その後に子テーマのファイルを読み込むことで上書きすることができるわけです。

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

Author: 柴田竹思

ベトナムと日本のに拠点生活Webディベロッパー。国内外のSOHO/フリーランスの方のウェブサイト制作から企業の大規模案件まで幅広く携わっています。