最近では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