WordPressの子テーマとは?子テーマの作り方についてご紹介します

Wordpressの子テーマ 初心者向けコンテンツ

『子テーマって聞いたことがありますか?』

WordPress初心者から中級者に上がるために、避けて通れない道があります。それは『コードを操ること』です。
ワードプレスを楽しむためには『htmlやcssの知識』が必要不可欠なのです。
「ぐっはーーーー苦手、やりたくない!」と思った方は、今日はやめておきましょう。
また気が向いたときにやりましょう笑。

ってことで、『Wordpressの子テーマ』について扱います(ドーン)
子テーマ・・・それはなんじゃらほい?

子テーマとはなんなのか?

子テーマを作るということは、自分らしいウェブページにするために必要なのです!
ほとんどの人は、ワードプレスにテーマを導入して、そこにプラグインを入れてどんどん自分らしいウェブページにしているはずです。

でも、テーマを自分で作らない限り、ウェブサイトのデザインはほとんど変わりません。でもテーマを一から作る技術を持ってる人はそう多くないのが現実です。

だから元のテーマを少しだけ変えて、自分らしさを表現しようというのが子テーマの役割です。
アレンジってことですね。
例えば、ファッション雑誌に載ってるモデルの服装を完璧に真似た上で、腕時計変えちゃおうみたいな。

例えば、お店で出てきた料理に、一味を加えて、自分好みの味にしちゃおうみたいな。

  • 親テーマ:既存のワードプレスのテーマ
  • 子テーマ:親テーマの機能とスタイルを元に、ちょっとした編集をするためのテーマ

子テーマを作る重要性

「なんで子テーマが必要なんだ?親テーマをちょっと変えればいいだろ!」という人がいるかもしれません。確かに、そちらでもいいのです。

ただし、テーマは機能などの追加により、アップデートが行われます。
もし、親テーマに編集を加えておいてそのままアップデートしてしまったら、せっかく編集したものも全て上書きされてしまいます

そうしたら、またはじめから自分らしさを求めたテーマの作成に取り組まなければなりません。(親テーマをいじるってこと)
だから親テーマを直接編集するのではなく、子テーマを作り、それを編集するのです。(子テーマは自分で作るものですから、アップデートされても上書きなどされません。)

子テーマの作り方

さて、子テーマを作る準備をしましょう。
全部で10分ほどあれば、作成することができます。

まずはWordPressをインストールしてるフォルダを開いて『public_html』→『wp-content』→『themes』の順に進んでください。(FileZillaを利用しています)

で、私はstinger520150505bというテーマを作っているので(今は違う)、これを親テーマとします。そこで子テーマの名前を「stinger5-child」という名前にしてフォルダーを作ります。(子テーマには『親テーマ-child』とつけるのが一般的です。)

子テーマの作り方

子テーマ(stinger5-child)のフォルダの中に『style.css』を作成しましょう。
作成も簡単で、テキストエディタに下のようにコードを打ち込んでください。

/*
Theme Name: stinger5-child
Template: stinger5ver20150505b
*/

Theme Nameには子テーマの名前を。
Templateには親テーマの名前を書きましょう。(ここは間違えないでください。)

そうしたらstyle.cssと名前をつけて保存します。
今度は、子テーマのフォルダの中に『functions.php』を作りましょう!

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

これはコピペでOKですよ。これを書くことにより、親テーマのスタイルが子テーマに引き継がれます。
できたら、functions.phpと名前をつけて保存しましょう。
子テーマの中身は下の画像のようになってるはずです。

子テーマの作り方

ここまでできたら、子テーマを有効化して確認してみます。
ワードプレスのダッシュボードに戻り、外観→テーマと進んで、『自分のテーマ(私ならstinger5-child)』というテーマを確認し、有効化します。

子テーマの作り方

これで完了です!
ちゃんとできたか確認するためには、ダッシュボード→外観→テーマ編集で、テンプレートを見てみましょう。そこが親テーマを引き継いでいたら確認終了です。

子テーマの作り方

まとめ

いかがだったでしょうか。
今回の記事では『Wordpressの子テーマ』について書いてきました。

では簡単に今回の記事をまとめます。

  • テーマの差別化をするために子テーマは必要
  • 子テーマを作るメリットとして、親テーマがアップロードされても、データは消えないということ
  • ワードプレス初心者から中級者になるためには、子テーマを利用して自分らしいウェブサイトの構築をするべし。

余談:もうちょっと詳しく子テーマについて

気にならない人は見なくて結構です。

『functions.phpからではなく、style.cssから親テーマを読み込むこも可能です。』

/*
Theme Name: stinger5-child
Template: stinger5ver20150505b
*/
 
@import url('../stinger5ver20150505b/style.css');

style.cssに「@import〜」で親テーマを読み込んでる人もいるらしいです。
しかし、読み込み速度の観点からfunctions.phpを作成たほうが良いみたいですね。
functions.php作るのめんどくさいって方以外は、作りましょう。

なぜ子テーマを作ることでサイトの表示にそこまで大きく影響があるのか?

今作ったのは子テーマのフォルダの中には2つのファイルしかありません。
それでも親テーマと同じ機能が使えている。

「なぜだ?」

一言で表すなら子供優先です。
フォルダの中に入ってるたくさんのファイルをWordPressが読み込んでウェブサイトとして表示していますよね。
そこでWordPressは考えるわけです。

WordPress「親テーマと子テーマに同じようなファイルがあるぞ。どっちを表示させよう・・・。やっぱり子は将来の資産!子を優先させて表示させよう!でも子だけでは頼りないから、親には縁の下の力になってもらおう!」

というふうに昔のすごい人はそうなるようなプログラムを書いたんでしょうね(たぶん)。

コメント