アクションフックを使ってCSS・JSを読み込む – WordPress

DATE:

2020/04/29

CATEGORY:

WordPress

TAG:

WPカスタマイズ

wp_enqueue_scriptsへのフック
add_action()でwp_enqueue_scriptsへのフックする
登録する関数を分けて書く
CSSの読み込み – wp_enqueue_style()
スクリプトの読み込み – wp_enqueue_script()
CSS・スクリプトの読み込みまとめ

CSSやJavaScriptを読み込むときにHTMLに直接書き込んでいませんか? この方法はWordPresでは推奨されません。

wp_enqueue_script()・wp_enqueue_style()を使って読み込みましょう。

この記事ではアクションフックを使ったCSSやJavaScriptの読み込み方法を紹介します。

wp_enqueue_scriptsへのフック方法
CSSの読み込み方法
スクリプトの読み込み方法

wp_enqueue_scriptsへのフック

WordPressにおけるCSS・JavaScriptの登録は、アクションフックを登録するadd_action()でwp_enqueue_scriptsへフックすることによって行います。

フックは引っ掛けるイメージです。

登録する関数を作成し、wp_enqueue_scriptsへフックすることでフロントエンド(ユーザーが見るWebページ)にのみ出力されます。エディタや管理画面には出力されません。

フックされた関数はdo_action(‘wp_enqueue_scripts’)のタイミングで優先度順に実行されます。

wp_enqueue_scriptsはスクリプトだけでなく、スタイルシートの登録にも使われる便利なアクションフックです。

wp_enqueue_scriptsはアクションフック。wp_enqueue_script()は関数。混同しないように。
wp_enqueue_scriptsはスクリプトやスタイルシートの登録時に使う
フロントエンドにのみ出力される

add_action()でwp_enqueue_scriptsへのフックする

add_action()を使ってwp_enqueue_scriptsへフックします。

add_action( string $hook_name, callable $callback, int $priority = 10, 
int $accepted_args = 1 )

$hook_name：登録するアクションの名称
$callback：フックする関数
$priority(オプション)：優先順位、デフォルトは10。数値が低い程先に実行される。
$accepted_args(オプション)：関数が受け入れる引数の数。デフォルトは1。

add_action()の使用例

add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style('my_style', get_stylesheet_directory_uri() . '/style.css');
}, 11);

オプションは省略可能です。

$priorityを高く設定すると実行される順番が遅くなります。(優先度が下がる)

スタイルシートを読み込む場合、$priorityは必ず11以上に設定します。10以下にすると、WordPressのスタイルシートが後に読み込まれて上書きされる可能性があります。非常に重要なので注意してください。

get_stylesheet_directory_uri()は親テーマのスタイルシートが置かれているディレクトリ(親テーマの直下)を取得します。子テーマのCSSを取得する場合はget_template_directory_uri()を使ってください。

登録する関数を分けて書く

add_action()はすでに定義した関数を指定することもできます。

function load_my_stylesheet() {
  wp_enqueue_style('my_style', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'load_my_stylesheet', 11);

長い関数を登録するときや複数の関数をまとめたいとき、関数を使いまわしたいときなどは add_action()と分けて書くのも1つの方法です。

CSSの読み込み – wp_enqueue_style()

CSSの読み込みには wp_enqueue_style() を使用します。

関数の内容はJavaScriptを登録するwp_enqueue_script()と殆ど同じですがスクリプトではなくスタイルシートを登録する点が異なります。

フックする場所もwp_enqueue_script()と同じくwp_enqueue_scriptsです。

wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), 
string|bool|null $ver = false, string $media = 'all' )

$handle：スタイルシートの登録名
$src(オプション)：スタイルシートの場所
$deps(オプション)：登録するスクリプトが依存する関数をハンドル名で指定する
$ver(オプション)：スクリプトのバージョン。キャッシュ時に参照されます。
$media(オプション)：メディア属性を指します。

//wp_enqueue_style()の使用例1
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style(
    'my_style',
    get_stylesheet_directory_uri().'/style.css',
  );
}, 11);

オプション部分は省略してかまいません。

wp_enqueue_style()でCSSを読み込むとキャッシュが自動的に更新されるようになります。(キャッシュクリアの手間がなくなる)

//wp_enqueue_style()の使用例2 (キャッシュ期間の設定)
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style(
    'my_style',
    get_stylesheet_directory_uri().'/style.css',
    [],
    date("YmdHi"),
  );
}, 11);

この例ではPHPのdate()を使用してキャッシュ期間を設定しています。「分」単位まで出力しているのでキャッシュ期間は1分です。

WordPressのCSS自動キャッシュクリア方法【キャッシュ対策】

CSSを編集してブラウザで確認したら反映されていない→ブラウザのキャッシュクリア。これってとても面倒ですよね。自動でキャッシュクリアして欲しいものです。WordPressでCSS編集時の自動キャッシュクリア方法を紹介します。

スクリプトの読み込み – wp_enqueue_script()

JavaScriptの登録にはwp_enqueue_script()を使用します。

wp_enqueue_scriptsと名前が似ていますがこちらは関数です。指定したスクリプトを登録し実行キューに追加します。

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), 
string|bool|null $ver = false, bool $in_footer = false )

$handle：スクリプトの登録名
$src(オプション)：スクリプトの場所
$deps(オプション)：登録するスクリプトが依存する関数をハンドル名で指定する
$ver(オプション)：スクリプトのバージョン。キャッシュ時に参照される。
$footer(オプション)：trueにセットするとheadではなく</body>の直前に出力される。

//wp_enqueue_script()の使用例
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_script('main', get_stylesheet_directory_uri() . '/js/main.js', [], false, true);
});

この例ではスクリプトをフッターで読み込むために$footerにtrueを指定しています。JavaScriptは一般的に後から読み込みます。