こんにちは！フリーランスエンジニアのせっち＠yukinouz1です。
WordPressのCSSはどこで読み込むめばいいのか？
header.php(のhead内)派とfunctions.php派がいます。
一体どちらが正しいのでしょうか？
結論は、
functions.phpで読み込むことが正しいが、動作することを目的とするならばhead内でもOK。
です。
本記事はかけだしの方を対象とした記事です。
論文ではないので、考察の深さや結論に至るまでの論理が弱い等のご指摘はご勘弁ください。
とはいえ、「それは違う」というご意見は是非お願いします。
お気軽にDMください。
それではいってみましょう。
クリックして見たいところへジャンプ
ファクトを収集する
・事実として、技術系記事ではCSSがどこで読み込むのが正しいとされているか？
・有料テーマでは「実際に」どこで読み込まれているか？
この辺りを見てみます。
技術系記事を読み漁る
技術系記事を手当たり次第に読んでみました。
「functions.phpでの読み込みが推奨されている」と書いてある記事が多いものの、ソースを示している記事を見つけることができませんでした。。。
WordPressコーデックスも確認しましたが、それらしい記事が見つかりません。
（知っている方、教えてください）
下記の記事を参考にしましたm(__)m
・WordPressで特定のページでのみCSSやJSファイルの読み込みをする方法
・functions.phpでJSやCSSを一元管理する
・テーマにスタイルシート（cssファイル）を正しい方法で読み込む
・WordPressテーマのCSSとJSをfunctions.phpで読み込む方法
・functions.phpからスタイルシートやjQueryのファイルを呼び込む方法
・特定のテンプレートのみにCSSを追加する
・WORDPRESS Codex日本語版
functions.phpが推奨される理由【一元管理】
とはいえ、なぜfunctions.phpが推奨されるのかは、色んな記事を読み進める中でわかって来ました。
理由のひとつは一元管理できるから、です。
functions.phpに書かれていれば管理が用意になり、メンテナンス性が向上するという事です。
CSSだけじゃない！functions.phpで外部CSSもJSも管理
CSSだけなら全てhead内に書けば一元管理では？
と考えそうですが、functions.phpでCSS以外も管理する事が可能です。
・CSS
・外部のCSS(fontawesomeやgoogle fontsなど）
・javascript, jQueryなど
・プラグイン（slider系のjsプラグインなど）
これら全てを一元管理できると考えればメリットが見えてきます。
また、CSSもstyle.cssだけなら一行ですが、
・reset.css、flexbox.css, slider.css, animate.css・・・など用途別に管理
・page-○○.css single.cssなどWordPressのページ毎に管理
など、効率的に管理したり、サイトの規模が大きくなるとCSSの量も増えてきます。
全てhead内で書いていくと、行数がドンドン増えてしまいます。
また、WordPressでは、ページ毎に読み込みたいCSS、読み込みたくないCSSを条件分けする事が可能です。
head内でももちろん可能ですが、上記のようにCSSの数が増えてくるとfunctions.phpへのお引越しも視野に入れた方がいいでしょう。
詳しくはコチラの記事に書きました！
有料テーマはどこでCSSを読み込んでいるか
有名な有料テーマをピックアップし、どこでCSSを読み込んでいるかを調べてみました。
| 有料テーマ | CSSが書かれいてる場所 |
|---|---|
| JIN | functions.php |
| Sango | functions.phpからrequire_onceでfuctionsフォルダ内のsng-style-scripts.phpを呼び出し。 |
| Affinger5 | functions.php |
| Albatros | functions.php |
| Stork | functions.php |
当ブログでも使用している「JIN」の例
functions.phpでCSS（jsも）読み込んでいる事がわかります。
という事で上記有料テーマでは全てfunctions.phpに記載されていました。
全てのテーマを調べたわけではないですが、functions.phpが「主流である」と言えそうです。
書籍ではどうなっているか？
WordPress初学者には必ず読んでほしいくらいわかりやすく解説されている
WordPressレッスンブックHTML5&CSS3準拠はどうでしょうか？
こちらはhead内で読み込んでいました。
こちらは初学者向けに挫折しないようシンプルな作りになっているためわざわざfunction.phpで管理する必要はないのだと思います。
（style.cssしか登場しません）
（jsも登場しません）
ぶっちゃけどっちでもいい【動作する事が大切】
ここまで書いておいてですが、「絶対にfunctions.phpで書かないといけない」という事はないと思っており、Webサイトとして動作していればなんの問題もないと思います。
HTML/CSSから学習を始めた人間からするとhead内でCSSを読み込むというのが自然です。
まずはheadで読み込んでおいて、サイトが大規模化・複雑化してきたらfunctions.phpへお引越しすればOKです。
「正しさ」よりも動作する事が重要です！
まとめ
・CSSの読み込み位置で推奨されているのはfunctions.php。
・有料テーマではfunctions.phpで読み込まれている事が主流。
・head内で読み込んでも問題ない。
・サイトが複雑化、大規模化してきたらfunctions.phpへの移行を検討。
