WordPress で CSS、JavaScript ファイルを読み込む正しい方法

誤った方法を行っている例を多く見かけますので説明します。

読み込むエリアにあわせて適切なフックを使用する

上記フックは xxx_scripts という名前ですが、スクリプトだけでなくスタイルシートの読み込みにも使用されます。誤解を招き易い点なので注意してください。また、wp_print_scripts フック、wp_print_styles フックを使用している例を見かけますがこれらを使用することは誤りです。適切なフックを用いずにスタイルシートやスクリプトを読み込むことは不整合の原因となりますので、明確な意図がない限り行うべきではありません。

関数を使ってファイルを登録・読み込みキューに追加する

スタイルシートの場合

wp_enqueue_style() を使います。パラメーターは以下となります:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

  • $handle: スタイルシートの識別名
  • $src: スタイルシートの URL(オプション)
  • $deps: 依存スタイルシート識別名の配列(オプション)
  • $ver: バージョン文字列。クエリーストリングに付加される。(オプション)
  • $media: スタイルシートのメディア指定(オプション)

スクリプトの場合

wp_enqueue_script() を使います。パラメーターは以下となります:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

  • $handle: スクリプトの識別名
  • $src: スクリプトの URL(オプション)
  • $deps: 依存スクリプト識別名の配列(オプション)
  • $ver: バージョン文字列。クエリーストリングに付加される。(オプション)
  • $in_footer: true とすることでスクリプトを wp_footer() で読み込む。デフォルトは false。(オプション)

具体例

以下、Twenty Fourteen テーマの functions.php から抜粋したコードです。説明はコメントを読んでください。

// スタイルシートとスクリプトの読み込みコードを関数にまとめる
function twentyfourteen_scripts() {
	/*
	 * wp_enqueue_style() を使って style.css を登録・読込みキューに追加。
	 * genericons という登録済みスタイルシートを依存指定し
	 * 自動的に style.css より先に読み込ませる。
	 */
	wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri(), array( 'genericons' ) );

	/*
	 * wp_enqueue_script() を使って functions.js を登録・読込みキューに追加。
	 * jquery を依存指定し自動的に先に読み込ませる。
	 * 20140319 というバージョン文字列を URL のクエリーストリングに付加し
	 * 古いバージョンのファイルのキャッシュがある場合は更新されるようにする。
	 * スクリプトはフッターエリアに読み込ませる(多くの場合この設定が望ましい)。
	 */
	wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20140319', true );
}
// twentyfourteen_scripts() をサイト公開側で呼び出す。
add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );

One thought on “WordPress で CSS、JavaScript ファイルを読み込む正しい方法

  1. Pingback: WordPress で jQuery を使う時の注意点 | EastCoder;

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>