1. TwentyTwelveの
子テーマつく ったらハマった話
2013/03/17
WordBench京都
Cherry Pie Web 川井昌彦

2. 自己紹介
●川井昌彦（かわいまさひこ） @sakuragi_kei
東京の制作会社で24年間勤めた後、
京都府舞鶴市に帰郷してフリーランスで活動中
実は、DTPのほうが経験が長い （このスライ ドも InDesign で作っています）
実は、MovableTypeのほうが経験が長い
小桜インコ シロハラインコ 黒い柴犬のパパ
・ ・
Cherry Pie Web http://www.cherrypieweb.com
2

3. このスライドは、
こんな人におススメ
いわゆる
「Webデザイナー」
• HTMLとCSSはだいたいわかる
• JavaScriptは、
どっかのブログに書いてあるのを
コピペして使うく らい
• PHPは、
WordPressで最低限必要なことを、
解説書とかブログとか読んで、
なんとなくわかっ ているような、いないような ・
・・
3

4. まえがき―子テーマとは
WordPressの制作 ≒ テーマの作成
一からテーマを作るのは大変
既存のテーマを持ってきて、
一部を改造して使うのが手っ取り早い
その時によく使われる方法が、子テーマ」
「
※ テーマのメリ トは、
子 ッ 他でもいろいろ説明されているので
ここでは省略
WordBench京都2月の、 瀬戸さんのスライ ドとか見ましょう。
http://www.slideshare.net/aschachamaru/ss-16625153
←これは、子イヌ
4

5. かのこ、 じゃあ、
ひらめいたのだ！
最新WordPressについてくる
公式テーマ「TwentyTwelve」の
子テーマ作って
カスタマイズしちゃおう ！
なんて、軽く考えていたのですが ・
・・
5

6. 甘かった！
6

7. 子テーマを作るのは、
「良い方法」だけど「簡単な方法」
ではない！
特に、WordPressに付属して るテーマは要注意
く ！
（TwentyEleven, TwentyTwelve など）
新しい機能や新しい考え方を盛り込んであるので、
新しい機能をすぐに使える
↓
新しい考え方を理解しないといけない！
7

8. しかも、TwentyTwelveでは、
TwentyEleven までのやり方だとうまく行かないことがある
世の中のブログ記事の多くが、
”時代遅れ”になっている！
早く、
追いつくのだ！
8

9. というわけで、今日は、
実際に「TwentyTwelve」の
子テーマを作りながら、
「ハマりやすい」
ところと
その対処法について
お話しします。
9

10. 本日のメニュー
●まずは、
子テーマを作ってみよう！
●ie8以下にだけ、
子テーマの style.css が適用されない！
●え ？ テンプレートにcssの記述がないよ
っ ？
●font-sizeの「rem」 て何？ なんか小数点が凄いよ
っ ！
●タイトルに勝手にサイト名が付いて、
SEO対策のプラグイン入れても変なタイトルになるよ！
●親テーマの functions.php のおせっかいな設定が、
子テーマで上書きできないよ ！
10

11. 子テーマを作ってみよう
子テーマを作るには、
ディ トリを作っ
レク て、
style.css に2行ほど書くだけ。 超カンタン!
/*
Theme Name: WB Kyoto 2013_3
Template: twentytwelve
*/
これは、最低限の記述で、
ホントは、
他にもいろいろ
書かないといけないのだ。
だまされちゃイケナイのだ！
11

12. 子テーマを適用すると、
親テーマの style.css が適用されなくなる
子テーマでは、cssは子テーマの style.css が使用される
親テーマを流用して 一部だけ改造したいのだから、
親テーマのcssを適用したい
↓
子テーマの style.css の先頭に、親テーマの style.css を読み込んで、
子テーマの style.css で上書きしていく
@import url('../twentytwelve/style.css');
（注）
この方法は、
TwentyEleven までのやりかた
12

13. ie8以下だけ、
子テーマの style.css が適用されない！
この方法で、
子テーマの style.css で上書きしてみると ・
・・
子テーマの css が
「適用されるところ」「適用されないところ」
と が出て る
く ！
しかも、
ie8以下 だけ！
・・
・ でも、
これ、ieが悪いんじゃないんです 。
TwentyTwelve のせいなんです ・
・・
13

14. 書き出された HTML を見てみると、
子テーマの style.css の後に、
親テーマの ie.css というのが読み込まれている
link rel='stylesheet' id='twentytwelve-style-css'
href='http://.../wp-content/themes/twentytwelve/style.css?ver=3.5.1'
type='text/css' media='all' /
!--[if lt IE 9]
link rel='stylesheet' id='twentytwelve-ie-css'
href='http://.../wp-content/themes/twentytwelve/css/ie.css?ver=20121010'
type='text/css' media='all' /
![endif]--
で、
ここを直そうと思ってテンプレートを見てみると ・
・・
14

15. テンプレートに、cssの記述がない！
TwentyEleven では、header.php で
スタイルシートを読み込んでいたが、
TwentyTwelveでは読み込む記述がない ！
どうなってんの？
15

16. テンプレートにcssの記述がない
どうなってんの ？
実は、
TwentyTwelve の functions.php で記述されている
function twentytwelve_scripts_styles() {
global $wp_styles;
（中略 webfontの読込）
/*
* Loads our main stylesheet.
*/
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
16

17. /*
* Loads the Internet Explorer specific stylesheet.
*/
wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() .
'/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
$wp_styles-add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );
これで、header.php の wp_head() のところにcssが挿入される
メインのcssは、 get_stylesheet_uri() で子テーマの style.css が
適用されるが、 ieは、コンディショナルコメン トが生きて、
ie.css が後から適用される。
ie.css は、get_template_directory_uri() が指定されているので、
親テーマの ie.css が適用されてしまう ！
17

18. つまり、
子テーマの style.css に親テーマの style.css を
@import で読み込む方法だと ・ ・・
１ 親テーマの style.css
．
ネットに書いてある通りじゃ
ダメってことなのだ・・・
２．
子テーマの style.css
こんなの、フツー、
親テーマの ie.css
３． わかんないのだ！
の順に読み込まれるので、
ie8以下で見たときは、
子テーマの style.css が、
親テーマの ie.css で上書きされてしまう ！
18

19. 対策：
子テーマに functions.php をつくって、
スタイルシートの読み込みを再定義する
function wbkyoto_scripts_styles() {
global $wp_styles;
wp_enqueue_style( 'twentytwelve-style',
get_template_directory_uri().'/style.css', array() );
wp_enqueue_style( 'twentytwelve-ie',
get_template_directory_uri() . '/css/ie.css',
array( 'twentytwelve-style' ), '20121010' );
$wp_styles-add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
wp_enqueue_style( 'wbkyoto-style',
get_stylesheet_uri(), array('twentytwelve-ie') );
wp_enqueue_style( 'wbkyoto-ie',
get_stylesheet_directory_uri().'/css/wbkyoto-ie.css',
array( 'wbkyoto-style' ) );
$wp_styles-add_data( 'wbkyoto-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'wbkyoto_scripts_styles' );
19

20. （解説）
親テーマの下記の記述では、
子テーマの style.css が読み込まれてしまう
wp_enqueue_style(
'twentytwelve-style',
get_stylesheet_uri()
);
そのため、
子テーマで同じハンドルを使っ 再定義する
て、
wp_enqueue_style(
'twentytwelve-style',
get_template_directory_uri().'/style.css',
array()
);
20

21. なぜ、
こんなややこしいことをしているのか？
１ 読込順序
． （依存関係）
をコントロールできる
２． バージョン指定により、
ブラウザキャッシュの
コン トロールができる
うー、めんどくさくて、
眠くなりそうなのだー
21

22. 読込順序（依存関係）
をコントロールできる
wp_enqueue_style() は、
記述順に読み込むのではなく、
第3引数に指定されたハン ドルの「次」
に読み込むように指定される
さきほどの場合は、
１． 親テーマの style.css ハン ： twentytwelve-style
ドル
2． 親テーマの ie.css ハン ： twentytwelve-ie
ドル
3． 子テーマの style.css ハン ： wbkyoto-style
ドル
4． 子テーマの ie.css ハン ： wbkyoto-ie
ドル
の順に書き出される
22

23. ブラウザキャッシュのコントロールができる
第4引数にバージョ ンを指定すると、
ブラウザキャッシュのコントロールができる
（バージョンがGETパラメーターに指定される）
chromeのように、 キャッシュが効きすぎてスタイルシートを修正してもなかなか表示に反映され
ない場合、 GETパラメータを変えてやることで反映されるようになる
いちいちバージョ ンを指定するのも面倒なので、こんな感じで書いておくと、
cssファイルの修正日時を、バージョ して出力して
ンと くれるので、オススメ！
wp_enqueue_style(
'twentytwelve-style',
get_template_directory_uri() . '/style.css',
array(),
date('YmdHis',
filemtime(get_template_directory_uri() . '/style.css'))
);
23

24. テンプレートごと （投稿タイプごととか、カテゴリごとなど）
に
cssを適用したいとき、
たとえば ・
・・ single-blog.php → blog.css
archive-blog.php → blog.css
single-news.php → news.css
archive-news.php → news.css
?php
function news_scripts_styles() {
wp_enqueue_style( 'news-style', get_stylesheet_directory_uri().'/
css/news.css', 'wbkyoto-style' );
wp_enqueue_style( 'news-style-ie', get_stylesheet_directory_uri().'/
css/news-ie.css', 'news-style' );
}
add_action( 'wp_enqueue_scripts', 'news_scripts_styles' );
get_header(); ?
24

25. font-sizeの「rem」って何？
なんか、 小数点が凄いよ！
TwentyTwelve の style.css には、見慣れない単位がある
.site-header h1 {
font-size: 24px;
font-size: 1.714285714rem;
}
font-size の値は、アクセシビリティに配慮し、
文字サイズを変えられるようにするため、
親要素からの相対サイズで指定するのが一般的
（例） html が 14px なら、 は、 （12px）
p 86% とか
25

26. しかし、親要素を継承するので、だんだんわからなくなる。
（例）
html { font-size: 14px; }
ul li { font-size: 86%; }
li はどんどん小さくなる
ul
liaaa - 12px
ul
liaaa/li - 10px
/ul
/li
/ul
14px × 0.86 × 0.86 = ???
26

27. rem （root em）
ルート要素 （htmlタグ）
を基準とした相対サイズ
（例）
html { font-size: 14px; }
ul li { font-size: 0.857142857rem; }
li は 12px で変わらない。
ul
liaaa - 12px
ul
liaaa/li - 12px
/ul
/li
/ul
27

28. TwentyTwelve - style.css
html { font-size: 87.5%; } ← ブラウザのデフォルトが16px
基準の文字サイズが 14px なので、
各フォ トサイズは下記のようになる
ン
16px = 1.142857143rem
12px = 0.857142857rem
11px = 0.785714286rem
10px = 0.714285714rem
こんなの、
おぼえられないのだー
28

29. 「こんなの、覚えられないよ 」
！ というあなた！
子テーマの style.css の最初にこう書いてしまいましょう。
html { font-size: 10px; }
これで、基準の文字サイズが 10pxになったので、
16px = 1.6rem
12px = 1.2rem
11px = 1.1rem これなら、
10px = 1rem わかりやすいのだー
29

30. style.css では、
なぜ rem の前に px を重複して指定しているのか
.site-header h1 {
font-size: 24px;
font-size: 1.714285714rem;
}
というと ・
・・
ie8以前は
rem に対応していない
のでした ・・・
みんな、さっさと
バージョンアップ
してほしいのだ！
30

31. タイトルに勝手にサイト名が付いて、
SEO対策のプラグインを入れると
変なタイ トルになってしまう！
All in One SEO Pack、Headspace2 などのSEO対策用プラグイン
で、 トルに自動でキーワードやサイ
タイ ト名を挿入する対策を行うとき
TwentyTwelve で、
これらのプラグインを推奨設定にすると、
投稿のタイ トルにサイ ト名がダブってしまう
・ in One SEOの設定
All
%post_title% | %blog_title%
・出力されたTitleタグ
title投稿Cherry Pie Wordpress | Cherry Pie Wordpress/title
↑ 投稿名になぜかサイト名が付いてしまう
31

32. TwentyEleven から、
プラグイン無しの状態でも
タイ トルにサイト名が入るようになっている
TwentyEleven は、
テンプレート ファイル header.php に
処理が書いてあったので、 子テーマで変更してやればよかったが、
TwentyTwelve では、functions.php に書かれてしまっ ているので、
テンプレート ファイルでは変更できない
TwentyTwelve - functions.php
function twentytwelve_wp_title( $title, $sep ) {
・・・
（タイトルにサイト名を追加する処理）
・・・
}
add_filter( 'wp_title', 'twentytwelve_wp_title', 10, 2 );
32

33. add_filter されている処理は、
remove_filter で削除できる
でも ・
・・
functions.php は、
子テーマ → 親テーマ の順で読み込まれるので、
子テーマの functions.php で単に
remove_filter( 'wp_title', 'twentytwelve_wp_title');
と書いても、
そのあとで親テーマで add_filterされてしまう ・
・・
33

34. 親テーマの functions.php の
処理を変更したい ！
子テーマで親テーマの処理を変更したいときは、
アクションフック after_setup_theme を使う
子テーマ - functions.php
function wbkyoto_theme_setup () {
remove_filter( 'wp_title', 'twentytwelve_wp_title');
}
add_action( 'after_setup_theme', 'wbkyoto_theme_setup' );
TwentyTwelve に限らず、
子テーマで親テーマの functions.php 内の処理を変えたり
キャンセルするときには、 上記の関数の中に追加していけばよい
34

35. 親テーマやプラグインの functions.php の中で、
after_setup_theme でフックされている処理は
どうするか ？
add_action() は、第3引数が小さいほうが先に実行される
TwentyTwelve の functions.php にも
after_setup_theme でフックされている関数があるが、
第3引数が設定されていない （デフォル ト値＝10）
ので、
第3引数に10より大きな数値をつければ、 上書きできる
function child_theme_setup () {
（親テーマの処理を上書きする処理）
}
add_action( 'after_setup_theme', 'child_theme_setup', 20 );
35

36. ご清聴ありがとうございました。
36

37. 37