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

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

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

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

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

フック一覧

wp_enqueue_scriptsフロントページ(公開ページ)に読み込ます場合に使用
login_enqueue_scriptsログイン画面に読み込ます場合に使用
admin_enqueue_scripts管理画面に読みこます場合に使用

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

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

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

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

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

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

引数について

引数名説明必須デフォルト
$handleCSSの識別名、ハンドルNone
$src登録するJavaScriptの URL×None
$deps依存スクリプト識別名の配列×array()
$verパラメータの付与×false
$mediaスタイルシートのメディア指定×array()
  • $ver: バージョン文字列。クエリーストリングに付加される。
  • $media: スタイルシートのメディア指定する際に使用。例: ‘all’、’screen’、’handheld’、’print’。

記述の仕方

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

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

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

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

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

スポンサーリンク

JavaScriptの場合

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

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

引数について

引数名説明必須デフォルト
$handleスクリプトの識別名、ハンドルNone
$src登録するJavaScriptの URL×None
$deps依存スクリプト識別名の配列×array()
$verパラメータの付与×false
$in_footerwp_head()かwp_footer()でつかうか×false
  • $ver: バージョン文字列。クエリーストリングに付加される。
  • $in_footer: true の場合 wp_footer()の部分(</body>) の前に読み込まれる。 falseの場合 wp_head()の部分 (</head>) の前で読み込まれる。デフォルトはfalse

記述の仕方

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

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

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

まとめ

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)