最新!WordPress子テーマの作り方(functions.phpに記述)

配布されているWordPressテーマのカスタマイズは自由ですが、配布されているWordPressテーマをカスタマイズするときは「子テーマ」を作りましょう。

スポンサーリンク
レクタングル大

なぜ子テーマを作るのか?

WordPressテーマは作者によるアップデートが行われますが、子テーマを作成せずにカスタマイズしていると、アップデート時に作者による新しいデータが上書きされ、せっかくカスタマイズしたデータが消えてしまいます。カスタマイズしたデータを出来る限り保存するために、WordPressテーマ(親テーマ)とは別に「子テーマ」を作成します。

子テーマ作成方法

最新の子テーマ作成方法をご紹介します。

1.子テーマ用ディレクトリを作成

親テーマと同じ階層(つまりwp-content/theme下)に、子テーマ用のディレクトリ(フォルダ)を作成し、任意のディレクトリ名(フォルダ名)を付けます。

themes
|-親テーマ
|-子テーマ

ディレクトリ名は任意ですが、WordPress Codexによると、

「子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されます(ただし必須ではありません。特に一般に公開する予定のテーマを作成する場合はこの限りではありません)」

とありますので、特別な理由がなければ「●●●-child」と付けるのがよいでしょう。

2.作成した子テーマ用ディレクトリの中に、style.cssとfunctions.phpを新規追加します。

子テーマを作るのにfunctions.phpは必須ではありませんが、親テーマのスタイルシートを読み込むためにfunctions.phpを使いますので作っておきましょう。

3.新規作成したstyle.cssを開き、冒頭に下記スタイルシートヘッダを追記します。

style.cssの冒頭に記述する上記スタイルシートヘッダはCodexに記載されている見本そのままですので、適宜ご自分用に修正します。
Template:には引き継ぐ親テーマの「ディレクトリ名」を正確に入力します。ここが間違っていると親テーマを正しく認識できませんので注意が必要です。

4.functions.phpに親テーマを引き継ぐためのコードを記述

以前は子テーマのスタイルシートに@importで親テーマのスタイルシートをインポートしていましたが、今は theme_enqueue_styles を使うことが推奨されています。

以上で子テーマの作成は終わりです。次に、子テーマの使い方をみていきましょう。

子テーマの使い方

子テーマを有効化する

管理メニュー>外観>テーマを見ると、子テーマが追加されているはずですので、子テーマを有効化します。これを忘れているといくら子テーマをカスタマイズしても何も反映されませんのでご注意を。

テーマ用の画像は、子テーマディレクトリ直下に「screenshot.png」という画像を置くと表示されます。サイズは880px × 660pxです。

テンプレートファイルやスタイルシートは上書きされる

親テーマをカスタマイズしていくときは、子テーマのスタイルシートに変更点を加えていきます。また、変更したいテンプレートファイルを子テーマディレクトリに追加してカスタマイズします。親テーマにはない新しいテンプレートファイルを追加しても大丈夫です。

子テーマにあるテンプレートファイルやスタイルシートは親テーマの後に読み込まれます。つまり、子テーマで追記した内容は親テーマにすべて上書きされていきます。親テーマにはないテンプレートファイルはそのまま読み込まれます。

functions.phpは子テーマのものが先に読み込まれる

functions.phpは例外で、子テーマのものが先に読み込まれ、上書きという概念はありません。親テーマのfunctions.phpに機能を追加していくイメージです。

親テーマに書かれていない関数を追加したい場合は、子テーマのfuncitons.phpに追記していきます。また、親テーマに既に記述されている内容を違う内容にしたい場合は、条件式を使い、親テーマの関数と子テーマの関数を置換するということを覚えておきましょう。functions.phpには開始タグ <?php を忘れずに。

WordPress Codexにも詳細な記載がありますので参考にしましょう。

追加したいJavaScriptも子テーマのfunctions.phpで読み込みます。

参考書籍

おすすめらしいですな、この教本。

プロフェッショナルに捧ぐ的な?

スポンサーリンク
レクタングル大
レクタングル大

コメントをどうぞ

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください