デフォルトで出力されるタグ
デフォルトでどのようなタグで出力されるのかを確認するために、とりあえずテーマ内のfunctions.php
でwp_enqueue_style()
を使ってCSSを読み込んでみると、CSSまでのパスやid、バージョン表記の有無などは環境によって異なるものの下記のような形で出力されると思います。
wp_enqueue_style()
がよくわからないという場合は、Codex(関数リファレンス/wp enqueue style - WordPress Codex 日本語版)で確認してください。
<link rel='stylesheet' id='theme-css' href='http://example.com/wp/wp-content/themes/theme-name/style.css' type='text/css' media='all' />
今回はこのlink
の中で記述されているid,
type
, media
の3つの属性と末尾にあるスラッシュを削除し、さらにシングルクォーテーションをダブルクォーテーションに変更した状態で出力されるようにしていきます。
style_loader_tagを使う
wp_enqueue_style()
を使って出力されたlink
の記述を変更したいというときは、style_loader_tag
というフィルターフックを使用します。
先述したように今回はlink
の中で記述されているid
, type
, media
の3つの属性と末尾にあるスラッシュを削除し、さらにシングルクォーテーションをダブルクォーテーションに変更するので、functions.php
へ下記のように記述します。
function replace_link_stylesheet_tag( $tag ) {
return preg_replace( array( "/'/", '/(id|type|media)=".+?" */', '/ \/>/' ), array( '"', '', '>' ), $tag );
}
add_filter( 'style_loader_tag', 'replace_link_stylesheet_tag' );
上記を記述後にテーマのhead
内を確認すると先ほど出力されていたものとは少し異なり、下記のようなタグで出力されているのを確認できます。
<link rel="stylesheet" href="http://example.com/wp/wp-content/themes/theme-name/style.css">
CSSまでのパスやバージョン表記の有無などは環境によって異なります。
media
属性はそのままでいいとか、すべてを削除する必要がない場合は任意で先ほどの内容を変更してください。
デフォルトで表示されるものが明らかにダメということでもないですが、冒頭でもあげたようにレギュレーションの問題だとか個人的に直したいというときなどはこの方法で出力された記述を変更することができます。
scriptも変更したい場合
script
(wp_enqueue_script()
使用時)の場合も記述を変えたいというときは、script_loader_tag
というフィルターフックを使用します。
同じくfunctions.php
に記述し、例えばtype
属性(type='text/javascript'
)を消して、シングルクォーテーションをダブルクォーテーションに変更したいのであれば下記のように記述します。
function replace_script_tag( $tag ) {
return preg_replace( array( "/'/", '/ type=\"text\/javascript\"/' ), array( '"', '' ), $tag );
}
add_filter( 'script_loader_tag', 'replace_script_tag' );
また、type
属性を消すだけでなく、ついでにasync
やdefer
といった属性を新たに付けるということも可能で、例えば下記はtype
属性を消す代わりにasync
属性を追加するというものになります。
function replace_script_tag( $tag ) {
return preg_replace( array( "/'/", '/ type=\"text\/javascript\"/' ), array( '"', ' async' ), $tag );
}
add_filter( 'script_loader_tag', 'replace_script_tag' );