WordPressでCSSとJavaScriptを正しく読み込ませる方法
CSSやJavaScriptを読み込ませるときはヘッダーやフッターに読み込ませる事が一般的ですね。
ですが、WordPressではfunctions.phpにアクションフックと関数の記述をして読み込む方法があります。
今回紹介する「wp_enqueue_style」関数と「wp_enqueue_script」関数を使用すると、
読み込みの重複を回避、かつ依存関係も考慮しながらファイルを読み込ませることができます。
wp_enqueue_script
functions.phpに記述
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
設定できるパラメータ
| 引数名 | 概要 | デフォルト値 |
|---|---|---|
| $handle | スクリプトの識別名 | none |
| $src | スクリプトのURL | false |
| $deps | 依存するスクリプト | array() |
| $ver | スクリプトのバージョン | false |
| $in_footer | スクリプトの読み込み位置（trueで/body前、falseで/head前） | false |
使用例
function my_script() {
wp_enqueue_script( 'example', get_template_directory_uri() . '/js/example.js', array('jQuery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_script' );
上記の例ですとハンドル名が「example」で、現在使用しているテーマ内の「js」ディレクトリの「example.js」というファイルを「jQuery」というハンドル名のファイルの後に読み込み、バージョンを「1.0.0」とし、</body>の前に読み込みます。
「$handle」に設定する名前は自由ですが、使用できない物がいくつかあります。 利用頻度の高いものでは「jQuery」や「common」などが使用できません。
wp_enqueue_style
functions.phpに記述
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
設定できるパラメータ
| 引数名 | 概要 | デフォルト値 |
|---|---|---|
| $handle | スタイルシートの識別名 | none |
| $src | スタイルシートのURL | false |
| $deps | 依存するスクリプト | array() |
| $ver | スタイルシートのバージョン | false |
| $media | スタイルシートのメディア指定 | all |
使用例
function my_style() {
wp_enqueue_style( 'my_style', get_template_directory_uri() . '/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_style' );
上記の例ですとハンドル名が「my_style」で、現在使用しているテーマ内の「css」ディレクトリの「style.css」というファイルを読み込みます。
ひとつのアクションフックからスクリプトとスタイルを読み込む
function my_scripts() {
wp_enqueue_style( 'my_style', get_template_directory_uri() . '/css/style.css' );
wp_enqueue_script( 'example', get_template_directory_uri() . '/js/example.js', array('jQuery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
まとめ
パラメータのバージョン番号は必須ではありませんが、指定をしないと現在使用しているWordPressのバージョンが表示されてしまいます。
セキュリティ面の事を考えるとバージョンが表記されるのは良くないので、何かしら指定をしたほうが良いと思いました。
