自分用にカスタマイズ 子テーマをつかおう – WordPressテーマ「mag.」

自分用にカスタマイズ 子テーマをつかおう

子テーマって?

子テーマは、親テーマの機能をそのまま引き継ぎつつ、部分的にカスタマイズができるWordPressの仕組みです。

くわしくはこちらをお読みください。
子テーマ | WordPress Codex 日本語版

子テーマをつかうメリット

テーマがアップデートを行ったとき、テーマの中にあるディレクトリやファイルが更新されます。もしもファイルを書き換えていたり、なにか新しく置いたものがあると、全て消えてしまいます。

一方、子テーマの中身は更新されませんので、編集したいときや追加したいときなど自分用にカスタムがしたいケースでは、子テーマをつかうと管理が楽です。

こんなときに便利です

  • 背景色・文字色を変えたいなどの部分的なcssの変更
  • 装飾を加えたいなどのcssの追加
  • ページ内に静的なコンテンツを足したいとき
  • フッターのレイアウトを変えたいなど静的なコンテンツを読み込むとき
  • 機能を足したいとき

親テーマのファイルに直接コードを足したりファイルを追加した場合、アップデートの度に消える、消えないように更新前にバックアップをとり更新後に戻す・・というのは手間が過ぎるので、子テーマをつかうと便利です。

しないほうがいいこと

親テーマfunctions.phpの内容を複製する・上書きする

子テーマ利用中は基本的に親テーマの機能がそのまま継承されます。一部を除き、子テーマの中のファイルが優先されるという仕組みですが、functions.phpファイルは親も子も両方が読み込まれます。
コンフリクトしたり、おかしな挙動の原因にもなりますので、自信のない人は子テーマのfunctions.phpは触らないようにしましょう。

親テーマのfunctions.phpには、テーマ全体の機能に関する記述が入っています。その内容を子テーマに複製したり上書きするとエラーを起こす可能性もありますのでご注意ください。

「mag.」でつかえる子テーマつくりました

よかったらどうぞ。

配布版の子テーマでできること

メインカラー・ベースカラーの変更

テーマのstyle.cssは管理画面からも編集が可能です。
配布版子テーマでは以下の変更ができるよう、style.cssの中にセットしておきました。

  1. PCヘッダー背景色
  2. スマホヘッダー背景色
  3. メニュー背景色
  4. メニュー縦線の色
  5. メニュー2階層のときの「-」の色
  6. メニュー文字色
  7. トップPICKUP背景色
  8. フッター背景色
  9. トップページ ニュースアイコン
  10. パンくずリスト背景色
  11. コンテンツタイトル文字色(トップ・一覧)

style.cssの記述抜粋

style.cssにはこのような記述が入っています。

/*
* BG COLOR
******************************************************/
/* トップPICKUP  */
.unit-bgcolor {
	background: #f6f5f3;
}
/* フッター背景色 */
.unit-bg_footer {
	background: #f6f5f3;
}
/* トップページ ニュースアイコン */
.unit-icon-color {
	background: #f6f5f3;
}
/* パンくずリスト背景色 */
.unit_breadcrumbs {
	background: #fafafa;
}

変えたいところのカラーコードを変更していきます。

静的なコンテンツを入れるなど、コーディングの追加

ページの中に自分でコーディングしたものを入れるといった場合には、親テーマのhome.phpを複製したものを子テーマに設置してコーディングしていきます。親テーマをアップデートしたときも子テーマのhome.phpは上書きされないため、そのまま維持できますので、コーディングしたものの管理にもご利用いただけます。

触るファイルだけ、子テーマに設置します

テーマアップデートの際、子テーマには反映されませんので、たくさんのファイルを複製して設置した場合、不具合修正や機能追加が反映されなくなります。ご留意ください。

基本的には機能に影響がないcssの追加編集にとどめておくのが◎です。

RELATED POST