アクションフックでCSSやJSの読み込みを一元管理する【WordPress】
WordPressに読み込むCSSやJSの外部ファイルをアクションフックを使って管理します。
目次
function.phpでCSSとJSを管理する
テーマファイルのfunction.phpに追記することで、読み込みを管理します。
使用するWP関数は「wp_enqueue_script」と「wp_enqueue_style」の2つを使用します。
それぞれの使い方を見ていきましょう。
WP関数「wp_enqueue_style」とは
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
$handle ハンドル名を命名。そのファイルを表す何かを入れる
$src ファイルのURLを入れる
$deps このスタイルより前に読み込まれる必要があるスタイルのハンドルを配列で指定
$ver ファイル名の後ろに?ver=とパラメータが付与される
$media メディアを指定する文字列 例: ‘all’、’screen’、’handheld’、’print’
使用方法
テーマのfunction.phpに以下を追記します。
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');
出力結果は以下のとおり。
headタグ内にCSSが読み込まれるようになります。
<link rel='stylesheet' id='wpstyle-css' href='https://hogehoge.net/wp/wp-content/themes/theme-name/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関数「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の直前に設置
使用方法
テーマのfunction.phpに以下を追記します。
/* 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');
if文で条件分岐をし読み込むファイルを変えてみても良いでしょう
出力結果は以下の通り。
<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://hogehoge.net/wp/wp-content/themes/theme-name/js/common.js?ver=1505476010'></script> <script type='text/javascript' src='https://hogehoge.net/wp/wp-content/themes/theme-name/js/page.js?ver=4.6.7'></script>
filemtimeというPHP関数でファイルの更新時刻を取得しています。
第4引数で設定することで、ファイル更新時に自動で数値が変更されます。
ブラウザのキャッシュ対策に有効です。
条件を加えてページ毎に読み込むファイルを変更する
ファイルの管理が楽になるだけでなく、ページ毎にスタイルやスクリプトの読み込みを最適化し、読み込み速度のパフォーマンス向上にも有効です。
条件指定の関数は以下ページが参考になります。
