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

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

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

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



テーマをカスタマイズするとき、本テーマの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に直接追記してます。

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








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

[`evernote` not found]
Pocket

Facebookコメント

コメントを残す