[WordPress]CSSやJavaScriptをIEの条件付きコメントに対応させて読み込む

  • 更新日:
  • 公開日:

最近ではIE8、IE9以下に対応必須の案件は少なくなってきているかと思いますが、それでも必要なときがあったりするのではないでしょうか。(IE8、IE9だと情報を見ることができないレイアウト崩れが発生してしまっているなど)

そんなときにInternet Explorer専用の「ie.css」といったCSSを用意したり、「html5shiv.js」のようなIE8以下でHTML5のタグを認識させるスクリプトを読み込んだりするでしょう。これには「<!–[if lt IE 9]> ~ <![endif]–>」のような、IE独自に用意している条件付きコメントで読み込ませているハズです。

そしてWordPressでCSSやJavaScriptを読み込む場合、基本functions.phpにwp_enqueue_style()wp_enqueue_script()を記述するかと思いますが、この時に条件付きコメントを追加で出力する方法についてメモします。

条件付きコメントありでCSSやJavaScriptをEnqueueする

JavaScriptの例

JavaScriptにはwp_script_add_data()関数を使います。例としてIE9未満に「html5shiv.js」を読み込むコードです。functions.phpに記述してください。

<?php
/**
 *  IE 9未満(IE8以下)のみでhtml5shiv.jsを読み込ませる
 */
function wp_enqueue_html5shiv_only_ie() {
    if ( ! is_admin() ) {
        wp_enqueue_script(
            'html5shiv-script',
            'https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js',
            array(),
            '3.7.3'
        );

        wp_script_add_data(
            'html5shiv-script',
            'conditional',
            'lt IE 9'
        );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_html5shiv_only_ie' );

wp_script_add_data()の第1引数に条件付きコメントを付与したいスクリプトのハンドル名、第2引数に「conditional」、第3引数に条件付きコメントの条件文を指定します。こうすると以下のように出力されます。

<!--[if lt IE 9]>
<script type='text/javascript' src='https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js?ver=4.7.3'></script>
<![endif]-->

CSSの例

CSSにはwp_style_add_data()関数を使います。例として同様IE9未満に「/css/ie.css」を読み込むコードです。functions.phpに記述してください。

<?php
/**
 *  IE 9未満(IE8以下)のみで「/css/ie.css」を読み込ませる
 */
function wp_enqueue_ie_css() {
    if ( ! is_admin() ) {
        wp_enqueue_style(
            'ie-style',
            get_stylesheet_directory_uri() . '/css/ie.css',
        );

        wp_style_add_data(
            'ie-style',
            'conditional',
            'lt IE 9'
        );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_ie_css' );

JavaScript同様、wp_style_add_data()の第1引数に条件付きコメントを付与したいスタイルのハンドル名、第2引数に「conditional」、第3引数に条件付きコメントの条件文を指定します。

こうすると以下のように出力されます。

<!--[if lt IE 9]>
<link rel='stylesheet' id='ie-style-css'  href='http://ドメイン名/wp-content/themes/theme-name/css/ie.css?ver=4.7.3' type='text/css' media='all' />
<![endif]-->

参考URL:
Enqueueing IE conditional stylesheets in WordPress the right way

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone