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の読み込み順をバッチリ制御して、楽しいカスタマイズライフを!

Twenty Twelveの子テーマをつくるときに wp_enqueue_style を使ったほうが幸せになれるかもしれないという話」への8件のフィードバック

  1. nakachon

    おつかれさまです。functionsにwp_enqueue_styleの記述をすると、Noticeがでました。これって、アクションフックかけて、記述したほうがいいのかなぁ?
    ↓エラー
    Notice: wp_enqueue_style が誤って呼び出されました。スクリプトおよびスタイルは wp_enqueue_scripts、admin_enqueue_scripts、init フック以降のみに登録・キュー追加できます。

    返信
  2. ピンバック: ブログのフォントにこだわってみるあかはば日記 | あかはば日記

  3. ピンバック: wp_enqueue_styleをfunctions.phpに素で書くとエラーが出るのを回避 | Shinichi Nishikawa's blog

  4. ピンバック: WordPressカスタマイズ 〜子テーマを作る(CSS編)〜 | Soraのメモ的ブログ

  5. ピンバック: mypace custom Ver1.7(WordPress3.4~3.5.1対応版)を配布|mypace custom theme project

  6. yuhico25

    いつもワードプレスのカスタマイズを参考にさせて頂いております。
    初心者ながらTwenty Twelveを使用をしてサイトを作成したいと考えておりますが、中々上手く当記事の内容をテーマに反映がうまく出来ない状態です。

    お時間が有ります時で構いませんので、もし宜しければ下記質問につきましてご回答を頂けますと幸いです。

    1. 子テーマ内にstyle.css、functions.phpを置いており、style.cssには子テーマ情報のみ(インポートは記載しておりません)を記載し、親テーマにあるfunctions.phpをそのままコピーをして記事の内容を追記したのですが、やり方・ファイル内容としましてはこれで合っておりますでしょうか。

    2. functions.phpの記載場所についてお教え頂けませんでしょうか。

    3. 子テーマ設定後に細かな箇所(ヘッダー部分のサイズ変更など)を行う場合は、style.cssに追記する形で宜しいのでしょうか。

    大変お手数では御座いますが、何卒宜しくお願いを致します。

    返信

コメントをどうぞ♪