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

公開日: 2017年9月22日 最終更新日: 2018年5月24日

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

function.phpでCSSとJSを管理する

テーマファイルのfunction.phpに追記することで、読み込みを管理します。
使用するWP関数は「wp_enqueue_script」と「wp_enqueue_style」の2つを使用します。

それぞれの使い方を見ていきましょう。

WP関数「wp_enqueue_style」とは

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

使用方法

テーマのfunction.phpに以下を追記します。

出力結果は以下のとおり。

headタグ内にCSSが読み込まれるようになります。

WP関数「wp_enqueue_script」とは

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

使用方法

テーマのfunction.phpに以下を追記します。

if文で条件分岐をし読み込むファイルを変えてみても良いでしょう

出力結果は以下の通り。

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

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

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

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

お気軽にコメントをどうぞ。