WordPressテックラボ

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

2016年6月8日

JSやCSSを一元管理する

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

wp_enqueue_script関数

wp_enqueue_script()は、スクリプトファイルの重複を回避し、適切な順番で読み込むように制御する関数です。

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

add_actionに指定するアクションフックは wp_print_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です。
利用例
function add_scripts() {
wp_enqueue_script( 'smart-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '20160608', true );
}
add_action('wp_print_scripts', 'add_scripts');

上記では wp_enqueue_script() でサイト共通で読み込みたいJSファイルをアクションフックに登録しています。

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 );

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!