CSSの読み込みはどこに書く？WordPress公式マニュアルに書かれている正しい手順。

1.CSS、JavaScriptの読み込みはheader.phpではなくfunction.phpに登録する

WordPress公式マニュアル『WordPress Codex』のテーマ作成のページには、functions.phpは【テーマ関数ファイル】と書かれており、名前の通り使用するテーマで使う関数を記述するファイルです。WordPressテンプレートを作成する場合、自作の関数はこのファイルに登録することになります。もちろん、「関数なんて作らない」といった場合は必要ありませんのでstyle.cssやindex.phpのようなテーマの必須ファイルではありません。

この【テーマ関数ファイル】の項目には、このファイルの使用例の一つとして『テーマスタイルシートとスクリプトのエンキュー。』と書かれています。そのテーマで使用するCSS、JavaScriptの読み込みです。また【Document Head (header.php)】の項目には『ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください。代わりにテーマ関数のアクションフック wp_enqueue_scripts を使う。』と書かれています。

今回、この『wp_enqueue_scripts』を使ってCSS、JavaScriptの読み込み行う手順をご案内するのですが、なぜ『ヘッダーテンプレートにテーマのスタイルシートをリンク』させてはいけないのでしょうか。

2.function.phpにCSS、JavaScriptの読み込みを登録するメリット

明確な理由の記述は見つけられませんでしたが、考えられるデメリットとしてはメンテナンス性の低下です。
・基本はhead内で読み込むが、一部のJavaScriptのみfooterで読み込ませたい
・デザイン違いのヘッダーテンプレートファイルが複数ある
といった場合、CSSやJavaScriptの読み込みを複数のファイルに渡って記述する必要があります。

関数を作成してfunctions.phpに登録しておけば、全ページに出力したいCSS、JavaScriptをまとめて登録でき、かつ
・特定のJavaScriptの読み込みのみ、footer直下に出力したい
・特定の固定ページだけに特定のCSSを読み込ませたい
などといった条件があった場合もfunctions.phpだけで対応が可能です。

3.『wp_enqueue_scripts』を使ったCSS、JavaScriptの読み込み

『wp_enqueue_scripts』はアクションフックと呼ばれるものの一つで、名前にscriptが含まれていますが、JavaScriptだけでなくcssにも使われます。以前はCSSは『wp_print_styles』、JavaScriptは『wp_print_scripts』というアクションフックを使って呼び出し、公開サイト（管理画面以外）だけに読み込ませる為には、管理画面以外（!is_admin()）の条件分岐が必要でしたが、『wp_enqueue_scripts』は公開サイトのみに呼び出す仕組みになっており、使いやすく進化したものになっています。

※ 管理画面のみに読み込ませたい場合は『admin_enqueue_scripts』というアクションフックを使います。
※『wp_print_styles』、『wp_print_scripts』は、WordPress 3.3以降の使用は推奨されていないようです。

4.記述例

この『wp_enqueue_scripts』を使って、公開サイトのみにCSS、JavaScriptを読み込ませる関数を作成するのですが、この関数の中にCSS、JavaScriptを登録するには以下の方法となります。

●CSS：wp_enqueue_style
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
・wp_enqueue_style(登録名, パス,　$deps , バージョン番号（クエリ文字）, media属性);
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

●JavaScript：wp_enqueue_script（紛らわしいのですが、上記で説明しているwp_enqueue_scriptsとは違い『s』がありません。）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
・wp_enqueue_script(登録名, パス,　$deps , バージョン番号（クエリ文字）, footer直下で読み込むか);
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

第一引数（登録名）、第二引数（ファイルパス）は必須となり、他は任意の項目なので省略しても問題なく動作します。
第三引数に書かれている$depsは依存するファイル、そのCSS・JavaScripより前に読み込まれる必要があるファイルを指定します。
第四引数はバージョン番号で、未入力の場合はWordpressのバージョン番号が表示されます。
第五引数のみは役割が違い、wp_enqueue_styleの場合はmedia属性、wp_enqueue_scriptはfooter直下（/bodyの前）で読み込むかを記述する場所になります。

以下がfunction.phpへの記述例です。

function add_css_js() {//関数名add_css_js()を作成
	//CSSの読み込みはここから
	
	//全てのページにstyle.cssを読み込み
	wp_enqueue_style('style',get_template_directory_uri().'/style.css' );
	
	//全てのページにcss/store.cssを読み込み
	wp_enqueue_style('store', get_template_directory_uri().'/css/store.css');

	//固定ページスラッグcontact か 投稿ID46の記事 か カスタム投稿タイプadd_newsの記事 か カスタム投稿タイプadd_newsの一覧だった場合、css/store2.cssを読み込み
	if (is_page('contact')||is_single(46) || is_singular('add_news') || is_post_type_archive('add_news')) {
		wp_enqueue_style('store2', get_template_directory_uri().'/css/store2.css');
	}


	//JavaScriptの読み込みはここから
	
	//全てのページにjs/pagetop.jsを読み込み
	wp_enqueue_script('pagetop', get_template_directory_uri().'/js/pagetop.js');
	
	//トップページのみ
	if (is_home()) {
	
	//js/main.jsをfooter直下で読み込み	
		wp_enqueue_script('main', get_template_directory_uri().'/js/main.js', array( 'jquery' ), '', true);	
	}
}
//関数名add_scripts()を表側で呼び出す
add_action('wp_enqueue_scripts', 'add_css_js’);

第四引数のバージョン番号はCSS、JavaScript更新のたびに入力するとキャッシュを更新してくれるのですが、更新の度にバージョン番号を更新するのは非常に手間です。

以下のように記述すると「ファイル更新の度に自動でバージョン番号を更新してくれるので便利です。

	wp_enqueue_style('style',get_template_directory_uri().'/style.css','',date('YmdGi', filemtime( get_template_directory().'/style.css' )),'' );

filemtime()関数で更新日時を取得し、date関数でフォーマットし、それをバージョン番号にしています。ソースを確認すると『style.css?ver=2019030XXX』のように、?ver=の後ろに更新日時が表示されます。

お客様にプライベートブラウジングをお願いする機会が格段に減るのではないかと思います。

5.あとがき

以上、『wp_enqueue_scripts』を使ったCSS、JavaScriptの読み込み手順でした。

今回の手順を踏んでもブラウザに表示される内容は全く変わりません。直接header.phpにCSSファイルの読み込みの記述を行っても、wp_enqueue_scripts関数を使ってfunction.phpに登録してもhtmlソースは同じです。

WordPressのルールに沿っていて、かつ運用が少し楽になる手順のご案内でした。