WordPress:wp_enqueue_style()で出力されたlinkタグを自分好みに変更する方法

  • Posted on
  • Category : WordPress
WordPress:wp_enqueue_style()で出力されたlinkタグを自分好みに変更する方法

備忘録。WordPressでCSSを読み込む際に使用される`wp_enqueue_style()`ですが、そのまま使用した場合は`id`や`type`といった属性が記述されていたり、末尾には閉じスラッシュがある状態で出力されます。またクォーテーションについてもシングルが使用されています。これらが原因で表示上で大きな問題が起きるということでもないですし、気にならない人も多いとは思いますが、レギュレーションなどでこれらの記述が禁止(ない方が好ましい)とか個人的にも削除して出力させたいということがたまにあるので。

デフォルトで出力されるタグ

デフォルトでどのようなタグで出力されるのかを確認するために、とりあえずテーマ内のfunctions.phpwp_enqueue_style()を使ってCSSを読み込んでみると下記のような形で出力されると思います。

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' />

※CSSまでのパスやid、バージョン表記の有無などは環境によって異なります。

今回はこのlinkの中で記述されているid, type, mediaの3つの属性と末尾にあるスラッシュを削除し、さらにシングルクォーテーションをダブルクォーテーションに変更した状態で出力されるようにしていきます。

style_loader_tagを使う

wp_enqueue_style()を使って出力されたlinkの記述を変更したいというときは、style_loader_tagというフィルターフックを使用します。
先述したように今回はlinkの中で記述されているid, type, mediaの3つの属性と末尾にあるスラッシュを削除し、さらにシングルクォーテーションをダブルクォーテーションに変更していきます。
その場合はfunctions.phpへ下記のように記述します。

functions.php

add_filter( 'style_loader_tag', 'replace_link_stylesheet_tag' );
function replace_link_stylesheet_tag($tag) {
	return preg_replace( array( "/'/", '/(id|type|media)=".+?" */', '/ \/>/' ), array( '"', '', '>' ), $tag );
}

上記を記述後にテーマのhead内を確認すると、先ほど出力されていたものとは少し異なり、下記のようなタグで出力されているのを確認できます。

<link rel="stylesheet" href="http://example.com/wp/wp-content/themes/theme-name/style.css">

※CSSまでのパスやバージョン表記の有無などは環境によって異なります。

media属性はそのままでいいとか、すべてを削除する必要がない場合は任意で先ほどの内容を変更してください。
デフォルトで表示されるものが明らかにダメということでもないですが、冒頭でもあげたようにレギュレーションの問題だとか個人的に直したいというときなどはこの方法で出力された記述を変更することができます。

ちなみにscriptも変更したい場合は…

scriptwp_enqueue_script()使用時)の場合も記述を変えたいというときは、script_loader_tagというフィルターフックを使用します。
同じくfunctions.phpに記述し、例えばtype属性(type='text/javascript')を消して、シングルクォーテーションをダブルクォーテーションに変更したいのであれば下記のように記述します。

functions.php

add_filter( 'script_loader_tag', 'replace_script_tag' );
function replace_script_tag($tag) {
	return preg_replace( array( "/'/", '/ type=\"text\/javascript\"/' ), array( '"', '' ), $tag );
}

また、type属性を消すだけでなく、ついでにasyncdeferといった属性を新たに付けるということも可能で、例えば下記はtype属性を消す代わりにasync属性を追加するというものになります。

functions.php

add_filter( 'script_loader_tag', 'replace_script_tag' );
function replace_script_tag($tag) {
	return preg_replace( array( "/'/", '/ type=\"text\/javascript\"/' ), array( '"', ' async' ), $tag );
}

Back to Top

WordPress:wp_enqueue_style()で出力されたlinkタグを自分好みに変更する方法

WordPress:wp_enqueue_style()で出力されたlinkタグを自分好みに変更する方法

/ WordPress

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。