[WordPress] wp_enqueue_script で出力している script タグを自由に加工する

[WordPress] wp_enqueue_script で出力している script タグを自由に加工する

WordPress で Javascript ファイルを読み込む際に function.php などで wp_enqueue_script() を使用し、JSファイルを読み込んでいる場合が多いと思います。プラグイン側で wp_enqueue_script() にてJSファイルを自動的に読み込んでいる場合もあります。

wp_enqueue_script() で script タグを出力している場合、デフォルトでは以下のようなコードがフッター又はヘッダーへ出力されます。

<script type="text/javascript" src="https://memocarilog.info/wp-content/memocarilog/js/scripts.js?ver=5.0.3"></script>

この script タグへ defer 属性や async 属性を付与したい、idを追加したいなど script タグの内容を変更したい時には、script_loader_tag フォルターフックで自由に内容を加工することが可能です。

script_loader_tag フォルターフックの使い方

以下のように add_filter() を使ってフィルターフックと加工処理をする関数を登録します。

add_filter( 'script_loader_tag', '処理を行う関数名', 10, 3 );
function 処理を行う関数名( $tag, $handle, $src ){
	加工する処理;
	return 加工された script タグ;
}

script_loader_tag フィルターを使用すると、 wp_enqueue_script で呼び出されてる script タグに対して個々に $tag, $handle, $src の3つの値が渡されてきます。その渡される値を使って実際に出力される script タグを加工します。

関数内で var_dump( $tag, $handle, $src ); してみると以下のように値がとれるのが分かります。

第1引数でデフォルトで表示される script タグ、第2引数で wp_enqueue_script で設定したハンドル名、第3引数で挿入される src 属性値(JSファイルまでのパス)が取得できます。

script_loader_tag フォルターフックの使用例

例)テーマの JS ファイルを読み込んでいる script タグへ async 属性を付与する

属性を script タグへ追加したい場合は、function.php へ以下のように記述します。
3行目の ‘memocarilog’ === $handle の部分で変更を加えたい script のハンドル名を指定し、処理するスクリプトタグを選択します。

add_filter( 'script_loader_tag', 'add_async_to_script', 10, 3 );
function add_async_to_script( $tag, $handle, $src ) {
  if ( 'memocarilog' === $handle ) {
    $tag = '<script async type="text/javascript" src="' . esc_url( $src ) . '"></script>';
  }
  return $tag;
}

これで以下のように script タグへ async 属性が追加されました。

プラグイン側で自動的に読み込まれていて諦めていた、script タグへの adefer / async 属性の付与や、type属性の削除など、このフィルターフックを使うことで自由に簡単に加工できるようになります。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ seo Photoshop レスポンシブ Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能