Tweet

Pocket

Bootstrap v3.2.0を使いWordPressのテーマを作成するときにIE8に対応させるメモ。

Bootstrap v3.2.0をIE8に対応させる

• html5shiv
  HTML5の要素をIE8で認識させる。
• Respond
  IE6-8をMedia Queriyに対応させる。
• jQuery 1.xの利用
  2.x系はIE6, 7, 8をサポートしていない。http://jquery.com/download/

WordPressのスクリプトの読込み例

function example_load_scripts()
{
    wp_enqueue_script( ‘jquery’, 'jquery-1.11.1.min.jsへのパス', array(), '1.11.1', false );
    if ( preg_match( ‘/MSIE 8/‘, getenv( 'HTTP_USER_AGENT' ) ) ) {
        wp_enqueue_script( 'html5', 'html5shiv.min.jsへのパス', array(), '3.7.2', false );
        wp_enqueue_script( ‘respond’, 'respond.min.jsへのパス', array(), '1.4.2', false );
    }
}


add_action( ‘wp_enqueue_scripts', 'example_load_scripts' );

参考サイト

» Bootstrap3をIE8で使う時に注意すること – Blog.おにぎりたまごうぃんなー

IE8向けのCSSハック

IE8だけのハックはないようなので条件付きコメントで対応する。

WordPressでスタイルの読込み例

function example_load_stylesheets()
{
    if ( preg_match( '/MSIE 8/', getenv( 'HTTP_USER_AGENT' ) ) ) {
        // IEのみ適用するスタイル
    }
    wp_enqueue_style( ‘style', get_stylesheet_uri(), false, '1.0', 'screen' );
}

add_action( ‘wp_enqueue_scripts’, ‘example_load_stylesheets' );

参考リンク

» これで完結！IEハック – /dev/null – タバヤシデザイン
» コーディングを楽にするためのPHP関数と、Macか判別する関数 | Stocker.jp / diary