WordPressが生成するページにスクリプトやスタイルシートのリンクを追加する方法

概要

WordPressが生成するページに、スクリプトやスタイルシートのリンクを追加する方法として、wp_enqueue_scriptsアクションフックで、wp_enqueueu_script関数、および、wp_enqueue_style関数を呼び出す方法が推奨されています。

詳細

wp_enqueue_scriptsアクションフック

このアクションフックは、生成されるページにスクリプトやスタイルシートのリンクを追加する場合に利用します。

コード例：有効化しているテーマのfunctions.phpに追加します

function my_enqueue_scripts() {
  // themeのuriを末尾/無しで取得する
  $theme_uri = get_template_directory_uri();

  // <theme_uri>/js/my-script.jsと、<theme>/css/my-style.cssを追加する
  wp_enqueue_script( 'my-script', $theme_uri . '/js/my-script.js' );
  wp_enqueue_style( 'my-style', $theme_uri . '/css/my-style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

wp_enqueue_script関数

この関数はページにスクリプトのリンクを追加します。

• ハンドル名により同じスクリプトを指定しても上書きせずに追加できます。
• 依存関係により、スクリプトをページにリンクする順番を制御できます。
• スクリプトのバージョンを指定して、キャッシュを破棄するタイミングを制御できます。
• ページへの追加場所を、ページの最後(</body>の前)か選択できます。

公式サイトのドキュメント：https://developer.wordpress.org/reference/functions/wp_enqueue_script/

wp_enqueue_style関数

この関数はページにスタイルシートのリンクを追加します。

• ハンドル名により同じスタイルシートを指定しても上書きせずに追加できます。
• 依存関係により、スタイルシートをページにリンクする順番を制御できます。
• スタイルシートのバージョンを指定して、キャッシュを破棄するタイミングを制御できます。
• メディアクエリを指定できます。

公式サイトのドキュメント：https://developer.wordpress.org/reference/functions/wp_enqueue_style/

注意点

ハンドル名により同一スクリプトにチェックを行っているため、WordPressが既に登録しているハンドル名と重複しないように注意が必要です。

古いテーマなど、wp_head関数、および、wp_footer関数を使用していない場合、wp_enqueue_scriptsアクションフックが使えません。