目次
目次

WordPressの子テーマ、そもそも何なのかを徹底説明！

Cocoonカスタマイズ集
この記事は約7分で読めます。
記事内に広告が含まれています。

はじめに

親テーマと子テーマ、何が違うの？
子テーマは、必要なの？

WordPressをカスタマイズする際に、重要な概念として「親テーマ」と「子テーマ」があります。
この記事では、WordPressテーマ初心者が押さえておくべき、以下の4点について説明します。

  1. 親テーマと子テーマの違い
  2. 子テーマの目的
  3. 子テーマを使用する際の注意点
  4. 子テーマを含むCSSの優先順位

親テーマと子テーマの違い

子テーマ
親テーマ
WordPressコア
親テーマと子テーマの関係

図1に、親テーマと子テーマの関係を示します。

  • 親テーマとは
    サイト全体のレイアウトや機能を構築するための基本的なファイルセットです。
  • 子テーマとは
    親テーマをカスタマイズするための、「空の器」として、機能します。親テーマがないと動作しません。
    親テーマの全ての機能や、スタイルを引き継ぎつつ、独自のコードを追加することができ、サイトの見た目や、機能を、自由に変更可能です。
    テーマ自体にはデフォルトでカスタマイズ用のコードは含まれておらず、ユーザーが独自にスタイルや機能を追加していきます。

子テーマはカスタマイズするため、自分が書いたコードだけ。

  • functions.php
  • javascript.js
  • style.css
  • Cocoon設定で設定した値は、親テーマ（cocoon-master）と子テーマ（cocoon-child-master）それぞれで別々に保存されます。
  • 設定値はデータベースのwp_optionsテーブル内のtheme_mods_テーマ名に保存されます。

子テーマの目的

子テーマの主な目的は以下の3点です。

  1. 親テーマのカスタマイズ
    親テーマのファイルを直接編集せずに、子テーマ内で変更を加えることで、親テーマのアップデートがあってもカスタマイズ内容が保持されます。
    また、子テーマにはバージョンがなく、自動で更新されることはありません。
    ユーザーが手動で更新しない限り、子テーマの内容は変わりません。
    そのため、親テーマが更新されても、子テーマのカスタマイズが失われることはありません。
  1. 安全なカスタマイズ
    子テーマは、親テーマの機能を引き継ぎながら、独自のスタイルや、機能を追加するためのものです。
    これにより、親テーマの更新や修正による影響を避けつつ、サイトのデザインや機能を変更できます。
    親テーマのコアファイルを変更せずに済むため、安全にカスタマイズできます。
  1. 機能の拡張
    子テーマを使うことで、親テーマにはない追加機能や、スタイルを簡単に実装できます。
    例えば、新しいテンプレートファイルやカスタムCSS、追加のPHPコードなどを子テーマに記述することで、サイトの独自性を高めたり、特定のニーズに合わせた機能を追加したりできます。

子テーマの注意点

子テーマのCSSには、以下の記述があります。

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
重要な項目
項目内容
Template子テーマが、どの親テーマに基づいているかをWordPressに指示します。
これにより、WordPressは子テーマが、親テーマのテンプレートファイルや、スタイルを引き継ぎ、適用する際の基準を認識します。

表1に示すコードを削除すると、図2のようなエラーが表示され、動作しなくなります。

エラー例
テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。
wp-cocoon.com

CSSの優先順

WordPressでは、複数のCSSファイルが読み込まれる場合、それぞれのファイルの優先順位がカスタマイズに影響を与えます。具体的には、以下の順序でCSSが適用されます。

  1. 追加CSS（外観→カスタマイズ）
  2. 各編集ページのカスタムCSS
  3. 子テーマのCSSファイル
  4. 親・子スキンのCSSファイル
  5. 親テーマのCSSファイル

この順序を理解していないと、意図したスタイルが適用されない場合があります。

Cocoonスキンの機能の仕様
Cocoonのスキン機能に関する詳細な仕様書です。スキン機能を利用すれば、洋服を着替える感覚でサイトデザインを変更することが可能です。
wp-cocoon.com

以下で直接コードを入力する際、行頭の半角スペースが文字化けする場合があります。

  • 外観→カスタマイズ→追加CSS
  • 外観→テーマファイルエディター
【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック
「WordPressの基本の操作方法が分からない」 「CSSの使い方が全く分からない」 「何が分からないか分からない」 というブログ・サイト制作初心者に、この記事やサイトの解説が分かりやすいよ！と紹介するトピックです。 初心者向けの記事って...
wp-cocoon.com

さいごに

WordPressを使用する上で最も基本的な、親テーマと子テーマの違いについて説明しました。
本質をしっかり理解し、カスタマイズの際には必ず子テーマを使用するようにしましょう。

タイトルとURLをコピーしました