子テーマのCSSで最も手間がかかり苛立ちが募るのが親テーマに書かれたCSSを子テーマで改変することです。子テーマではありたい。でも親テーマのCSSが邪魔なんです。親元から独立しましょう。
いきなり結論を言うと、親テーマの style.css を指定する functions.php で、親テーマフォルダの style.css を無視して子テーマフォルダ内に作った親cssのコピーを代わりに指定してしまい、親の改変にじゃんじゃん手を付けようという話です。では前置きからじっくり読み物仕立てで行きます。クールな情報と簡素なリファレンスをお望みの場合は期待に添えないかもしれません。
CSSの話
子テーマを利用することには善し悪しがあります。良いところは、もうすでに細かなところまで作ってくれていて、見た目だけ少し変えればすぐに立派なウェブサイトが作れるところです。悪いところは、もうすでに細かなところまで作っあって余計なことが多すぎるし改造が面倒なところです。
難しい関数の話は置いといて、親テーマのCSSを子テーマで書き換えることこそカスタムの基本。と、以前ずっとそのことばかりに労力を費やしてきました。
2017年の公式テンプレート twenty seventeen を今でもベースにしてあれこれサイトを作っています。その前もその後のも、デフォルトテーマとしてどうなんよという、くどくて鬱陶しい作りになっていて、ちょいちょいとカスタムすることが困難で億劫です。
twenty seventeen の良いところはサイドバーがまだデフォルトで生きていたころの設計ベースであることです。サイドバーをたとえ使わなくても、Digitalboo が編み出した「#secondary を丸ごとレスポンシブメニューに収めてしまう作戦」で活躍します。
悪いところも多くあります。変えられない content_width とか、余計なスクリプトが天こ盛りに入っているとか、劣悪なひょこひょこヘッダーとか。2017より以前のテーマより遙かにましになったとは言え、細かすぎるCSSはまあまあ劣悪なところもあります。
くどくどしい CSS を是正するためにさらにくどくどしくなる子テーマのCSS
親テーマのCSSに書かれたくどくどして細かすぎるあほみたいな飾りのCSS、これがいちいち気に入らなくて子テーマに同じ要素を作って書き換えるということが常態化します。
例えば最悪の筆頭は、a img に付けられた box-shadow の下線ですね。これを子テーマで消すことは簡単ではありません。親から全く同じすべてのCSS行をコピーして持ってきて、それを却下するCSSをわざわざ作って書かねばなりません。
こういう積み重ねで何が起きるかというと、CSSの行数が膨れ上がります。ただ増えるだけではなく、親で指定 → 子で否定 の無駄で馬鹿みたいな繰り返しになるわけです。挙げ句の果てにCSSが大きすぎると警告されます。
これまで長年、根本の原因を取り除くことをせず、如何に最小限にCSSを上書きするかについて取り組んで、それなりに良いところに落ち着いてそれなりに満足していました。
Twenty Seventeen CSS – 親からの独立
親からの真の独立とは何でしょう。親を全否定して完全独立を果たすことでしょうか。年老いた親に敬意を払いつつ面倒を見て親孝行することでしょうか。親の遺伝子を自覚し己の細胞と一体化させ成長することでしょうか。
何を言うとんのこの人。と今声が聞こえた気がしたので先に本題行きます。
functions.php の親CSSの読み込みを辞めてしまう
子テーマを作るときに最初にやることは functions.php と style.css と index.php を新しいフォルダにこしらえて、functions.php にこう書くことでした。
<?php
//子テーマの基本関数 styleを読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_directory_uri() . '/style.css?'. date("ymdHis", filemtime( get_stylesheet_directory() . '/style.css')), array('parent-style') );
}
親のCSSを読み込んでから子テーマのCSSを読み込むという一文です（子テーマの後ろがごちゃごちゃしていますが気になさいませんよう）
この最初の儀式が当たり前すぎて何も思わずにいましたが、ここで親のスタイルシートを読み込むことについて新たな知見を得ました。
この一文で重要なのは、parent-style を読み込むという行為のみであるということです。コメントアウトのところだけが重要で、CSS全文なんか誰も見ていません。考えてみれば当たり前ですよねえ。何故こんなことに気づかなかったのか。
親CSSのコメントアウトだけが必要で後はどうでもいい。この事実についてしばし考えます。ぽくぽくぽくぽく・・・チーン。すっくと立ち上がり、行動に移します。
親テーマのCSSを子テーマフォルダに複製
twentyseventeen から style.css を子テーマフォルダに複製しました。parent-style.css と改名します。
functions.php の親元指定を書き換える
functions.php を開いて子テーマの最初の儀式を書き換えます。親元を指定する行です。
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
この部分を、こう変えます。
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri() . '/parent-style.css' );
親の指定を、子テーマフォルダの parent-style.css に指定し直しました。
不安にドキドキしながらテストサイトをしばらく触ってみますが、問題なく親子関係が成立しています。上手くいきました。 parent-style.css のコメントアウト部分ではちゃんと「親ディレクトリは twentyseventeen である」と宣言してくれていますから、子テーマフォルダに置いてあっても問題ないんです。
parent-style を好きに書き換える
さて。親CSSである parent-style.css をどうするのかは完全に自由です。子にとって親とはなんでしょう。いつまでも依存して寄生しますか。CSS部分を全部削除してすっきりさせてから好きに再構築しますか。ある部分は温存しつつ変えるべき箇所だけ変えますか。
親に頼り、あるいは反発するところは反発しつつ肥大化していった過去とおさらばして、今や親の存在は子の思うがままです。
熟知しているからこその有利
尚、この件は twentyseventeen に限った話ではないのですが、twentyseventeen であるからこその有利な点があります。それは、すでに何年も前のテーマであり、過去これでもかといじくり倒し試行錯誤してきた私やあなたには、親CSSのどこを残しどこを改変しどこを削除するのか、わりと見えているんです。
親CSSをどうするかが見えていないとカオス化しやすいので、常に何か書き換えようとするときは一瞬思いとどまりながら事を進めるのが大事です。CSSのカスタムもTwitterの脊髄反射も同じ、決定する前に2秒留まって考えましょう。
親CSSのみを手元に置く利点
ということで、これまで親フォルダ内にあるCSSを弄るのは御法度でした。それゆえ、子テーマのCSSは肥大化しカオス化しました。手元の親を好きに弄り倒せる今回の措置は多くの恩恵をもたらすはずです。
テーマの更新があっても問題になりません。
普通に更新作業してOKです。CSSの何行目が変わった、とかありますが些細なことです。
親CSSの気に入らないところを直接書き換えられるし、消したい記述は文字通り削除できます。
もう子テーマに同じ要素を書いて否定して書き足す二重の記述をやらなくて済みます。
子テーマの style に「親の都合」を持ち込まなくて済みます。
子テーマの style には純粋に子が作り上げた成果だけを書き記します。この恩恵は大きい。これまで、style.css の中で「親を改変したもの」と「独自のCSS」が混在し、カオス化の原因にもなっていました。
運用上のコツはあるかも
どうやって運営、カスタムしていくかは計画性が必要です。parent-style を変えすぎないように、他サイトで上手く使い回せるように、工夫はしたほうがいいと思います。
この後はオマケのポエムです。
WordPress から見える親子関係の遷移
本来、子テーマは、親テーマの「ちょっぴり変更したいところもある」程度のカスタムをすることが前提だと思います。子は親に依存しまくり、親の加護に包まれます。とても楽な日々です。これを幼年期といいます。
次第に知恵や欲が出てきて、親のカスタムに燃え始めます。「ここが気に入らねえんだよ」「何だよてめえ雁字搦めにしやがって」「ぜんぜんなっちゃいねえな」親の気に入らないところが我慢ならなくなり、強く否定しながらも親の加護から脱しきれないもどかしさに包まれます。反抗期です。
熱く燃える日々も落ち着きを取り戻し、反抗期にやりすぎたことがアダとなって己に降りかかり「やりすぎはよくないよな」と、別の人生の目的に舵を切ります。もう親のことなど眼中になくなり、興味も失います。子は大人になりました。
やがて自分が親に加護を与える番であることを自覚し、年老いた親を招き入れます。全削除もできますがそんなことはしません。自分には親の血が流れている。依存も否定もせず、遺伝子は混ざり合うことを知っています。それでも最後まで子は親に敬意を表し、functions では必ず自分より先に親を読み込ませるのです。
