WordPressの子テーマを作った

e63dfa9e237611ef4c9d70e8aa69f76c_m

WordPressのテーマがちょくちょく更新されて、そのつどcssの設定がリセットされる。「あたまのおやつ」ではフォントをいじっているので(游ゴシックで表示されるようにしている)、更新するたびにstyle.cssのfont-familyを修正してたんだけど、それが嫌なら子テーマ作れよとWordPressが言うので、仕方なく勉強しながら子テーマ作った。そのメモ。

結論から言うと、子テーマ、親テーマのstyle.cssを丸ごとコピペするのがよさそう。ほんとは子テーマって「基本は親テーマの設定を継承しつつ、子テーマで指示された箇所だけは子テーマの設定を反映」というものなので、必要な箇所だけ子テーマで修正加えればいいんだけど、子テーマのfont-familyいじっても、なんかいろいろ「そこはいじらんでいいんや」みたいなことになってて困る。ていうか書いてて気づいたけど、親テーマと子テーマってスーパークラスとクラスみたいな感じだな。オブジェクト指向っぽい。余談だけどオブジェクト指向CSS(OOCSS)というのもあるんですね。いま知った。

で、なにがどこに効いててこういう表示になってるのかわからんので、それならもういっそのこと、親テーマのstyle.cssを丸ごと引っ張ってきたら間違いないだろうと思ってそうしたら、間違いなかった。コピペが中途半端で、なんか途中までしかペーストされてなかったせいで携帯用の表示がカオスみたいになってたけど、コピペしなおしたら直った。

<WordPressの子テーマの作り方>

  1. 「wp-content/themes」に「親テーマ-child」という名前のフォルダをつくる
  2. 「functions.php」と「style.css」を用意
  3. 「functions.php」と「style.css」に以下のように記述
  4. 「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’ );

}

style.css

/*
Theme Name:   親テーマ Child
Template:     親テーマ名
*/

(※写真は親子です)