Twenty TwelveのIE8対策(子テーマCSSでie.css継承)

ブラウザによって表示が違うことや、レスポンシブがどうのこうのとデバイスのことを考えるとCSSの処理が増えて面倒だなと思うこの頃です。

これからCSS3が主流になってくるんでしょうけどIE8は、windowsのサポートが切れる来年以降、利用者は減ると思いますけれど暫く対策が必要だと思います。

IE対策のie.cssのこと

Twenty Twelveでは、style.cssとは別にIE9以前のブラウザ対策用のcssファイルが、Twenty Twelve下のcssフォルダの中にie.cssファイルとして配置されています。

Twenty Twelveの子テーマを作成して、その下にCSSフォルダを作成し、IE対策のために親テーマと同じようにie.cssファイルを作成してスタイルを設定しても適用されません。

そこで、子テーマを利用している場合、IE対策のスタイルをどのようにして利用したら良いのかについて考えてみました。

IE8対策の方法

子テーマで作成することを前提に、親テーマの内容を変更しないで子テーマだけでIE対策する方法を書きます。

どの方法を使うと良いのかは、テーマの管理、カスタマイズのしやすさ、表示スピード、テーマのバージョンアップのこと等を考慮すると考えによって違うと思います。

Twenty Twelveにあまり触れていなかったので理解不足も多々ありますが、自分自身で試して結果、以下の方法が考えられます。

1.style.cssにIE対策用のスタイルを追加する方法
2.header.phpファイルにlinkタグを追加する方法
3.functions.phpを変更してie.css利用する方法

1.では新しくファイルを作成せずに既存のstyle.cssで対策をします。
2.3では、子テーマ/css/ie.cssファイル作成して利用します。

style.cssにIE対策用のスタイルを追加する方法

子テーマのsytle.cssにIE8対策のコードを追加することで、新たにファイルを作成せずにIE用の表示ができます。

下のコードは、上下の余白を無くす例ですが、「.ie8」を前に追加してスタイルを指定します。ただ「@media screen and (…..) {}」にある場合、その外側に追加(上書き)します。

.ie8 body .site {
  margin-top: 0px;
  margin-bottom: 0px;
}

この方法の場合、親テーマのcssフォルダのie.cssに同じスタイルの「.ie8 body .site{}」が設定されている場合、ブラウザにはstyle.cssで設定された内容ではなく、ie.cssに書かれた内容で表示されます。

ie.cssに「.ie8 body .site」ではなく「body .site」と設定がある場合は、style.cssに設定した「.ie8 body .site」スタイルでブラウザ表示されます。

現状、ie.cssファイルに「.ie8」の設定が無いので、sytly.cssに「.ie8」を先頭につけた設定でとりあえず対応できます。

header.phpファイルにlinkタグを追加する方法

親テーマと同じように、子テーマにcssフォルダとie.cssを作成しても適用されませんので、header.phpにlinkタグを追加してie.cssへのパスを通す方法でIE対策をします。

親テーマのheader.phpを子テーマにコピーして作成します。
header.phpファイルのwp_head()下に以下のコードを挿入します。
※ドメインと子テーマ名はそれぞれ自分の設定に合わせます。

<link rel='stylesheet' id='twentytwelve-child-ie-css'  href='自分のドメイン/wp-content/themes/子テーマフォルダ/css/ie.css?ver=20121010' type='text/css' media='all' />

ポイントは、wp_head()の下にlinkタグを挿入することです。
これで、親テーマのie.cssが実行されたあとに子テーマのie.cssが実行されて上書きできます。

次に(順番は最初でもいいのですが)子テーマにcssフォルダを作成して、そこにie.cssファイルを配置します。

これで、子テーマのie.cssファイルにIE用のコードを追加した場合、それが適用されます。

functions.phpを変更してie.cssを利用する方法

Twenty Twelveテーマでは、ie対策用のie.cssファイルへのパスにfunctions.phpが利用されています。

親テーマのfunctions.phpを変更する場合、Twenty Twelveのバージョンアップによりファイルが上書きされるので、バックアップまたはfunctions.phpファイル編集が必要になります。

その親functions.phpでは、/親テーマ/css/ie.cssファイルに対してlinkタグが設定されるコードが書かれていますが、/子テーマ/css/ie.cssファイルを作成しても子テーマのie.cssへパスが通らないので子ie.cssでの設定が反映されません。

子テーマのie.cssを反映させるためにすること

子テーマにcssフォルダを作成してie.cssファイルを配置します。
このie.cssでIE対策用のコードを入力していきます。

次に(順番は先でもいいですが)子テーマにfunctions.phpファイルを作成して、そこに以下のコードをコピー&ペーストで挿入して配置すると、子テーマie.cssへのパスが通るので、子テーマ/css/ie.cssのコードがブラウザに反映されるようになります。

add_action( 'after_setup_theme', 'child_theme_setup' );

if ( ! function_exists( 'child_theme_setup' ) ):
  function child_theme_setup() {
    remove_filter( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );
    add_filter( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles_child' );
}
endif;

function twentytwelve_scripts_styles_child() { 

  global $wp_styles;

  if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
    wp_enqueue_script( 'comment-reply' );

  wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );

  if ( 'off' !== _x( 'on', 'Open Sans font: on or off', 'twentytwelve' ) ) {
    $subsets = 'latin,latin-ext';

  $subset = _x( 'no-subset', 'Open Sans font: add new subset (greek, cyrillic, vietnamese)', 'twentytwelve' );

  if ( 'cyrillic' == $subset )
    $subsets .= ',cyrillic,cyrillic-ext';
  elseif ( 'greek' == $subset )
    $subsets .= ',greek,greek-ext';
  elseif ( 'vietnamese' == $subset )
    $subsets .= ',vietnamese';

  $protocol = is_ssl() ? 'https' : 'http';
  $query_args = array(
    'family' => 'Open+Sans:400italic,700italic,400,700',
    'subset' => $subsets,
  );
  wp_enqueue_style( 'twentytwelve-fonts', add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" ), array(), null );
  }

  wp_enqueue_style( 
    'twentytwelve-style', 
    get_stylesheet_uri() );
  wp_enqueue_style( 
    'twentytwelve-ie', 
    get_template_directory_uri() . '/css/ie.css', 
    array( 'twentytwelve-style' ), '20121010' );
  //追加した子テーマie.cssへのパス
  wp_enqueue_style( 
    'twentytwelve-ie-child', 
    get_stylesheet_directory_uri() . '/css/ie.css', 
    array( 'twentytwelve-ie' ), '20121010' );

  $wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
  $wp_styles->add_data( 'twentytwelve-ie-child', 'conditional', 'lt IE 9' );
}

コード作成にあたり、以下のサイトを参考にしました。
参考サイト1:WordPressの子テーマで、親テーマのfunctions.phpを上書きする方法
参考サイト2:Twenty Twelveの子テーマをつくるときに wp_enqueue_style を使ったほうが幸せになれるかもしれないという話

コードについてザックリ説明
add_action(‘after_setup_theme’,’関数1′)で関数1を親テーマの後に関数1を読み込みます。
function 関数1 {}

remove_filter()で親functions.phpのwp_enqueue_scriptsタグに追加されたtwentytwelve_scripts_stylesフィルターを削除して、add_filter()で再度wp_enqueue_scriptsタグにtwentytwelve_scripts_styles_childフィルターを追加しています。

function twentytwelve_scripts_styles_child()関数の中身は、親functions.phpのコードそのもので、最後に方に子テーマieへのパスを通すためのコードを追加したものです。

Twenty TwelveのIE8対策(子テーマCSSでie.css継承)」への3件のフィードバック

  1. noi

    はじめまして。noiと申します。

    まさにIE8の設定を子テーマのie.cssで行いたいと思いこのページにたどり着きました。
    大変参考になる記事で、早速設定を行ってみました。

    子テーマフォルダにcssフォルダを作成 → ie.css(仮)を配置。
    functions.phpに上記に公開頂いているコードをそのまま貼り付け、子テーマフォルダにアップロード。

    しかしこの段階でWPのダッシュボード上部にはfunctions.phpのコードらしきものがズラーっと表示されてしまい正しく動作しないようです。よく見たらWEBサイトの上部にもこのコードがズラーっと表示されておりました。
    今は一旦、子テーマフォルダにアップロードしたfunctions.phpを削除して事無きを得ています。

    そこで質問なのですが、functions.phpには上記公開頂いているコード以外に記載しないといけない内容があるのでしょうか?

    WP初心者で何も分からないため、このような記事が唯一の手がかりにさせて頂いております。
    お手数おかけいたしますが、ご教授の程よろしくお願いいたします。

    返信
    1. tama 投稿作成者

      エラーの内容がわからないので想像ですが、エラー表示が出る原因は、コードをコピーしてペーストするときに余計なスペースや改行なども一緒にコピーされてしまったことが原因かもしれません。

      左サイドバー表示にする子テーマが下のリンク先のページにあります。
      Child1r-T-Twelve
      functions.phpファイルにあるコメント「//子テーマcss/ie.cssファイルパス」以下にあるコードを利用して試してみてください。

      返信
  2. noi

    tama 様

    早速のご返答ありがとうございます。

    ご紹介頂いたChild1r-T-Twelveのfunctions.phpをそのまま使用させて頂いたところ、何事もなかったかのように問題なく動作しました。

    大変助かりました。ありがとうございました。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です