ProgrammingWordPress講座WordPressテックラボ
WordPressテックラボ

functions.phpでJSやCSSを一元管理する

JSやCSSを一元管理する

CSSやJavaScriptの読み込みはSTYLEタグやSCRIPTタグをheader.phpなどに直接書くこともできますが、WordPressではfunctions.phpでwp_enqueue_style()、wp_enqueue_script()をアクションフックを使って読み込むことが推奨されています。wp_enqueue_style()やwp_enqueue_script()を利用する利点として、CSSやJavaScriptの重複読み込みを回避できたり、functions.php内で一元管理できることなどが挙げられます。

ファイルをキューに登録する関数
  • wp_enqueue_style() – CSSファイルをキューに登録
  • wp_enqueue_scripts() – JavaScriptファイルをキューに登録

wp_enqueue_script関数

wp_enqueue_script()は指定したCSSやJavaScriptファイルを出力用のキューに登録します。

functions.php
function add_files() {
  	wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

add_action()の第一引数にはアクションフックを指定しています。フックは指定したタイミングで実行するための仕組みです。上記コードで使っているwp_enqueue_scriptsフックはフロントエンドのみに処理を適用するため、管理画面などには影響を与えません。wp_enqueue_scriptsフックとwp_enqueue_scripts()関数は名前が同じなので混同しないように注意ください。wp_enqueue_scripts()はスクリプトをキューに登録するための関数で、wp_enqueue_scriptsフックはフロントエンドをイベントトリガーにするフックです。

wp_enqueue_script()には下記の引数を指定できます。

wp_enqueue_scriptのパラメータ
引数説明必須
$handleスクリプトを区別するハンドル名を指定します。○
$srcスクリプトのURLを指定します。 
$deps依存スクリプトのハンドル名を配列で指定します。
この引数で読み込み順を制御できます。		 
$ver任意のバージョンを指定します。
バージョン情報はスクリプトのURLにパラメータとして追加されるので、ブラウザキャッシュ対策に使えます。		 
$in_footerスクリプトの読み込み位置を指定します。trueで閉じBODYタグ前、falseで閉じHEAD前に出力されます。
デフォルトはfalseです。		 

wp_enqueue_style()、wp_enqueue_script()には、フロントエンドや管理画面といった利用画面に合わせたアクションフックが用意されています。関数を実行したいタイミングにあったアクションフックを選択してください。

アクションフック
  • wp_enqueue_scripts – フロントエンドをイベントトリガーにする
  • login_enqueue_scripts – ログイン画面をイベントトリガーにする
  • admin_enqueue_scripts – 管理画面をイベントトリガーにする
利用例：HEAD要素内ではなく閉じBODY前に出力
function add_scripts() { 
     // 閉じBODYタグ前に出力
     wp_enqueue_script( 'smart-script', 'main.js', '', '20160608', true );
 }
 add_action('wp_print_scripts', 'add_scripts');

上記では wp_enqueue_script() でサイト共通で読み込みたいJSファイルをアクションフックに登録しています。オプションでBODYタグ前の出力を指定しています。

利用例：依存ファイルを指定する
function add_scripts() { 
     // jQuery依存指定、閉じBODYタグ前に出力
     wp_enqueue_script( 'smart-script', 'main.js', array( 'jquery' ) );
 }
 add_action('wp_print_scripts', 'add_scripts');

$depsオプションを使ってjQueryを依存先として指定しています。これにより、もし依存先がキューに登録されていない場合、ここで指定したスクリプトも登録されません。

HTML出力例
<script type='text/javascript' src='http://new.rfs.jp/wp-content/themes/smart/js/main.js?ver=20160608'></script>

WordPress付属のjQueryを差し替える

WordPressでは、jQueryはデフォルトで読み込まれます。その際のハンドル名はjqueryです。
WordPressが読み込むjQueryはコンフリクトを避けるために jQuery.noConflict() 指定がされていて、普段とは違った特別な記法が必要になります。小規模なサイトで開発者も自分だけといったときはそれほどコンフリクトを気にする必要はないので、WordPressがデフォルトで読み込むjQueryをキャンセルし、別途jQueryを読み込んでも良いでしょう。

読み込み指定されたファイルをキャンセルするには wp_deregister_script() を使い、後は通常通り wp_enqueue_script() を使って読み込み指定します。

functions.php
function add_files() {
	// WordPress本体のjquery.jsを読み込まない
	wp_deregister_script('jquery');

	// jQueryの読み込み
	wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "20160608", false );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

CSSを読み込む

CSSの場合はwp_enqueue_script()の代わりにwp_enqueue_style()を使います。アクションフックはスクリプトと同じwp_enqueue_scriptsです。

wp_enqueue_style関数

wp_enqueue_style()は、スタイルシートファイルの重複を回避し、適切な順番で読み込むように制御します。

functions.php
function add_files() {
  	wp_enqueue_style( $handle, $src, $deps, $ver, $media );
}
add_action( 'wp_enqueue_scripts', 'add_files' );
wp_enqueue_styleのパラメータ
引数説明必須
$handleスタイルシートを区別するハンドル名を指定します。○
$srcスタイルシートのURLを指定します。 
$deps依存スタイルシートのハンドル名を配列で指定します。
この引数で読み込み順を制御できます。		 
$ver任意のバージョンを指定します。
バージョン情報はスクリプトのURLにパラメータとして追加されるので、ブラウザキャッシュ対策に使えます。		 
$mediaスタイルシートのメディアを指定します。 
functions.php
function add_files() {
	// サイト共通のCSSの読み込み
	wp_enqueue_style( 'main', get_template_directory_uri() . '/css/main.css', "", '20160608' );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

JSとCSSをまとめて読み込み指定する

wp_enqueue_script()とwp_enqueue_style()はまとめてアクションフックに登録できまます。

// JS・CSSファイルを読み込む
function add_files() {
	// WordPress提供のjquery.jsを読み込まない
	wp_deregister_script('jquery');

	// jQueryの読み込み
	wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "20160608", false );

	// サイト共通JS
	wp_enqueue_script( 'smart-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '20160608', true );

	// サイト共通のCSSの読み込み
	wp_enqueue_style( 'main', get_template_directory_uri() . '/css/main.css', "", '20160608' );
}
add_action('wp_enqueue_scripts', 'add_files');
HTML出力例
<link rel='stylesheet' id='top-css'  href='http://new.rfs.jp/wp-content/themes/smart/css/main.css?ver=20160608' type='text/css' media='' />
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js?ver=20160608'></script>
...
</head>
...
<script type='text/javascript' src='http://new.rfs.jp/wp-content/themes/smart/js/main.js?ver=20160608'></script>
</body>

出力するページを特定したい場合は is_single() などを使って条件により出し分けてください。

// singleページ専用JS
if ( is_single() ) wp_enqueue_script( 'smart-single-script', get_template_directory_uri() . '/js/single.js', "", '20160608', true );

関連記事