WordPressテーマからCSSファイルとJSファイルを読み込む正しい方法です。
<head>に直接書きたくなるのは分かりますが、、、WordPressにはWordPressなりのお作法があります。WordPressを使うからには、そのお作法に倣った（ならった）方がトラブルなく無難に進められます。
ということで、今日からWordPressでCSSとJavaScriptをheadから呼び出すのは止めましょう！正しい読み込み方を紹介します。
はにわまん
WordPressのお作法を守ったほうが安全です！
目次
CSSファイルとJSファイルを読み込む正しい方法
では早速、読み込み方を見ていきましょう！（ほぼコピペ元とする用の記事です）
functions.phpに記載していきます。
CSSを読み込むコード
function my_styles() {
wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/style.css', array(), '1.0.3' );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );この記述をすると、実際には以下のように出力されます。
<link rel='stylesheet' id='style-name-css' href='http://demo.local/wp-content/themes/twentyseventeen/css/style.css?ver=1.0.3' type='text/css' media='all' />idの箇所に、'style-name'が使われていることが分かります。（-css）は自動で付与されます。
hrefには、get_template_directory_uri() . '/css/style.css'が。get_template_directory_uri()はテーマファイルまでのパスを取得してくれるものになります。そして、?ver=として指定した'1.0.3'が反映されています。
ちなみにキャッシュの削除などでも使える部分なので、CSSを修正した際はこの数字も変更しておくといいかと思います。
https://haniwaman.com/cache-delete/
JavaScriptを読み込むコード
function my_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.2', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );こちらの表示は以下のような感じになります。
<script type='text/javascript' src='http://demo.local/wp-content/themes/twentyseventeen/js/script.js?ver=1.0.2'></script>CSSとは違い、idの指定がありません。
（そもそもscriptタグにidは指定できるのだろうか…）
JavaScriptのscript-nameは内部的に保持するものですね。ただし適当に付けるのではなく被らない名前にしないと読み込まれないのでご注意を！
'1.0.2'の部分はCSSと同様に?ver=1.0.2として使われる部分になります。JavaScriptを修正した際は、このバージョンも変更しておきましょう。
array( 'jquery' )は依存関係を表します。WordPressは標準でjQueryが読み込まれています。この指定をすると、jqueryに依存したJavaScriptであることを明示できるので、必ずjQueryの読み込みよりも後に出力されるようになります。
最後のtrueは、bodyの閉じタグ直前に出力させるという指定になります。反対にfalseにするとhead内に表示されるようになります。trueが一般的ですね。
子テーマから呼び出す場合はちょっと違う
子テーマから呼び出す場合は、ちょっとだけ違うのでその違いも見ていきましょう。異なるのは一部だけです。
twentyseventeen-childという子テーマから呼び出したとします。
CSSを読み込むコード
function my_child_styles() {
wp_enqueue_style( 'style-child-name', get_stylesheet_directory_uri() . '/css/style.css', array(), '1.0.3' );
}
add_action( 'wp_enqueue_scripts', 'my_child_styles' );実際の表示は以下のような感じになります。（URLの部分がtwentyseventeen-childを示しているのが分かるかと思います）
<link rel='stylesheet' id='style-child-name-css' href='http://demo.local/wp-content/themes/twentyseventeen-child/css/style.css?ver=1.0.3' type='text/css' media='all' />JavaScriptを読み込むコード
function my_child_scripts() {
wp_enqueue_script( 'script-child-name', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.2', true );
}
add_action( 'wp_enqueue_scripts', 'my_child_scripts' );実際の表示は以下のような感じになります。（URLの部分がtwentyseventeen-childを示しているのが分かるかと思います）
<script type='text/javascript' src='http://demo.local/wp-content/themes/twentyseventeen-child/js/script.js?ver=1.0.2'></script>パスを取得する2つの関数
ソースコードだけの雑な説明ですみません。親テーマを指し示すか、子テーマを指し示すかは、パスを取得する関数によって変わってきます。特に子テーマを使っている場合はどちらのファイルを取得したいかによって関数を使い分ける必要があります。
- 親テーマからファイルを取得した場合 →
get_template_directory_uri() - 子テーマからファイルを取得したい場合 →
get_stylesheet_directory_uri()
<head>に直接書かないとダメなパターンもある
「WordPressのルールに沿ってfunctions.phpに書きましょう！」と言ってきましたが、headに直接書いた方がいい場合もあります。それはテンプレート内でwp_head();が読み込まれいないテーマの場合です！
<?php wp_head(); ?>でCSSとJavaScriptが読み込まれてる
これまで紹介してきたwp_enqueue_scriptsは、テンプレートファイル内のwp_head();の中で処理されて、styleやscriptのHTMLタグとして出力されているものになります。
つまり、テンプレートでwp_head();が使われいないWordPressサイトでは、いくらwp_enqueue_scriptsに記載しても、一切読み込まれることはありません。
なのでwp_head();が使われてないっぽいサイトは仕方ないですが、直接<head>などに記載しましょう…。
おわり
WordPressテーマからCSSファイルとJSファイルを読み込む正しい方法でした。そのままコピーして必要な箇所だけ修正して使ってみてください！
（実際に出力を確認するのが一番理解が早いと思います）
