【WordPress】3分でできる!子テーマの作り方と使い方

ワードプレスwordpressカスタマイズ

こんにちは。ひでほいです。

今回はWordPressでの「子テーマ」の作り方と使い方をご紹介します。

テーマの提供元から子テーマも提供されていれば問題ないのですが、テーマによっては提供されておらず、その場合は自分で作成する必要があります

方法さえ知っていれば、誰でも簡単に作れちゃいます。

面倒くさがって後回しにしておくと、あとあと面倒な事になりかねないので早めに導入しておきましょう!

スポンサードリンク

そもそも、親テーマと子テーマの関係性は?

ここで改めて親テーマと子テーマの関係性についておさらいです。

親テーマ・子テーマとは

  • 「親テーマ」: テーマの機能・基本デザインを持つメインテーマ
  • 「子テーマ」: カスタマイズ専用のサブテーマ

WordPressの構造として、それぞれに同一のファイルが存在した場合は、先に「親テーマ」が読み込まれ、そのあとに「子テーマ」を上書きするかたちで読み込まれます。

 

子テーマ導入のメリット
  1. テーマを最新版などにアップデートすると、テーマを自分で直接カスタマイズしていた場合、その内容も上書きされて消えてしまいます。
    しかし、子テーマへカスタマイズを行うことで、この問題を回避することができる。
  2. カスタマイズを失敗してしまった場合でも、影響を最小限に抑えることができる。

子テーマの作成方法

それでは実際に子テーマを作成していきます。

こちらが作業の流れになります。

  1. 子テーマのフォルダ作成
  2. 子テーマのstyle.css作成
  3. 子テーマのfunctions.php作成
  4. 子テーマの有効化

 

1.子テーマのフォルダ作成

まずは、子テーマのフォルダを作成します。

子テーマのフォルダ

親テーマと同じ階層である /wp-content/themesに新規でフォルダを作成します。
フォルダの名前はなんでも良いのですが「親テーマ名-child」など分かりやすい名前にしておきましょう。

今回は、このサイト「らいふーる」でも使用しているWordPressテーマ「ストーク」 を例に解説していきます。

2.style.cssの作成

作成した子テーマのフォルダ内に新規で「style.css」という名前でCSSファイルを作成します。
作成した style.css に以下のコードを記述します。

 

  • Theme Name:子テーマの名前
  • Template:親テーマのフォルダ名

 

「Theme Name」は自由に付けても良いですが、「Template」は必ず親テーマのフォルダ名を入力します。
スペルミスがあると認識されないので、正確に入力しましょう。

3.functions.phpの作成

続いて子テーマのフォルダ内に新規で「functions.php」という名前でファイルを作成します。
作成したfunctions.phpに以下のコードを記述して子テーマを認識させます。

4.子テーマの有効化

WordPressの管理画面の「外観 > テーマ」をクリックします。

子テーマ有効化

先ほど作成した子テーマが表示されているはずですので「有効化」します。

これで子テーマが使えるようになりました。

子テーマの使い方

続いて子テーマの使い方です。

使い方はいたって簡単。
カスタマイズするコードを子テーマのファイルに追加していくだけです!

試しに、先ほど有効化した子テーマの「style.css」に以下のコードを追加してみましょう。

画面をリロードすると、フォントが変わりましたでしょうか?

フォントが変わっていれば、子テーマが正常に認識されている証拠です。

子テーマを導入しておけば、万が一、カスタマイズに失敗してサイトが正常に動かなくなってしまっても、対象のファイルを削除するか、親テーマに切り替えることで、すぐに正常に動作する状態に戻すことができます

失敗を怖がらず、どんどんカスタマイズしちゃいましょう!

 

以上となります。お疲れ様でした!

最後まで読んでいただきありがとうございました。
この記事が少しでもお役に立ちましたらシェアしてもらえると嬉しいです。

コメントを残す

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