ブログ初心者・WordPress・Web制作の情報サイト

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

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

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

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

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

wp_enqueue_scriptsへのフック

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

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

WordPress: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分です。

スクリプトの読み込み – 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);
});

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

CSS・スクリプトの読み込みまとめ

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

内容のまとめを載せておきます。

  • add_action()を使用しwp_enqueue_scriptsへフックする。
  • CSSの読み込みはwp_enqueue_style()を使用する。
  • スクリプトの読み込みはwp_enqueue_script()を使用する。

WordPressは高い拡張性を持っているため、style.cssだけではなくアイコンフォントや外部のJavaScriptなど付加機能を追加することはよくあります。

直接HTMLに記述するとHTMLが見辛くなるだけでなく、重複して読み込んでいたなんてことも起こってしまうのです。

WordPressではCSSやJavaScriptの登録にはアクションフックを使いましょう。キャッシュクリアの手間もなくなります。

ブログを作りたい人へ。
ブログを始めたいと思っても実際に何をすればいいか分からないかもしれません。ブログを作りたい人へWordPressの始め方と必要な基礎知識を解説します。具体的なブログの始め方と関連記事を一覧にまとめているので参考にしてください。
Read More