WordPressでヘッダーに自動的にhtml5shiv.jsを挿入する方法

WordPress

html5shiv

html5shiv.jsとは?

IE6~8においてHTML5のheaderやfooterタグは通常タグとして認識しないのですが、これを「headerやfooterはタグですよ?」と認識させるのがhtml5shiv.jsというスクリプトなんです。

またIE9でもベースのスタイルを当ててくれるという素晴らしいスクリプトです。

また以前はhtml5.js というのが公開されていたのですが今はhtml5shiv.jsのほうが新しいのでhtml5shiv.jsを使ったほうが平穏な日々が続くと思います。

そんな便利なスクリプトですがGoogleさんでもソースを公開しています。

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

html5shiv.jsをWordPressのヘッダーに挿入する

そこで本題なのがhtml5shiv.jsを使うためにWordPressでヘッダーに自動的に挿入する必要があります。

function.phpに下記のソースを挿入

// ヘッダーにhtml5.jsを挿入
function add_ie_html5_shim () {
    echo '<!--[if lt IE 9]>';
    echo '<script src="dist/html5shiv.js"></script>';
    echo '<![endif]-->';
}
add_action('wp_head', 'add_ie_html5_shim');

そうすると自動的にヘッダー内にhtml5shiv.jsが挿入され適用されます。

IE対応で困っている方の参考になればと思います。
もっとこうしたほうがいいよ?みたいなのがあれば気軽にコメント頂ければと思います。

コメント

タイトルとURLをコピーしました