アクションフックでCSSやJSの読み込みを一元管理する【WordPress】

2017年9月22日 Wordpress NAndo

WordPressに読み込むCSSやJSの外部ファイルをアクションフックを使って管理します。

function.phpだけで読み込むCSSとJSを制御

テーマファイルのfunction.phpに追記します。
使用するWP関数はwp_enqueue_scriptwp_enqueue_styleの2つ。

それぞれの使い方を見ていきます。

wp_enqueue_style の説明

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

$handle ハンドル名を命名。そのファイルを表す何かを入れる
$src ファイルのURLを入れる
$deps このスタイルより前に読み込まれる必要があるスタイルのハンドルを配列で指定
$ver ファイル名の後ろに?ver=とパラメータが付与される
$media メディアを指定する文字列 例: ‘all’、’screen’、’handheld’、’print’

wp_enqueue_style 使用例

/* css */
function add_styles() {
	wp_enqueue_style( 'wpstyle', get_template_directory_uri() . '/css/wpstyle.css', '', '201709'));
	wp_enqueue_style( 'notosans', '//fonts.googleapis.com/earlyaccess/notosansjapanese.css');
}
add_action('wp_print_styles', 'add_styles');

出力例

<link rel='stylesheet' id='wpstyle-css'  href='https://naoyu.net/wp/wp-content/themes/naoyunet4/css/wpstyle.css?ver=201709' type='text/css' media='all' />
<link rel='stylesheet' id='notosans-css'  href='//fonts.googleapis.com/earlyaccess/notosansjapanese.css?ver=4.6.7' type='text/css' media='all' />

wp_enqueue_script の説明

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

$handle ハンドルを命名。そのファイルを表す何かを入れる
$src ファイルのURLを入れる
$deps このスクリプトより前に読み込まれる必要があるスクリプトのハンドルを配列で指定
$ver ファイル名の後ろに?ver=とパラメータが付与される
$in_footer falseでhead内に、trueで/bodyの直前に設置

wp_enqueue_script 使用例

/* js */
function add_scripts() {
	wp_deregister_script('jquery'); // WordPress本体のjquery.jsを読み込まない
	wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "", true );
	wp_enqueue_script( 'commonjs', get_template_directory_uri() . '/js/common.js', array( 'jquery' ), filemtime( get_stylesheet_directory().'/js/common.js'), true );
	if(is_page()){ // 固定ページだけで読み込ませる
		wp_enqueue_script( 'pagejs', get_template_directory_uri() . '/js/page.js', array( 'jquery' ), '', true );
	}
}
add_action('wp_enqueue_scripts', 'add_scripts');

出力例

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js?ver=4.6.7'></script>
<script type='text/javascript' src='https://naoyu.net/wp/wp-content/themes/naoyunet4/js/common.js?ver=1505476010'></script>
<script type='text/javascript' src='https://naoyu.net/wp/wp-content/themes/naoyunet4/js/page.js?ver=4.6.7'></script>

filemtimeというPHP関数でファイルの更新時刻を取得します。
$verに設置することで、ファイル更新時に自動で数値が変更されます。
ブラウザのキャッシュ対策に有効です。

【追記】2017.9.23
add_actionのパラメータwp_print_scriptsは管理画面にも反映される為、フロントエンドのみ反映したい場合はwp_enqueue_scriptsを使う必要がありました。
上記のコードは修正いたしました。

add_action('wp_print_scripts', 'add_scripts'); // ×
add_action('wp_enqueue_scripts', 'add_scripts'); // ○ 

条件を加えてページ毎に読み込むファイルを変更する

ファイルの管理が楽になるだけでなく、ページ毎にスタイルやスクリプトの読み込みを最適化し、読み込み速度のパフォーマンス向上にも有効です。
条件指定の関数は以下ページが参考になります。

条件分岐タグ – WordPress Codex 日本語版