WordPressのstyle_loader_tagフィルターを使ってlinkタグを綺麗にする

公開日 :

最終更新日 :

カテゴリー :

WordPressのscript_loader_tagを使ってscriptタグをすっきりするにてWordPressが出力する<script>タグを変更できるフィルターフックについて書きました。<script>タグが変更できるなら<link>タグも変更できるのではと思い調べてみたら、似たようなフィルターフックがあったので紹介します。

WordPressが<link>タグを出力する関数は、wp_enqueue_style()です。wp_enqueue_style()についてはwp_register_styleとwp_enqueue_styleの使い方とその違いとはを見てください。

wp_enqueue_style()が出力する<slink>タグは以下のような形です。

<link rel="stylesheet" id="twentyfifteen-style-css" href="http://example.com/wp-content/themes/twentyfifteen/style.css?ver=4.1" type="text/css" media="all" />

出力された<link>タグをみるとだけでもid・typeはいらないかなと思います。あとHTML5だと<link>タグは終了タグがないので必要ないので消したいですね。

style_loader_tagについて

消したり変更したりしたいのでそこで活用するのが、style_loader_tagというフィルターフックです。前回紹介したscript_loader_tagはWordPress 4.1から追加されたフィルターフックですが、style_loader_tagはWordPress 2.6からあるフィルターフックです。style_loader_tagの仕様は以下のような感じです。

/* 通常の場合 */
$tag = apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n", $handle );
/* RTLを指定している場合 */
$rtl_tag = apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-rtl-css' $title href='$rtl_href' type='text/css' media='$media' />\n", $handle );

script_loader_tagのときと違って引数に<link>タグがベタに書いてあるのでそのまま貼っつけてみました。引数の2つめの$handleは、wp_enqueue_style()で指定した$handleが入ってきます。WordPressのテーマなりを開発している場合は、RTLのことを考えず通常の場合だけ考えればいいと思います。

style_loader_tagの使用例

style_loader_tagを使っていらない部分を消すサンプルを作ってみました。preg_replaceでtype・id・終了タグを消したり変えたりしているだけです。

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

まとめ

前回、不満点だといっていた<script>タグと同じくらい不満点だった<link>タグもstyle_loader_tagを使えばすっきりさせることが出来ました。script_loader_tagと合わせてWordPressが吐き出す<link>タグ、<script>タグをすっきりすることが出来るようになったので、<link>タグや<script>タグの形が気に入らないかたはぜひとも使ってすっきりさせてみてください。

+1 Pocket はてブ!
© 2012 - 2018 SAMURAI PROJECT Proudly powered by WordPress