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

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

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

IE対策のie.cssのこと

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

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

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

IE8対策の方法

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

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

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

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

１．では新しくファイルを作成せずに既存のstyle.cssで対策をします。
２．３では、子テーマ/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' 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' );
}

コード作成にあたり、以下のサイトを参考にしました。
参考サイト１：WordPressの子テーマで、親テーマのfunctions.phpを上書きする方法
参考サイト２：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へのパスを通すためのコードを追加したものです。

• WordPressでjQueryを使うとき$を使う方法
• Goolgeブックマークボタンのコードと設置方法
• （新）FacebookボタンをWordPressで記事ごとに表示するコード
• 共有ボタン等のコードを別ファイルで管理してfunctions.phpを利用して記事毎に表示する方法
• 共有ボタンなどのコードをfunctions.phpで設定して記事毎に表示する方法
• Twitter、Google+1、はてなブックマークボタンのカウント数をボタン上にする方法
• Twitter、はてブ、Google+1ボタンの横幅を調整して横一列に並べる方法（CSS3）
• Twitter、はてなブックマークの横幅を設定する方法（CSS）