「子テーマ」とは?WordPressをカスタマイズする前に「子テーマ」を作成しよう

3769771267_99b93126c1_z

WordPressには「テーマ」というものがありますがこれはブログのデザインや+ちょっとした機能を変更するというものです。

今日はそれとはまた違う「子テーマ」というものに焦点を当ててお届けします。
photo by John Fischer

子テーマって?

「子テーマ」とは一体何でしょう?まずこの「子テーマ」の簡単な説明からします。

まずWordPressには「テーマ」というものが管理画面メニュー「外観」→「テーマ」で既存のテーマを選んだりダウンロードしてきた「テーマ」をアップロードして変更できます。

この「テーマ」を変更して何が変わるかというとブログの見た目のデザインや機能が変わるのです。
「テーマ」のデザインのままでも構わないのですが自分のオリジナル性を出したい、自分の好みのデザインに変更したいという時はその「テーマ」のデザインを元に「子テーマ」を作成する。
そして既存のベースとなる「テーマ」を「親テーマ」と呼び、カスタマイズするテーマを子テーマ」と呼びます。
この「子テーマ」を上書きして自分の好みのデザインにカスタマイズをしていくのです。
「親テーマ」をそのままカスタマイズしてデザインを変更すればいいんじゃないのかと思うかもしれませんが、「親テーマ」をカスタマイズするとアップデートがあった時に上書き変更したデザイン、スタイルシート、画像、広告、カスタマイズしたSNSボタン等が全て消えてしまいます。

「子テーマ」のファイルは「親テーマ」とは別の場所になるのでアップデートがあっても上書きしたデザインデータは全てそのままになるのでこれが「子テーマ」を作る上での一番のメリットとなります。

子テーマの作り方

それでは実際やってみましょう。今回ロリポップでSTINGER5の子テーマを作ってますがロリポップを使用していない方もやり方は同じです。
/wp-content/themes に小テーマのフォルダを作る
ロリポップの管理画面へログインして「ロリポップ!FTP」を選択します。

kotheme1b

「子テーマ」を作りたいブログのファイルを選択し、その中にある「wp-content」を選択する。

kotheme2b

「themes」というファイル名をクリックします。

kotheme3b

この「themes」に「子テーマ」のフォルダを作成するので上の「新規フォルダ作成」をクリック。
ちなみに下の方を確認すると「親テーマ」になるSTINGER5のフォルダも「themes」に入っています。

kotheme4b

「フォルダ名」を「子テーマ」だとわかりやすく「stinger5-child」としました。STINGER5以外のテーマを使用している場合も「○○-child」とするとどの「親テーマ」の「子テーマ」だとわかりやすいと思います。
そして「保存する」をクリック。kotheme5b

するとこのように子テーマのフォルダが出来ました。

kotheme6b

これから「子テーマ」のフォルダ内に「style.css」「images」を作成しますのでやってみましょう。
そして「stinger5-child」をクリックしてこの「子テーマ」のフォルダ内に「style.css」のファイルを作成します。「新規ファイル作成」をクリック。

kotheme7b

続いて「親テーマ」と「子テーマ」を関連付けする設定です。ファイル名にstyle.cssと記入し下のコード入力枠に下記のコードを入力し「保存する」→をクリックします。

kotheme8b

↓コード

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

@import url(‘../stinger5ver20150505b/style.css’);

ちなみに文字化けした時やうまく動かなかった時は「UTF-8」から「ASCII」に変えるか「?」に文字化けしている可能性もあるので修正したら動くと思います。

◎ポイント

  • 「Theme Name」には「子テーマ」のフォルダ名を書く
  • 「Template」には親テーマのフォルダ名を書く。ここでは「stingerver20150505b」にしたがバージョンによって数字が違ってきます
  • 他に記述コードを加える場合もありますがとりあえずこのコードを書けば「子テーマ」は動きます

さらに「stinger5-child」フォルダの中に「images」フォルダも作成します。これは子テーマで使用する画像を置くためのフォルダです。このフォルダを作成しないと「親テーマ」の「images」フォルダが使われます。
「新規フォルダ作成」→フォルダ名に「images」と入力→「保存する」をクリック。

kotheme9b

■「子テーマ」を有効に設定する

WordPressの管理画面へ行き「外観」→「テーマ」を選択します。
すると「stinger5-child」と子テーマができているのを確認し「有効化」をクリック。

kotheme10b
上の「サイトを表示する」をクリックしテーマのレイアウトが初期化して表示されていれば「子テーマ」の有効は完了です。
kotheme12

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!