Twenty Twelveの子テーマをつくるときに wp_enqueue_style を使ったほうが幸せになれるかもしれないという話

今回 Twenty Twelve の勉強がてらブログをリニューアルして、ちょこちょこいじってみているわけですが、スタイルシートの読み込みに関してちょっとハマりそうだな、と思ったことがあるので今日はそれについて書いてみようと思います。

子テーマをつくるときは、まずは子テーマをつくる準備からで書いたように、子テーマをつくるときには、style.css にお決まりのコメントを書いて、 @import で親テーマのCSSを読み込んでから上書きしていく、というパターンが多かったと思います。

もちろん Twenty Twelve の子テーマをつくるときにもそれでも大丈夫といえば大丈夫なのですが。。

Twenty Twelve の header.php を見てみよう

Twenty Twelve の header.php の head 部分までの抜粋です。

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

いやにすっきりしてませんか？そして、スタイルシートへのリンクがないことに気づかれるんじゃないかと思います。

ところが実際に html を見ると

<link rel='stylesheet' id='twentytwelve-style-css'  href='http://webourgeon.net/wp-content/themes/twentytwelve/style.css?ver=3.5' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentytwelve-ie-css'  href='http://webourgeon.net/wp-content/themes/twentytwelve/css/ie.css?ver=20121010' type='text/css' media='all' />
<![endif]-->

このようなcssへのリンクがきちんと書きだされています。

Twenty Twelve での CSS へのリンクは functions.php に書かれている

なぜ、このようなことになるのかというと、「Twenty Twelve での CSS へのリンクは functions.php に書かれている」からなんです。

Twenty Twelve の functions.php 、90行目から153行目の twentytwelve_scripts_styles というのを定義しているところ

  */
function twentytwelve_scripts_styles() {
	global $wp_styles;

・
・
・
・
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );

この中の一番最後に

	/*
	 * Loads our main stylesheet.（メインのスタイルシートを読み込む）
	 */
	wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

	/*
	 * Loads the Internet Explorer specific stylesheet.（IE用のスタイルシートを読み込む）
	 */
	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 (→ codex 英語版　wp_enqueue_style）でスタイルシートの読み込みをしているわけです。

ちょっと複雑なIE用の方を例に説明すると

 wp_enqueue_style( 'id', スタイルシートへのパス, array( 'このスタイルシートを読む前に読みこまなければいけないスタイルシートの id ' ), 'バージョン' );
  $wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' ); // id twentytwelve-ie のCSS　を lt IE 9 の条件付コメント(Conditional Comments) で書き出す

こんな感じですね。

なんでこんな面倒なことを？？

これはちょっと面倒な感じがしますね。今までのテーマのように

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

じゃダメなんでしょうか？

結論からいうと OK だけど、こっちのほうが便利だよ。という感じかな、と思います。

何がいいかというと、すぐに思いつく理由は

読み込みの順番がきちんと制御できる
バージョンを出すことができるので、 CSS のキャッシュをコントロールしやすい

ですね。他にもあったら教えて下さい。

この読み込みの順番がきちんと制御できる、というのがけっこう重要で、またハマる原因になるかな、と思うので次に詳しく書きます。

バージョンを出せる、と言うことは、CSSを変更した時に、バージョンが変わったことを知らせられるので、「あれ？変更したのに変わらないよ？おかしいな（ブラウザのキャッシュ）」というようなことを防ぎやすくなります。

CSSの読み込みが functions.php で wp_enqueue_style されてるのに気づかないとハマることがある

CSS の読み込みが functions.php で制御されていると、先に読み込むものをきちんと指定できるので、読み込みの順番が予期しないものになってしまって、CSSが思わぬ上書きをされるとか、その逆で上書きできない、などということが起きにくくなります。

もちろん、これが親子関係のないオリジナルのテーマだったら、直に順番にCSSを読みこませていけばいいわけで、どちらでもそれほど変わりはないと思います。

でも、これが、子テーマだったらどうでしょう？？

ちょっと見て下さい。これはテスト用にただスタイルシートだけをおいた Twenty Twelve の子テーマが出した CSSの読み込みの部分です。

<link rel='stylesheet' id='twentytwelve-style-css'  href='http://webourgeon.net/wp-content/themes/test/style.css?ver=3.5' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentytwelve-ie-css'  href='http://webourgeon.net/wp-content/themes/twentytwelve/css/ie.css?ver=20121010' type='text/css' media='all' />
<![endif]-->

まず、子テーマの CSS が読みこまれ、その後に IE 用の CSS　が読みこまれています。

実際に私がやってしまった失敗なんですけど、 functions.php をしっかり読んでいなかったときに、今まで通り親テーマの CSS を @import した子テーマの CSS の下の方に、 IE用の CSS を付け足しちゃったのです。

どんな事になったかというと、親テーマの CSS →→→ 子テーマのCSS →→ 子テーマの中の IE 用 CSS →→ functions.php で定義された IE用CSS という順番で読みこまれてしまったわけで、いくら子テーマの中の IE 用 CSS を書いても反映されないわけです。

「えー？なんでなんで？？」

と強引にidやclassの指定の仕方とか変えて見たりして、ほんとに馬鹿だったなぁ、と思うのですが、落ち着いてよく見てみたら、そんなことになっていた、というわけです。

制御できて便利な分、気が付かないとハマることになるよ、ということで、

結論　Twenty Twelveの子テーマをつくるときに wp_enqueue_style を使ったほうが幸せになれるかもしれない

「結論」慣れるまでちょっとめんどくさいですが、Twenty Twelveの子テーマをつくるときには　functions.php で wp_enqueue_style を使いましょう。

if ( !is_admin() ) {
    wp_enqueue_style( //親テーマのCSS
        'twentytwelve-style',　//親テーマの CSS の　id
        get_template_directory_uri() . '/style.css',　//親テーマの CSS へのパス
        array(),
        date('YmdHis', filemtime(get_template_directory() . '/style.css'))　//filetimeで更新した日付を取得してバージョンに入れる
        );
    wp_enqueue_style( //子テーマのCSS
        'twentytwelve-child-style',　//子テーマの CSS の　id
        get_stylesheet_uri(),　//子テーマの CSS へのパス
        array('twentytwelve-style'),　//先に読み込むCSSを指定
        date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css'))
        );
     wp_enqueue_style(　//親テーマの IE CSS
        'twentytwelve-ie',
        get_template_directory_uri() . '/css/ie.css',
        array(),
        date('YmdHis', filemtime(get_template_directory() . '/css/ie.css'))
        );
        $wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
    wp_enqueue_style( //子テーマの IE CSS
        'twentytwelve-child-ie',
       get_stylesheet_directory_uri() . '/css/ie.css',
        array('twentytwelve-ie'),
        date('YmdHis', filemtime(get_stylesheet_directory() . '/css/ie.css'))
        );
        $wp_styles->add_data( 'twentytwelve-child-ie', 'conditional', 'lt IE 9' );
     wp_enqueue_style( //なんか他にも読ませたいとき。もちろんこれにも優先順位とか付けられる
       	'font-style',
        get_stylesheet_directory_uri() . '/css/font.css',
        array(),
        date('YmdHis', filemtime(get_stylesheet_directory() . '/css/font.css'))
        );
          
}

このコードは　岡本さんが　githubに公開してくださっているコードを参考にさせていただきました。日付でバージョンもつけてくれるのでバッチリですね。ありがとうございます。

ではでは。CSSの読み込み順をバッチリ制御して、楽しいカスタマイズライフを！