新規サイトを構築するにあたっては、Shufflehound からリリースされている Jevelin Theme をカスタマイズした上で使用した。WordPress では既存の Theme をカスタマイズするにあたって、あらかじめ既存の Theme を Parent とする Child Theme を作成しておき、Child Theme にのみ手を入れることで Parent Theme と Child Theme の更新サイクルを分離する方法をとることを推奨しているが、複雑な内部構造を持つ Theme では、この分離が単純にいかないことも多いようだ。この項では Jevelin をカスタマイズするうえで対応が必要だった点についてまとめておく。

Parent Theme と Child Theme の分離

WordPress の wp-content/themes サブディレクトリ以下に Parent Theme の Source Tree を展開する。この Parent Tree と同じレベルに、Parent Tree と同じ階層構造を持つ「空の」Tree を展開しておき、これを Child Theme の Source Tree とする。Parent Theme に手を入れる場合は、手を入れたい PHP ファイルと同じ Tree 階層にある Parent Theme のすべての PHP ファイルを Child Theme の対応する Tree 階層にコピーしたうえで、Child Theme 側の PHP ファイルのコピーの方を変更する。この「同じ階層のすべての PHP ファイルを Child Theme 側にコピーする」という作業手順が明確になっていない解説サイトもあるようなので、注意が必要である。Child Theme 側に同じ名前の PHP ファイルがある場合は Parent Theme 側の PHP ファイルより優先して読み込まれるようになっており、この点については悩ましい点はないようだ。

Child Theme 用に style.css と functions.php を用意する

次に Child Theme の Tree 直下にこれら2つのファイルを用意することになるのだが、これについても知りたいポイントが明確になっていないために遠まわりをすることになった。style.css ファイルは Parent Theme と Child Theme のそれぞれにあり、Child Theme 側の CSS 設定の方が優先されることになっているが、実はこれは自明の動作ではなく、「Child Theme 側の CSS 設定の方が優先される」ということを functions.php に明確に記述しておく必要がある。functions.php のサンプルとしてしばしば引き合いに出される以下のコードには、実はこの「優先順位の指示」が記述されていないため、Child Theme の CSS 設定が反映されないなどという、ありがちなトラブルの元となっている。

もし Parent Theme の style.css よりも Child Theme の style.css の方が優先されるようにするのであれば、以下のように記述しなければならない。このように記述することによってはじめて Parent Theme の style.css よりも Child Theme の style.css の方が後に読み込まれることが保証される。そのうえで Child Theme 側の style.css に、より優先順位の高い CSS 設定を記述すればよい。

その他の注意点

PHP ファイルや CSS 設定への変更が反映されない場合は、ブラウザキャッシュをクリアしてみる必要がある。PHP ファイルに対する変更も、単に FTP で書き換えたいファイルを上書きして該当のページをリロードするだけで変更が反映されるのだが、functions.php だけは特殊で、これに対する変更を反映させるためには WordPress の再起動が必要であった。