知らなかった!WordPressのテーマをカスタマイズする時は「子テーマ」が基本

知らなかった!WordPressのテーマをカスタマイズする時は「子テーマ」が基本

うそ~ん。
最近知ってちょっとショック。。

テーマをカスタマイズするとき、本テーマのstyle.cssをイジってましたが、
「子テーマ」を用意してやるほうが良いみたいですね。

今回は「子テーマ」でカスタマイズする理由と作り方について。

WordPressでは有料・無料問わず多くのテーマが配布されてますね。
このブログも無料テーマを使わせて頂いてます。

こういったテーマのお陰で、アップロードして適用させるだけで簡単にブログやサイトが作れます。

ただ、「ここの色を変えたい」とか「ここの文字サイズを変えたい」とか「レイアウトは好きだけど、ヘッダー画像のサイズを変えたい」などなど、
テーマを変えるほどではないけど、ちょっと自分好みにしたい時ってありますよね?

そんな時には「子テーマ」でやるのが基本?らしいです。

「子テーマ」って何?

「子テーマ」ってのは、
「親テーマ」= 使用してるテーマの下位テーマ=子供って感じ。

親テーマのファイルを引き継いだ上で、子テーマが適用することも可能になるので、必要な(修正したい)ところだけ子テーマのファイルに書いちゃえばOKになります。

「子テーマ」でカスタマイズするメリットは?

親テーマのファイルを直接修正するのもいいんですが、
テーマ本体が新しく更新(バージョンアップ)された時に、イジったものも一緒に更新されちゃうんですね。
つまり修正部分もリセットされる。。。

でも子テーマで修正しておけば、親テーマが修正されても子テーマが適用されるのでリセットされない。

あと、オリジナリティを出したいけど、一からシコシコとデザインするのが面倒な場合、
親テーマのデザインや機能を引き継いだ子テーマファイルを使えば、必要最小限の記述でデザインすることも可能になります。

いや~最近まで知らなかったな~ははは(・∀・)

子テーマの作り方

では作り方です。

今回は公式テーマのTwenty Twelveで説明します。

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

まずはフォルダを作成します。
名前は自分でわかればいいので適当でOK。
ここでは「Child」とします。

2.フォルダ内にstyle.cssを作成

フォルダ内にstyle.cssのファイルを作ります。
次で記述するので、とりあえず中身は空でいいです。

theme-child

3.style.cssに記述

子テーマのstyle.cssに、最低でも下記を記述します。

/*
Theme Name: child/*子テーマを指定*/
Template: twentytwelve/*親テーマを指定(正確に記述)*/
*/

こうすることで、テーマとして認識される準備ができました。
Descriptionとか、他の項目の記述は好みで。

4.アップロード

このchildフォルダをftpソフトとかでアップロードしましょう。
アップロード先はthemes内でOKです。

これでchildがテーマとして読み込まれます。

theme-child1

これを有効化すると実際に反映されるはずです。

5.親テーマのcssを引き継ぐ

4の作業まででchildがテーマとして適用されましたが、現状だと親のcssは反映されていません。
theme-child2

一からデザインし直すならいいのでしょうが、
今回のようにちょっとしたカスタマイズなら、親テーマのデザインに手を加えるほうが効率的です。

そこで親テーマのcssを引き継ぐための記述を加えます。

@import url('../twentytwelve/style.css');/*親テーマのcssを読み込む*/

これを子テーマのstyle.cssに追加しておくことで、親テーマのスタイルを継承した上でカスタマイズ可能になります。

参考画像
theme-child3

まとめると、子テーマのstyle.cssには

/*
Theme Name: child
Template: twentytwelve
*/

@import url('../twentytwelve/style.css');

と記述することになります。

もし上手く反映されてないときは、記述が間違ってる可能性があります。
親テーマの指定が正確でなかったり。

あとは好きな様にcssを記述していけばOKです。

例えば適当にh1を変更してみます。

子テーマのstyle.cssに

h1.entry-title{
	color:red;
}

を追加してみると、親テーマのデザインを引き継いだ上で、記述が反映されます。

theme-child4

これは便利!

今回はstyle.cssでしたが、その他のファイルでもいけます。

これまで直接書き換えてたけど、子テーマを作って書くようにします!

functions.phpはちょっと違うみたい

子テーマでstyle.cssは上書きできますが、
functions.phpはちょっと厄介。

同じように子テーマにfunctions.phpを作って記述してもエラーになったりします。

他のファイルでは親テーマを読み込んだ後に子テーマが読み込まれますが、
子テーマのfunctions.phpを読み込んだ後に、親テーマのfunctions.phpを読み込むかららしいです。

function.phpの作り方はあるみたいですが、まだ詳しく調べてません。
なので、とりあえず今は、親テーマのfunctions.phpに直接追記してます。

でもバージョンアップのたびに消えることになるので、いい方法ではありません。。

[ad#ad-post-bottom]

気分に任せて更新中 ε-(/・ω・)/ トォーッ!!
follow us in feedly

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください