2013/03/17 WordBench京都

Cherry Pie Web 川井昌彦

TwentyTwelveの 子テーマつくったらハマった話

2

自己紹介●川井昌彦（かわいまさひこ） @sakuragi_kei　東京の制作会社で24年間勤めた後、 　京都府舞鶴市に帰郷してフリーランスで活動中

　　実は、DTPのほうが経験が長い　（このスライドも InDesign で作っています） 　　実は、MovableTypeのほうが経験が長い

　小桜インコ・シロハラインコ・黒い柴犬のパパ

Cherry Pie Web http://www.cherrypieweb.com

3

このスライドは、こんな人におススメいわゆる「Webデザイナー」• HTMLとCSSはだいたいわかる

• JavaScriptは、どっかのブログに書いてあるのを コピペして使うくらい

• PHPは、WordPressで最低限必要なことを、 解説書とかブログとか読んで、 なんとなくわかっているような、いないような・・・

4

まえがき―子テーマとはWordPressの制作 ≒ テーマの作成一からテーマを作るのは大変 既存のテーマを持ってきて、一部を改造して使うのが手っ取り早い

　　　　　　　　　その時によく使われる方法が、「子テーマ」　　　　　　　　　　　　　※ 子テーマのメリットは、他でもいろいろ説明されているので

ここでは省略

　　　　　　　　　　　　　　WordBench京都2月の、瀬戸さんのスライドとか見ましょう。 　　　　　　　　　　　　　　http://www.slideshare.net/aschachamaru/ss-16625153

←これは、子イヌ

5

　　　　　　　　　　　　　なんて、軽く考えていたのですが・・・

じゃあ、 最新WordPressについてくる

公式テーマ「TwentyTwelve」の 子テーマ作って

カスタマイズしちゃおう！

かのこ、ひらめいたのだ！

6

甘かった！

7

子テーマを作るのは、 　「良い方法」だけど「簡単な方法」ではない！

　　特に、WordPressに付属してくるテーマは要注意！ 　　　（TwentyEleven, TwentyTwelve など）

　　新しい機能や新しい考え方を盛り込んであるので、 　　　　　新しい機能をすぐに使える

　　　　　　　　　　　↓

　　　新しい考え方を理解しないといけない！

8

　　しかも、TwentyTwelveでは、 　　　TwentyEleven までのやり方だとうまく行かないことがある

　世の中のブログ記事の多くが、 　　　　”時代遅れ”になっている！

早く、 追いつくのだ！

9

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

10

本日のメニュー●まずは、子テーマを作ってみよう！

●ie8以下にだけ、子テーマの style.css が適用されない！

●えっ？ テンプレートにcssの記述がないよ？

●font-sizeの「rem」って何？ なんか小数点が凄いよ！

●タイトルに勝手にサイト名が付いて、 　SEO対策のプラグイン入れても変なタイトルになるよ！

●親テーマの functions.php のおせっかいな設定が、 　子テーマで上書きできないよ！

11

子テーマを作ってみよう子テーマを作るには、 　ディレクトリを作って、 　　style.css に2行ほど書くだけ。　超カンタン!/*

Theme Name: WB Kyoto 2013_3

Template: twentytwelve

*/

これは、最低限の記述で、 ホントは、

他にもいろいろ 書かないといけないのだ。

だまされちゃイケナイのだ！

12

子テーマを適用すると、 　　親テーマの style.css が適用されなくなる子テーマでは、cssは子テーマの style.css が使用される

親テーマを流用して一部だけ改造したいのだから、 　　　　　　　親テーマのcssを適用したい 　　　　　　　　　　　↓ 子テーマの style.css の先頭に、親テーマの style.css を読み込んで、子テーマの style.css で上書きしていく@import url('../twentytwelve/style.css');

　　　　　　　　（注）この方法は、TwentyEleven までのやりかた

13

ie8以下だけ、 　子テーマの style.css が適用されない！

この方法で、子テーマの style.css で上書きしてみると・・・

子テーマの css が 　「適用されるところ」と「適用されないところ」が出てくる！　しかも、 　　　ie8以下 だけ！

・・・でも、これ、ieが悪いんじゃないんです。 　　　　　TwentyTwelve のせいなんです・・・

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]-->

で、ここを直そうと思ってテンプレートを見てみると・・・

15

　　テンプレートに、cssの記述がない！

　　　　　TwentyEleven では、header.php で 　　　　　　スタイルシートを読み込んでいたが、 　　　　　TwentyTwelveでは読み込む記述がない！

どうなってんの？

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() );

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 が適用されてしまう！

18

つまり、子テーマの style.css に親テーマの style.css を 　　　　　　　　　　　　　@import で読み込む方法だと・・・

１．親テーマの style.css

２．子テーマの style.css

３．親テーマの ie.css

の順に読み込まれるので、 　　ie8以下で見たときは、子テーマの style.css が、 　　　　　　親テーマの ie.css で上書きされてしまう！

ネットに書いてある通りじゃ ダメってことなのだ・・・

こんなの、フツー、 わかんないのだ！

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' );

20

（解説） 親テーマの下記の記述では、 子テーマの style.css が読み込まれてしまう wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

そのため、 子テーマで同じハンドルを使って、再定義する wp_enqueue_style( 'twentytwelve-style', get_template_directory_uri().'/style.css', array() );

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

の順に書き出される

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')) );

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(); ?>

25

font-sizeの「rem」って何？ 　　　　なんか、小数点が凄いよ！

TwentyTwelve の style.css には、見慣れない単位がある.site-header h1 { font-size: 24px; font-size: 1.714285714rem; }

font-size の値は、アクセシビリティに配慮し、 　文字サイズを変えられるようにするため、 　　親要素からの相対サイズで指定するのが一般的　　（例）　html が 14px なら、p は、86%（12px）とか

26

しかし、親要素を継承するので、だんだんわからなくなる。

（例） html { font-size: 14px; } ul li { font-size: 86%; }

li はどんどん小さくなる<ul> <li>aaa <- 12px <ul> <li>aaa</li> <- 10px </ul> </li> </ul>

14px × 0.86 × 0.86 = ???

27

rem （root em） ルート要素（htmlタグ）を基準とした相対サイズ（例） html { font-size: 14px; } ul li { font-size: 0.857142857rem; }

li は 12px で変わらない。<ul> <li>aaa <- 12px <ul> <li>aaa</li> <- 12px </ul> </li> </ul>

28

TwentyTwelve - style.css html { font-size: 87.5%; }　← ブラウザのデフォルトが16px

基準の文字サイズが 14px なので、各フォントサイズは下記のようになる

16px = 1.142857143rem 12px = 0.857142857rem 11px = 0.785714286rem 10px = 0.714285714rem

こんなの、 おぼえられないのだー

29

「こんなの、覚えられないよ！」というあなた！子テーマの style.css の最初にこう書いてしまいましょう。html { font-size: 10px; }

これで、基準の文字サイズが 10pxになったので、

16px = 1.6rem 12px = 1.2rem 11px = 1.1rem 10px = 1rem

これなら、 わかりやすいのだー

30

style.css では、なぜ rem の前に px を重複して指定しているのか.site-header h1 { font-size: 24px; font-size: 1.714285714rem; }

というと・・・

　　ie8以前は 　　　rem に対応していない 　　　　　　　　　のでした・・・

みんな、さっさと バージョンアップ してほしいのだ！

31

タイトルに勝手にサイト名が付いて、 　　SEO対策のプラグインを入れると 　　　　　　変なタイトルになってしまう！

All in One SEO Pack、Headspace2 などのSEO対策用プラグインで、タイトルに自動でキーワードやサイト名を挿入する対策を行うとき

TwentyTwelve で、これらのプラグインを推奨設定にすると、 投稿のタイトルにサイト名がダブってしまう

・All in One SEOの設定 %post_title% | %blog_title%

・出力されたTitleタグ <title>投稿Cherry Pie Wordpress | Cherry Pie Wordpress</title>

　　　　　　　　↑　投稿名になぜかサイト名が付いてしまう

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 );

33

add_filter されている処理は、 　　　　remove_filter で削除できる

でも・・・ 　　functions.php は、 　　　子テーマ　→　親テーマ　の順で読み込まれるので、

子テーマの functions.php で単に remove_filter( 'wp_title', 'twentytwelve_wp_title');

と書いても、そのあとで親テーマで add_filterされてしまう・・・

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 内の処理を変えたり 　　キャンセルするときには、上記の関数の中に追加していけばよい

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 );

36

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

37