WordPress子テーマの作り方

ヘッダ画像

WordPress子テーマの作り方

WordPressでは子テーマという機能があります。
既存のテーマをカスタマイズする際に変更したい部分を子テーマで定義できます。
ベースとなるテーマとまさに親子関係となり、オリジナルのカスタマイズ部分は子テーマのテンプレートを編集します。
親のテーマにはまったく触れる必要がありません。

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

子テーマの作成手順

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

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

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

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

他のテーマと同じ場所に

スタイルシートの準備

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

@charset "utf-8";
/*
Theme Name: TWF-Child
Template:twentyfourteen
Author: us
Theme URI: https://seous.info/
Description: twentyfourteen用オリジナル子テーマ
*/

@import url('../twentyfourteen/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で表示に使用されているテンプレートをすべて知りたい

コメントを残す

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

関連記事

WordPressのログインユーザー名は丸見え!?

WordPressのセキュリティ対策で必ずいわれるのが、ユーザー名を「admin以外に変更しよう」で […]

Contact Form 7の送信完了画面がでない

お手軽にお問い合わせフォームなどを設置できるContact Form 7 添付ファイルも送信でき、シ […]

3分で設置できる!?CSS3の角丸グラデーションボタン

CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像な […]

超簡単!アイコンフォント Font Awesomeの使い方

ひと昔前なら画像で表現していたようなアイコン。 ウェブフォントの登場によって、描画速度が速く手軽に挿 […]