BLOG

変化に対し敏感に
行動は俊敏に
継続的な考え方を

BLOG BLOG

WordPress JS CSS読み込み方法

WordPress JS CSS読み込み方法

WordPressにて個別にJSファイルやCSSファイルを読み込みたいことがあります。
方法はいくつかありますのでご紹介いたします。

WordPressから推奨される方法

CSS や JavaScript の読み込みを header.php 等の head 要素内に link 要素や script タグを使って記述することもできますが、その場合プラグインなどのファイルと重複したり、同じファイルを複数回読み込んだり、また、ファイルに依存関係がある場合に正しい順序で読み込まれなかったりする可能性があります。

スタイルシート(CSS)の読み込みには wp_enqueue_style()
スクリプト(JS)の読み込みには wp_enqueue_script()
上記を用いてアクションフックで読み込むことが推奨されています。

※ 現在は、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での制作事例はこちらからご覧ください。

re-WordPress|ワードプレスをリニューアル