Twenty Twelveの子テーマでcss/ie.cssへの変更が反映されないとき

WordPress個別サポート

Twenty Twelveでは、IE7、IE8など古いバージョンのInternet Explorerのスタイルは、cssディレクトリにあるie.cssでコントロールしています。

ブラウザでサイトのソースを表示してみるとIE9未満用に別のスタイルシートが読み込まれているのがわかります。

<link rel='stylesheet' … href='http:// … /style.css?ver=3.5.1' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' … href='http:// … /css/ie.css?ver=20121010' type='text/css' media='all' />
<![endif]-->
[if lt IE 9]とは、「もしもIE9未満（lt：less than）のときは」という意味です。IE8などのときは/css/ie.cssが読み込まれることになります。

ところが、Twenty Twelveの子テーマを作成するときに、子テーマのディレクトリにcssディレクトリを作成してie.cssをコピー（またはcssディレクトリごとコピー）して、ie.cssを変更しても、そのスタイルはInternet Explorerには反映されません。

これは、「/css/ie.cssを読み込む」という指示がfunctions.phpに記述されているからです。

▼ie.cssを読み込む指定（functions.phpの150行目あたり）
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' );

そこで、この2行をコピーして、子テーマの/css/ie.cssも読み込むように変更した設定を追加します。「も」というのは、親テーマを読み込んだ後に子テーマも読み込むということです。つまり、通常のstyle.cssと同じように、子テーマでは変更したいスタイルのみを定義すれば済みます。

▼追加する設定（子テーマのie.cssも読み込む）
wp_enqueue_style( 'twentytwelve-ie2', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentytwelve-ie' ), '20121010' );
$wp_styles->add_data( 'twentytwelve-ie2', 'conditional', 'lt IE 9' );

オリジナルの2行と違う部分は赤で示してあります。

  • twentytwelve-ie2 --- 子テーマのie.cssの識別子です。任意の名前で大丈夫です。
  • get_stylesheet_directory_uri() --- 子テーマのディレクトリからファイルを読み込むための命令です。
  • twentytwelve-ie --- 直前に指定された親テーマのスタイルシート（ie.css）を先に読み込む設定です。これにより、子テーマにie.cssを丸ごとコピーせずに済みます。

うまく親テーマを子テーマに引き継げたかの確認もかねて、子テーマのie.cssに次の3行だけ記述してサイトを更新してみます。

.site-header h1 {
    font-size: 60px;
}
ie.cssへの変更が反映されるか確認
ie.cssへの変更が反映されるか確認

サイトヘッダーが極端に大きくなったので、変更が反映され、子テーマに記述していない部分は親テーマから引き継がれたことが確認できました。

これで、古いIE用のスタイルを変更したい場合は、子テーマのcss/ie.cssに記述すれば済むようになります。

WordPressトラブル