WordPressのテーマは全画面のスタイルを1個のCSSファイルに書くという奇妙な風習(馬鹿はファイルたくさんあると管理できないだろ？だから馬鹿ども1個に書いとけ思想)があるみたいなので、適当に分割することを考えてみた。

WordPressはいくつかの方法を使ってテンプレートを決定し、そのテンプレートを使って、投稿や固定ページを出力することになっている。

今回はテンプレートごとにそのCSSを変えたいということ。

WordPressには通常のWeb系のフレームワークだったら当たり前のようにあるレイアウト的機能が無い（HTMLの大枠を記事主導で選択肢たり、内容を滑りこませたりできない）みたいなのでテンプレートファイルは串団子みたいに HTML を乱暴にぶつ切りしたモノを脳みそを使わずに積み上げる形を取ることが一般的なようだ。

サイトではヘッダーとフッターは共通的なのでここは分割する。 した後に get_header 関数とかでロードするのが定番。

headerといっても、本当にヘッダーではなく（レイアウト機能がないので）HTML宣言等の上の方をザックリ全部ヘッダーとあの人達は認識しているようだ。

これは正攻法では無いとは思うが、WordPress のテーマは基本的にほとんど何もわかってない人がグチャグチャに作るケースが多いので、 状況によってはこのやり方が合致する可能性もあるのでメモしておく。

header.php の中で現在使っている template を知り、その名前から読み込むべきCSSを導出する流れ。

テーマファイル群の中には functions.php というファイルがあり、こいつがまずロードされるのでここにテーマ全体で使う共通的な処理を書く。つまり function.php に記述する関数で使用テンプレートを決定し、CSS を導出する。

テンプレート page-hoge.php に決定したのなら、 page-hoge.css を導出することにする。

functions.php に、このように投稿からテンプレートの名前を導出する関数を定義しておく。 実装としては get_post_meta 関数を使って選択されたテンプレートを取得する。

function get_css_file_name($post){
    $template_file_name = get_post_meta($post->ID, '_wp_page_template', true);
    $css_file_name = str_replace('.php', '.css', $template_file_name);
    return $css_file_name;
}

ここで取得できるのはテンプレートファイル名であってファイルパスでは無い。 テンプレートファイルはPHPのファイルなので拡張子を取り替えてCSSとする。

この関数はもうグローバルで使えるという乱暴設計になっているので、 こいつを使ってヘッダーのテンプレートの中で呼び出して CSS ファイル名を取得し、 head タグ内に link タグとして生成すればよいだろう。

↑のように無茶苦茶乱暴に作られたテーマでなくそれなりにまともに作られたテーマなら、テンプレートの冒頭で

<?php get_header(); ?>

このような関数呼び出しが書いてあるはずだ、こいつはイロイロしてくれるのだが、その中に CSS ファイルのロードに介入するやり方がある。

このメソッドを使う

wp_enqueue_style("hoge", get_template_directory_uri() . "/hoge.css", array("piyo", "fuga"));

link タグを生成してくれるのだ。

• 第一引数はハンドラと呼ばれるやつで、一意に識別できるならなんでもよい。
• 第二引数はURLで有効になっているテーマのディレクトリ直下のスタイルシートをロードする指定。
• 第三引数は依存性の解決で、ここに指定したハンドラのスタイルよりも後にロードされるようになる。

この関数を呼び出す関数を、このようにフックすると、実際に動作する。

add_action("wp_enqueue_scripts", "add_hoge_page_style");

本来そもそも CSS の優先順位は詳細度によって決められていて、記述順でスタイルが変わるようなモノはよろしくない。 例の奇習により、1個のファイルに馬鹿みたいにずらずら書くと見通しも悪くなるし、当然その前後依存のスタイルを書いてしまう可能性が高くなる。 そもそも、WordPress を触ってる連中に CSS の詳細度による優先順位の変更なんか知らんという人間も普通にかなりの割合いると思われる。 important 書いとけみたいな。

という脱奇習をした場合に前後関係で問題にならないように、依存性指定ができるようになっている。

ここでハンドラを指定して依存性を解決できるのだがそもそも依存しているハンドラがわからんということになる。 これを調べるには、現状動いているページのソースを読めば分かる。

スタイルロードがこのようになっていると思われる

<link rel="stylesheet" id="piyo-css" href="http://hogepiyofuga.unko/............./piyo.css" type="text/css" media="all">
<link rel="stylesheet" id="fuga-css" href="http://hogepiyofuga.unko/............./fuga.css" type="text/css" media="all">

この id の部分からケツの -css を除去したものがハンドラになる。 なので

wp_enqueue_style("hoge", get_template_directory_uri() . "/hoge.css", array("piyo", "fuga"));

このように書いてフックすると。

<link rel="stylesheet" id="piyo-css" href="http://hogepiyofuga.unko/............./piyo.css" type="text/css" media="all">
<link rel="stylesheet" id="fuga-css" href="http://hogepiyofuga.unko/............./fuga.css" type="text/css" media="all">
<link rel="stylesheet" id="hoge-css" href="http://hogepiyofuga.unko/............./hoge.css" type="text/css" media="all">

このように指定したハンドラの後に読み込まれるようになる。