[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に記述してください。

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

 

CSSの例

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

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

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

 

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

最終更新日:2017年3月23日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/ie-conditional-wp-enqueue-css-js/trackback/