【WordPress】CSSやJavaScript（jQuery）ファイルを読み込む正しい方法

オリジナルのCSSやJavaScript（jQuery）を設定したい時に、テーマファイルに直接書いてしまえば手っ取り早いのですが、Wordpressの場合は書き方が異なるようです。

そこで、WordpressのテーマにオリジナルのCSSやJavaScript（jQuery）を読み込ます書き方を解説します。

読み込む画面に合わせてフックが準備されている

WordPressは、CSSやJavaScriptファイルを読み込ませれるように画面に対してフックが準備されています。

フック一覧

上記のフックを使ってCSSファイルやJavaScriptファイルを読み込んであげる必要があります。以前まではwp_print_styles()やwp_print_scripts()がありましたが、WordPress 3.3から非推奨となっていました。

3.3以降からは代わりに上記に書いたフックを使う必要があります。

ちなみにフック名が「XXX_scripts」という名前ですが、スクリプトファイルだけではなくスタイルシートの読み込みのも使用します。

CSSファイルを読み込む場合

CSSファイルを読み込む場合は、wp_enqueue_style()関数を使います。

引数について

• $ver: バージョン文字列。クエリーストリングに付加される。
• $media: スタイルシートのメディア指定する際に使用。例: ‘all’、’screen’、’handheld’、’print’。

記述の仕方

function my_enqueue_style()
{
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.css');
wp_enqueue_style('customize', get_template_directory_uri() . '/css/customize.css');
}
add_action('wp_enqueue_scripts', 'my_enqueue_style');

通常のテーマの場合は、get_template_directory_uri() を使用することでテーマまでのURLパスを取得できます。子テーマでの場合はget_stylesheet_directory_uri() を使用することで子テーマまでのURLパスを取得することができます。

読み込むファイルが大量にある場合

上記の書き方でもCSSファイルを追加することができますが、読み込むファイルが大量にある場合は、画面によって分岐したい場合は、下記の書き方の方がおすすめです。

function register_style() {
  wp_register_style( 'style', get_template_directory_uri()  . '/css/style.css' );
  wp_register_style( 'home', get_template_directory_uri()  . '/css/home.css' );
  wp_register_style( 'blog', get_template_directory_uri() . '/css/blog.css' );
  wp_register_style( 'contact', get_template_directory_uri()  . '/css/contact.css' );
}
  function my_enqueue_style() {
    // 共通
    register_style();
      wp_enqueue_style( 'style' );
    // トップページ (ID=home)
    if ( is_page( array('home') ) ) {
      wp_enqueue_style( 'home' );
    }
    // ブログ (ID=blog)
    elseif ( is_page( array('blog') ) ) {
      wp_enqueue_style( 'blog' );
    }
    // お問い合わせ (ID=contact)
    elseif ( is_page( array('contact') ) ) {
      wp_enqueue_style( 'contact' );
    }
  }
add_action( 'wp_enqueue_scripts', 'my_enqueue_style' );

wp_register_style()関数は、事前にCSSファイルの情報をキューに設定しておき、必要な時にwp_enqueue_style()関数を使って出力することができます。

一か所に一元管理でき、ファイルの変更などが発生した時に修正も簡単に出来ます。

JavaScriptの場合

JavaScriptの場合は、wp_enqueue_script()関数を使います。

引数について

• $ver: バージョン文字列。クエリーストリングに付加される。
• $in_footer: true の場合 wp_footer()の部分（</body>） の前に読み込まれる。 falseの場合 wp_head()の部分 （</head>） の前で読み込まれる。デフォルトはfalse

記述の仕方

function my_enqueue_script()
{
// </head>タグ前に出力する
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js');
}
add_action('wp_enqueue_scripts', 'my_enqueue_script');

読み込むファイルが大量にある場合

上記の書き方でもJavaScriptファイルを追加することができますが、読み込むファイルが大量にある場合は、画面によって分岐したい場合は、下記の書き方の方がおすすめです。

function register_script() {
  wp_register_script( 'script', get_template_directory_uri()  . '/js/script.js' );
  wp_register_script( 'home', get_template_directory_uri()  . '/js/home.js' );
  wp_register_script( 'blog', get_template_directory_uri() . '/js/blog.js' );
  wp_register_script( 'contact', get_template_directory_uri()  . '/js/contact.js' );
}
  function my_enqueue_script() {
    // 共通
    register_script();
      wp_enqueue_script( 'script' );
    // トップページ (ID=home)
    if ( is_page( array('home') ) ) {
      wp_enqueue_script( 'home' );
    }
    // ブログ (ID=blog)
    elseif ( is_page( array('blog') ) ) {
      wp_enqueue_script( 'blog' );
    }
    // お問い合わせ (ID=contact)
    elseif ( is_page( array('contact') ) ) {
      wp_enqueue_script( 'contact' );
    }
  }
add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );

wp_register_style()関数は、事前にJavaScriptファイルの情報をキューに設定しておき、必要な時にwp_enqueue_style()関数を使って出力することができます。

まとめ

CSSやJavaScript（jQuery）ファイルを読み込む場合は、専用のフックが準備されているのでそちらを使いましょう。