CSS・JSファイルをfunctions.phpで読み込む方法

wordpressでスタイルシートやJSファイルを読み込む際は、functions.phpに記述することが推奨されています。
今回は、functions.phpから読み込んだほうがいい理由と、記述方法を紹介します。

スタイルシート・JSファイルはfunctions.phpで管理したほうがいい理由
functions.phpでスタイルシートを読み込む方法
1. スタイルシートをfunctions.phpで読み込む方法
2. 解説
functions.phpで複数のcssを読み込む方法
functions.phpでjsファイルを読み込む方法
1. 解説
functions.phpでcssとjsをまとめて読み込む方法

スタイルシート・JSファイルはfunctions.phpで管理したほうがいい理由

私自身、これまで、スタイルシートやJSファイルはheader.phpに直接書いていました。
例えば、スタイルシートであれば、link要素で以下のように記述しますよね。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style_sp.css">

1 2	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style_sp.css">

もちろん、これでも問題なくファイルの読み込みができます。
ですが、他の方が作成したテンプレートを見ていると、functions.phpでファイルが管理されていることが多いことに気づきました。
調べてみると、ワードプレスではcss・jsファイルはfunctions.phpでの一元管理が推奨されているということが分かりました。

link要素でcssを読み込んだ場合、他のプラグインのファイルと重複したり、同じファイルを複数回読み込んでしまう可能性があります。

functions.phpでスタイルシートを読み込む方法

functions.phpからスタイルシートを読み込むには、wp_enqueue_style関数でファイルを読み込み、アクションフック（wp_enqueue_scripts）に登録します。

アクションフックはどこに読み込みたいかで選ぶ

アクションフックは、特定のタイミング（ページ）で任意のphpを実行するためのものです。
例えば、以下のようなものがあります。

wp_enqueue_scripts →　サイト公開側（フロントエンド）に読み込む
login_enqueue_scripts → ログイン画面に読み込む
admin_enqueue_scripts→ 管理画面に読み込む

スタイルシートをfunctions.phpで読み込む方法

以下の記述で、スタイルシートをfunctions.phpから読み込むことができます。

function add_stylesheet() {
	wp_enqueue_style('style', get_template_directory_uri().'/style.css', array(), '1.0', all);
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );

function add_stylesheet() {

wp_enqueue_style('style', get_template_directory_uri().'/style.css', array(), '1.0', all);

}

add_action( 'wp_enqueue_scripts', 'add_stylesheet' );

function add_stylesheet() {
	wp_enqueue_style( 'cssファイルの個別名（ハンドル名）', cssファイルのURL(場所)', "配列（ファイルの読み込み順を指定）", 'バージョン（タイムスタンプ）', メディア );
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );

function add_stylesheet() {

wp_enqueue_style( 'cssファイルの個別名（ハンドル名）', cssファイルのURL(場所)', "配列（ファイルの読み込み順を指定）", 'バージョン（タイムスタンプ）', メディア );

}

add_action( 'wp_enqueue_scripts', 'add_stylesheet' );

これで、wp_head();からstyle.cssが出力されるようになります。

解説

cssファイルの個別名（ハンドル名）style: cssを識別するための名称です。任意で設定します。
cssファイルのURL(場所)　get_template_directory_uri().’/style.css’: cssのURL(ファイルのディレクトリ)を指定します。
配列（ファイルの読み込み順を指定）array(): ファイルが複数あり、読み込み順を指定したい場合、配列で順番を指定します。特に必要ない場合は記述は省略もできます。
array(‘reset’)と記述することで、ハンドル名「reset」のcssファイルの後にstyle.cssが読み込まれます。
バージョン（タイムスタンプ）1.0: キャッシュ対策をしたい場合は、タイムスタンプを指定できます。省略可能です。
メディア: スタイルシートのメディアを指定します。初期値はall（すべて）です。

functions.phpで複数のcssを読み込む方法

複数のスタイルシートを読み込みたい場合は、以下のように記述します。

function add_stylesheet() {
  wp_enqueue_style('reset', get_template_directory_uri().'/reset.css', array(), 1.0 , 'all');
  wp_enqueue_style('style', get_template_directory_uri().'/style.css', array('reset'), 1.0 , 'all');
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

function add_stylesheet() {

wp_enqueue_style('reset', get_template_directory_uri().'/reset.css', array(), 1.0 , 'all');

wp_enqueue_style('style', get_template_directory_uri().'/style.css', array('reset'), 1.0 , 'all');

}

add_action('wp_enqueue_scripts', 'add_stylesheet');

配列で読み込み順を指定しているので、style.cssはreset.cssの後に読み込みます。

functions.phpでjsファイルを読み込む方法

functions.phpからjsファイルを読み込むには、wp_enqueue_script関数でファイルを読み込み、アクションフック（wp_enqueue_scripts）に登録します。
関数名とアクションフック名が同じなのでちょっとややこしいですが、基本的にはスタイルシートと同じ書き方です。

function add_files() {	
 
  wp_enqueue_script('main', get_template_directory_uri().'/main.css', array(), 1.0, false );
}
//アクションフック（wp_enqueue_scripts）への登録
add_action('wp_enqueue_scripts', 'add_files());

function add_files() {

wp_enqueue_script('main', get_template_directory_uri().'/main.css', array(), 1.0, false );

}

//アクションフック（wp_enqueue_scripts）への登録

add_action('wp_enqueue_scripts', 'add_files());

function add_files() {	
 
  wp_enqueue_script(''cssファイルの個別名（ハンドル名）', cssファイルのURL(場所)', "配列（ファイルの読み込み順を指定）", 'バージョン（タイムスタンプ）', 読み込み位置 );
}
//アクションフック（wp_enqueue_scripts）への登録
add_action('wp_enqueue_scripts', 'add_files()');

function add_files() {

wp_enqueue_script(''cssファイルの個別名（ハンドル名）', cssファイルのURL(場所)', "配列（ファイルの読み込み順を指定）", 'バージョン（タイムスタンプ）', 読み込み位置 );

}

//アクションフック（wp_enqueue_scripts）への登録

add_action('wp_enqueue_scripts', 'add_files()');

解説

ハンドル名、場所、配列、バージョンはスタイルシートの読み込みと同じです。

読み込み位置　false: スクリプトの読み込む位置を指定します。trueでbodyの閉じタグ前、falseでheadの閉じタグ前に出力されます。デフォルトはfalseで、省略できます。

functions.phpでcssとjsをまとめて読み込む方法

wp_enqueue_scriptとwp_enqueue_styleをまとめて記述することもできます。

function add_files() {	
	// jsの読み込み
	wp_enqueue_script('main', get_template_directory_uri().'/main.js', array(), 1.0, false );
 
	// cssの読み込み
	wp_enqueue_style('style', get_template_directory_uri().'/style.css', array(), 1.0 , 'all');
}
add_action('wp_enqueue_scripts', 'add_files');