子テーマの利点とは？｜配布子テーマの使い方

子テーマとは？

子テーマとは、既存のテーマ（＝親テーマ）と同じデザインや機能を引き継ぐテーマです。テーマ等をカスタマイズしたいときには子テーマを使用することが推奨されています。 子テーマの利点としては、子テーマ自体は基本的にバージョンアップの必要がないということが挙げられます^※。子テーマのコードは親テーマに依存しており、親テーマをバージョンアップすることで更新内容が子テーマにも反映されるためです。 Welcart では現在、「Welcart Basic」を親テーマとしてデザインや機能を変更した各種子テーマを提供しています。 「Welcart Beldad」をはじめとした子テーマは、対応する親テーマとの併用を前提としています。子テーマをインストール・有効化する際は、必ず元となる親テーマも併せてWordPressにインストールしておきます。

※「Welcart Beldad」等の販売されている子テーマは更新作業が必要となります

子テーマの使用シーン

子テーマを作成・使用するシーンとしては、大きく分けて下記の2つのシチュエーションがあります。

• 自分好みのテーマを作りたいけれど、いちから自分で作るのは面倒な場合

このような場合は、子テーマを用いることで、基本的な記事の表示のコードなどは既存のテーマのものを使いながら、見せ方や機能のみ自分好みに変更するというようなことが可能になります。

• 既存のテーマの機能やデザインに物足りなさを感じてカスタマイズを加える場合

このような場合は、既存のテーマ（親テーマ）本体ではなく、子テーマとして別ファイルを作成しそこにカスタマイズを加えることが推奨されています。

Welcartでは、主に後者の場面を想定して、プレーンな状態の子テーマファイルを無料配布しています。

配布子テーマの使い方

　配布子テーマとは

配布子テーマとは、対応する親テーマと併せてダウンロード・インストールすることで、そのまま子テーマとして使用できるファイルです。現在、「Welcart Basic」「Welcart Mode」「Welcart Panetteria」「Welcart Assertive」「Welcart Simple Plus」の配布子テーマが各テーマの詳細ページで無料配布されています。

配布子テーマには必要最小限のファイルやコードが揃っており、このファイルをそのままアップロードしてインストール・有効化すれば、元となるテーマのコピーのような形で機能します。また、このファイルに手を加えることで、元となるテーマのCSSやテンプレートを変更することが可能となります。

　配布子テーマ使用の手順

① 親テーマをダウンロード・インストール

まずは、「Welcart Basic」「Welcart Mode」「Welcart Panetteria」「Welcart Assertive」「Welcart Simple Plus」のいずれかを購入し、ダウンロード・インストールします。

② 配布子テーマをダウンロード

選んだ親テーマの詳細ページにて、対応する配布子テーマをダウンロードします。 ダウンロードすると、指定の場所に〇〇（該当の親テーマ名）_child.zip という圧縮ファイルができます。

Welcart Mode

Welcart Panetteria

Welcart Assertive

Welcart Simple Plus

③ 子テーマ・スターターキットのアップロード

管理画面の外観 ＞ テーマ＞ 新規追加＞ テーマのアップロード から圧縮ファイルをそのままアップロードしてインストール・有効化します。

④ 子テーマの編集・アップロード

ローカルにある子テーマのファイルをエディタで開き編集をします。 編集が完了したらFTPクライアントを使用し、サーバーにファイルをアップロードしましょう。

先にローカルで子テーマファイルを編集しておき、 編集済みの子テーマを管理画面からアップロードすることも可能です。 なお、その場合は子テーマファイルを管理画面からアップロードする際にファイルを圧縮する必要があります。

　配布子テーマ各ファイルの役割

配布子テーマの構成は以下のとおりです。 子テーマを編集する際の参考にしてください。

　ディレクトリ名（フォルダ名）：〇〇（該当の親テーマ名）_child

style.css	デザインスタイルを司るファイルです。ここに子テーマのデザインスタイルを追加していきます。冒頭に子テーマのタイトル（Theme Name）や、どの親テーマを参照するか（Template）が記述してあります。
functions.php	WordPressやテーマの機能を司るファイルです。親テーマの機能を継承する役割を果たしています。ここにコードを追加することで子テーマ独自の機能を実装することができます。
usces_cart.css	主にカート周りのスタイルを上書き・追加する際に使用します。
imagesフォルダ	主に子テーマで使用する画像をアップロードします。 このフォルダにタイトルアイコンを用意することで、Welcartの専用ウィジェットのタイトルにオリジナルのアイコンを表示することができます。
screenshot.png	子テーマのサムネイル画像データです。この画像は管理画面の 外観 ＞ テーマ の画面に表示されます。

まとめ

テーマ等をカスタマイズする際は、子テーマにカスタマイズコードを設置することが推奨されています。 しかし、ご自身でテーマのカスタマイズを行っている方の多くはテーマ（親）本体にコードを追加していらっしゃいます。 また、弊社以外の制作会社にテーマのカスタマイズを依頼された際に、テーマ本体を改変されてしまい、アップグレードが行えなくなるケースも珍しくないようです。 まずは「テーマのカスタマイズ＝子テーマを編集」という発想を持っていただければ、カスタマイズによるトラブルを減らすことができるかと思います。

この記事は役に立ちましたか？

4