変化に対し敏感に
行動は俊敏に
継続的な考え方を
BLOG
WordPress JS CSS読み込み方法
WordPressにて個別にJSファイルやCSSファイルを読み込みたいことがあります。
方法はいくつかありますのでご紹介いたします。
WordPressから推奨される方法
CSS や JavaScript の読み込みを header.php 等の head 要素内に link 要素や script タグを使って記述することもできますが、その場合プラグインなどのファイルと重複したり、同じファイルを複数回読み込んだり、また、ファイルに依存関係がある場合に正しい順序で読み込まれなかったりする可能性があります。
スタイルシート(CSS)の読み込みには wp_enqueue_style()
スクリプト(JS)の読み込みには wp_enqueue_script()
上記を用いてアクションフックで読み込むことが推奨されています。
- wp_enqueue_scripts – サイト公開側に読み込む場合
- login_enqueue_scripts – ログイン画面に読み込む場合
- admin_enqueue_scripts – 管理画面に読み込む場合
※ 現在は、wp_print_scripts や wp_print_styles フックの使用は非推奨になっています。
functions.phpに下記の通り記述を行います。
function add_css_js() {
//スタイルシートの読み込み
wp_enqueue_style( $handle, $src, $deps, $ver, $media);
//JavaScript の読み込み
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
//アクションフック(wp_enqueue_scripts)への登録
add_action('wp_enqueue_scripts', 'add_css_js');
まとめ
読み込みたいファイルを用意して、スタイルシート(CSS)の読み込みには wp_enqueue_style()、スクリプト(JS)の読み込みには wp_enqueue_script()のアクションフックを利用する。
functions.phpへ記述を行う
function add_css_js() {
//スタイルシートの読み込み
wp_enqueue_style( 'style',get_template_directory_uri().'/css/style.css' );
//JavaScript の読み込み
wp_enqueue_script( 'slick',get_template_directory_uri().'/css/slick.css' );
}
//アクションフック(wp_enqueue_scripts)への登録
add_action('wp_enqueue_scripts', 'add_css_js');
以上となります。
WordPressでの制作事例はこちらからご覧ください。