WP子テーマの作り方

WordPressでは子テーマという機能があります。
既存のテーマをカスタマイズする際に変更したい部分を子テーマで定義できます。
元のテーマにはまったく触れる必要がありません。

デフォルトで採用され、デザインだけでなくSEO的にも評価の高いTwentyシリーズのカスタマイズには最適です。子テーマはカスタマイズのメンテナンス性が向上するだけではなく、テーマのアップデートの際にも上書きされて元のデザインに戻ってしまうということもありません。

子テーマの作成手順

子テーマの作成はけっして難しくありません。
むしろ親テーマを直接変更するよりも分かりやすく、トラブルも少ないでしょう。

テーマディレクトリの作成

WordPressの通常のテーマディレクトリパスであるwp-contents/themesに任意の名称で子テーマのディレクトリを作成します。

他のテーマと同じ場所に

まずは子テーマのディレクトリを作る

スタイルシートの準備

作成した子テーマのディレクトリ内に以下内容のstyle.cssを作成します。

必須項目は親テーマと子テーマの定義となるTheme Name(3行目)とTemplate(4行目)の2つだけです。
逆にいうと、子テーマが反映されない場合はこの2つの項目に「2バイト文字が含まれている」あるいは「余計なスペースが含まれている」ことがほとんどです。

※上記は「twentyfourteen」用の「TWF-Child」という子テーマの場合です。

現在のスタイルをベースにカスタマイズしていくこととなりますので、ここで親テーマのスタイルシート(10行目)を読み込みます。(まったく異なるスタイルとする場合は親テーマのCSSを読み込む必要はありません)

スタイルシートを定義した時点でテーマとして認識しますので、管理画面よりこの子テーマを選択してカスタマイズを行っていきます。

テーマとして認識されている様子

画像はありませんが、テーマと認識されています。

テーマビューを付けたい場合はpng形式のスクリーンショット画像をscreenshot.pngとして作成して保存します。(640×480px以下が推奨のようです)
子テーマなので親テーマのscreenshot.pngを使ってもよいかもしれませんね。

必要に応じて各テンプレートを用意

基本的にはデザインのカスタマイズだけであればスタイルシートで可能でheader.php・single.php・sidebar.phpなどの各テンプレートは必要ないと思いますが、必要に応じて子テーマに追加します。

例えば、index.phpを子テーマに置けば、親テーマのindex.phpではなく、子テーマのものがオーバーライドされます。

子テーマのfunctions.php

上記のように子テーマでは該当するテンプレートが存在した場合は親テーマよりも優先されます。
しかし、functions.phpだけは扱いが異なり、子テーマが読み込まれたあとに親テーマが読み込まれます。
差分のような形で子テーマの関数が追加されることとなります。

ページが真っ白になってしまうことも

親テーマと子テーマに同名の関数があり、かつ異なる定義を行った場合、エラーが発生してページそのものが表示できなくなってしまうこともあります。
このため、Twentyシリーズなどテーマによっては子テーマで再定義されそうな関数については重複チェックが行われ、再定義が存在すると親テーマでの定義は無効化されます。

(function_existsという条件分岐で子テーマで同名の関数を定義するとオーバーライドできるようになっています)

しかし、すべての関数を重複チェックしているわけではなく、これ以外に矛盾があると、やはりエラーとなってしまいます。
このような状況に陥った場合は子テーマのfunctions.phpの内容を一度消去してしまえば、復旧できるかと思いますが、慎重に取り扱う必要があります。

実際のところカスタマイズに不慣れであれば、子テーマでfunctions.phpを追加することは避けた方が無難です.
ちょっと初心者向きではなくなりますが、重複チェックが行われない関数をどうしても子テーマで再定義したければ、読み込む順番を操作するという方法もあります。

表示にどのテンプレートが使われているか把握する

WordPressではインクルードという形でテンプレート内に別のテンプレートを読み込むことができます。
今回、例に挙げたtwentyfourteenもそうなのですが、テーマ構成が複雑になるとどのテンプレートを修正すれば、希望の出力結果になるのか分からない場合があります。
つまり、投稿ページの表示(single.php)をカスタマイズしたいが、実際にはパーツテンプレートが使われているというケースです。
テーマのカスタマイズにはまず該当の表示にどのテンプレートが使用されているか知る必要があります。

このインクルードされたテンプレートを確認する方法については別記事にしましたので、カスタマイズ初級者の方はぜひ参考にしてみてください。

WordPressで表示に使用されているテンプレートをすべて知りたい

今注目の記事

超簡単!アイコンフォント Font Awesomeの使い方
Contact Form 7の送信完了画面がでない

フォローする

WordPressとはなにかもう一度おさらいしてみよう!

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


九 × 3 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">