WordPress

結局WordPressのCSSはどこで読み込むのが正しいのか【本気で考察】

こんにちは!フリーランスエンジニアのせっち@yukinouz1です。

WordPressのCSSはどこで読み込むめばいいのか?
header.php(のhead内)派とfunctions.php派がいます。
一体どちらが正しいのでしょうか?

結論は、

functions.phpで読み込むことが正しいが、動作することを目的とするならばhead内でもOK。

です。

本記事はかけだしの方を対象とした記事です。
論文ではないので、考察の深さや結論に至るまでの論理が弱い等のご指摘はご勘弁ください。
とはいえ、「それは違う」というご意見は是非お願いします。
お気軽にDMください。

それではいってみましょう。

ファクトを収集する

・事実として、技術系記事ではCSSがどこで読み込むのが正しいとされているか?
・有料テーマでは「実際に」どこで読み込まれているか?

この辺りを見てみます。

技術系記事を読み漁る

技術系記事を手当たり次第に読んでみました。

「functions.phpでの読み込みが推奨されている」と書いてある記事が多いものの、ソースを示している記事を見つけることができませんでした。。。

WordPressコーデックスも確認しましたが、それらしい記事が見つかりません。
(知っている方、教えてください)

functions.phpが推奨される理由【一元管理】

とはいえ、なぜfunctions.phpが推奨されるのかは、色んな記事を読み進める中でわかって来ました。
理由のひとつは一元管理できるから、です。

functions.phpに書かれていれば管理が用意になり、メンテナンス性が向上するという事です。

CSSだけじゃない!functions.phpで外部CSSもJSも管理

CSSだけなら全てhead内に書けば一元管理では?
と考えそうですが、functions.phpでCSS以外も管理する事が可能です。

functions.phpで管理できるもの(例)

・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へのお引越しも視野に入れた方がいいでしょう。

詳しくはコチラの記事に書きました!

WordPressで特定のページのみCSSを読み込ませる方法3選【コピペ5分】こんにちは!フリーランスエンジニアのせっち@yukinouz1です。 WordPressでWebサイトを作る際、CSSを特定のページの...

有料テーマはどこで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への移行を検討。