アクションフックで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 日本語版

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    タグを使って「関連記事一覧」を出力するWordPressカスタマイズ

    ブログを運営するにあたって「関連記事」ってなにげに重要なんですよね。 便利なプラグインも揃っていて実装もそれほど手間ではないのでは・・・。 しかし、テーマを少々カスタマイズすることで実装できてしまうのです。 自分用の備忘録にもなるし、タグを使った関連記事一覧の […]

    2013.5.24
    Wordpress【カスタマイズ】

    WordPressでJSを非同期読み込みするasync属性の追加方法

    scriptタグにasync属性を追加することで、非同期で読み込みます。 これにより、WEBサイトのレンダリングブロックを防ぐことができ、表示スピードが速くなるんですね! ここで紹介するのは、Wordpressで読み込むJSにもasync属性を追加する方法です […]

    2018.3.30
    Wordpress【カスタマイズ】