HTML5では外部CSSやjsの読み込みにtype=”text/javascript”や、type=”text/css”などのtype属性が不要になりました。
type属性を出力しているとW3Cのバリデーターなどでエラーが出ます。
テーマやHTML構築時には基本的にW3Cのチェックに通るように開発するのが基本ですので、このエラーを消したいところです。
通常のHTML開発であれば書かなければいいだけですが、WordPressのテーマですとwp_enqueue_style()やwp_enqueue_script()の関数が勝手にtype属性を付与します。
だからと言って<head>~</head>内に<style>や<script>を直接書くのもWordPressテーマの開発趣旨から外れます。
そこで、今回はWordPressのwp_enqueue系関数を使いつつもtype属性を削除する方法をご紹介します。
functions.php追記用スクリプト
解説が必要ない方向けに、まずはfunctions.phpに追記するだけのスクリプトです。スクリプトの設置は自己責任でお願いします。
WPバージョン5.3~
最新のWordPressを使っている場合は以下のようにadd_theme_support()を使用します。
function custom_theme_setup() {
add_theme_support( 'html5', array( 'style', 'script') );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );
5.3以降add_theme_support()にstyleとscriptが追加されました。上記のように記載することでHTML5では不要なtype属性を出力しなくなります。
WPバージョン4.1~
5.3以前の方やtype属性以外の部分も変更したい場合は、フィルタフックの「syle_loader_tag」や「script_loader_tag」を使用して下さい。
function remove_type_attr( $tag ) {
return preg_replace( "| type='.+?'s*|", "", $tag );
}
add_filter( 'style_loader_tag', 'remove_type_attr' ); // <link>からtype属性を削除
add_filter( 'script_loader_tag', 'remove_type_attr' ); // <script>からtype属性
add_theme_supportを使用してHTML5に対応する
ここからは上記スクリプトの解説です。
add_theme_suppoort()は特定の機能をテーマ(やプラグイン)で使用可能にする関数です。使用方法として、アクションフック「after_setup_theme」に使います。
「syle_loader_tag」「script_loader_tag」でtype属性削除フィルタを作る
「style_loader_tag」「script_loader_tag」というフィルタを使うと、wp_enqueue_style()やwp_enqueue_script()のタグを書き変えることができます。
これを利用して、type属性を削除したのが上記のadd_filterを使ったサンプルです。
preg_replaceの部分を工夫することによってasync属性を付与したり末尾の閉じタグを / >
から >
に書き変えたりと様々なことが可能です。
コメント