WordPressでjQuery2.x系を使う方法とその場合のIE8対応

  • 投稿 : 2016-03-21
<!--[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<!--<![endif]-->
HTMLソース表示で上記のような感じになっていればOKです。
テンプレートに直接書く場合はそのままでOKでしょう。

IE以外のブラウザでは、jQuery1.x系の部分はコメント行として解釈されるので問題ありません。

情報源:jQuery 2.0 Beta 2 Released | Official jQuery Blog

functions.phpでの記述例

既存のテーマを書き直すときは、テーマにもよりますがfunctions.phpの記述で対応できる場合があります。

jQuery2.x系に変更するだけ

function my_fnc_scripts() {
    global $wp_styles;

    // jQuery
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js', array(), null);

    //jquery-migrate
    wp_deregister_script('jquery-migrate');
}
add_action( 'wp_enqueue_scripts', 'my_fnc_scripts' );
wp_enqueue_scriptsをフックして、上記のようにします。

wp_deregister_script('jquery');の部分が、すでにjqueryを組み込むロジックが書かれていたらそれを解除します。wp_enqueue_scriptで新たにjQuery2.x系を追加します。

IE8以前を意識しなければこれでOKです。

IE8対応

function my_fnc_script_loader_tag( $tag, $handle, $src ) {
    if ( $handle== 'jquery' ) {
        return "\n<!--[if lt IE 9]>\n".'<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>' . "\n<![endif]-->\n"."<!--[if gte IE 9]><!-->\n".$tag ."<!--<![endif]-->\n";
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'my_fnc_script_loader_tag', 10, 3 );

参考:php - WordPress - Enqueue scripts for only if LT IE 9 - Stack Overflow

IE8に対応するには、この記述を追加します。
script_loader_tagを使用して、jQueryの読み込みの前後にいろいろ記述を追加することができます。
上記のように書くと、前後にいろいろ追記されて冒頭のようなHTMLソースが出力されます。

スポンサーリンク