読者の未来に、少しでも役立つネタを配信するブログ。

WordPress 子テーマのメリットと作成方法

      2016/01/06


WordPressでサイトをカスタマイズしたい方、子テーマを作ろうとしている方に読んでほしい記事です。

私も今まで子テーマを使っていなかったのですが、サイトを本格的にカスタマイズするにあたり、子テーマを試行錯誤して作成しました。

子テーマを作成することによって、サイトのカスタマイズがスムーズにできるようになったので、子テーマのメリットと作成方法について、ご紹介できればと思います。

スポンサーリンク

子テーマとは

子テーマとは、通常のWordPressテーマ(親テーマと言います)と連携したカスタマイズ専用のテーマのことです。

子テーマを作ることで、親テーマのコードをいじることなく、サイトのカスタマイズを楽しむことができます。

なぜなら、コード内容をサイトに反映するときに、通常は親テーマのコードをそのままサイトに反映しますが、子テーマにコードの記述がある場合、子テーマのコードを優先的に反映することができるからです。

▪︎子テーマがない場合

WordPressの子テーマがないイメージ画像

親テーマのコードがそのままサイトに反映。

▪︎子テーマがある場合

WordPressの子テーマがあるイメージ画像

子テーマのコードを優先的にサイトに反映。

子テーマのメリットとは

ここまで読んで、「親テーマを直接カスタマイズすれば良くない?」と感じている方もいると思うので、子テーマのメリットについて触れておきます。

親テーマのアップデートに振り回されない

子テーマがない場合、親テーマが何らかの理由でアップデートしたときに、アップデート前のカスタマイズ内容はすべて解除されてしまいます。

一方、子テーマがあればコードが独立しているので、そのままカスタマイズ内容を引き継ぐことができます。

カスタマイズの試行錯誤がしやすい

親テーマのコードを直接変更する場合、カスタマイズを失敗してしまったときに、元のコードがわからなくなってしまうリスクがあります。

子テーマがある場合、カスタマイズに失敗をしても、親テーマにある元のコードを参照して戻すことができるので、カスタマイズの試行錯誤がとてもしやすくなります。

子テーマのメリットを感じることができたら、いよいよ子テーマを作っていきましょう。

子テーマの作り方

WordPressのテーマ「STINGER5」、サーバー「ロリポップ!」の環境で説明しますが、他の環境でも手順は同じだと思います。

あとで注意点にも記載しますが、作業前に必ずバックアップをとることをオススメします。

サイトのFTPサーバーに入る

ロリポップ!の場合、「ロリポップ!FTP」に指定パスを入れてログインします。
ロリポップ!FTP

ロリポップのログイン画面

子テーマのフォルダを作成

ドメイン名>wp-content>themesとフォルダの階層をたどっていき、「themes」フォルダ内に子テーマのフォルダを新規作成します。

ロリポップの子テーマフォルダの作成画像

ロリポップの子テーマフォルダの作成後の画像

フォルダ名は自由ですが、「STINGER5」の場合、「stinger5child」と付けるのが主流です。

「style.css」ファイルの作成

子テーマのフォルダ内に、「style.css」ファイルを作成します。

ロリポップのスタイルシートファイルの作成画像

更に、「style.css」ファイル内に、下記のコードを記述します。

●●には子テーマのフォルダ名(私の場合は「stinger5child」)、
▲▲には親テーマのフォルダ名(私の場合は「stinger5ver20150505b」)を記載します。

「function.php」ファイルの作成

「style.css」と同じ手順で、子テーマのフォルダ内に、「function.php」ファイルを作成します。

ロリポップのfunctionファイル作成画像

更に、「function.php」ファイル内に、下記のコードを記述します。

※WordPressの公式オンラインマニュアルには、下記のコードでも反映できると記載がありましたが、私の場合は反映できませんでした。。

WordPressの公式オンラインマニュアル

子テーマの有効化

WordPressの管理画面にあるテーマ一覧に、子テーマが作成されていることを確認できたら、テーマを有効化します。

WordPressの子テーマ有効化画像

※親テーマはそのまま有効化しておいてください。

※もし、子テーマが作成されていないようであれば、ここまでの手順にミスがある可能性が高いです。

子テーマ反映のテスト

WordPressの管理画面にあるテーマの編集に、FTPサーバーで作成した「style.css」ファイルがあることを確認したら、下記のコードを記述してみてください。
※子テーマ発動用のコードの下に記述してください。

サイトを更新し、サイトタイトルが「中央」になっていれば、子テーマが正常に機能していますので、子テーマの作成完了です。

WordPress子テーマのテストカスタマイズ画像

子テーマ作成時の注意点

私が子テーマを作成するときに、学んだ注意点を最後に書いておきます。

子テーマ作成前にバックアップをおこなう

子テーマを作成しているときに、「間違ってファイルを消してしまった・・」など不測の事態が起きてしまうことがあるので、念のためバックアップはとっておいたほうが良いです。

私もこれを機会に、ロリポップ!のバックアッププランに申し込みました。

「style.css」に「@import」を記述するやり方はやらない

子テーマの作成方法を探していると、よく「style.css」に「@import」を使用した作成方法を見かけますが、サイトのスピードが遅くなるなど、公式マニュアルでもこのやり方を推奨していないので、避けたほうが良いです。

親テーマの「function.php」のコードを子テーマにそのままコピーしない

子テーマは、「style.css」だけでなく、「header.php」「sidebar.php」など様々なファイルで作成可能です。

サイトをカスタマイズをしていくにあたり、親テーマのコードをそのままコピーして(もしくは、ファイルごとコピーして)、子テーマを作成することが増えてきますが、「function.php」のファイルについては、親テーマのコードをそのまま子テーマに写すとエラーが発生します。

「function.php」特有の子テーマ作成手順があるらしいのですが、私は「function.php」だけは親テーマを直接カスタマイズしています。
(子テーマ作成時につくった「function.php」には、子テーマ発動のコードだけを記述しています。)

親テーマの「function.php」のコードを変更しないと、子テーマの「style.css」のコードが一部反映されないことがある

WordPressのテーマ「STINGER5」で発生する事象ですが、親テーマの「function.php」にある下記のコードを削除しない場合、子テーマ「style.css」のコードが一部反映されないことがあります。

削除した場合、デフォルトのカスタマイズ設定が一部使えなくなりますが、今後いろいろとカスタマイズしていくのであれば、削除することをオススメします。

本記事は以上になります。

最初は子テーマを作成することに抵抗を感じるかもしれませんが、サイトをカスタマイズしていくにあたり、子テーマはとても便利に使えるので、早めに作成することをオススメします。

お付き合い頂き、ありがとうございました!

#最後に、子テーマを作成するときに参考にしたサイトを紹介しておきます。
【参考】Stinger5の導入&子テーマの作成方法
【参考】WordPressテーマをカスタマイズするなら子テーマを使った方が良い理由、使い方など

 - ブログ運営