ブログ初心者・Web制作の情報サイト
アクションフックを使ってCSSやJavaScriptを読み込む方法【WordPress】

アクションフックを使ってCSSやJavaScriptを読み込む方法【WordPress】

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

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

wp_enqueue_script()とwp_enqueue_style()を使い登録の重複を避け正しく読み込みましょう。

CSSやJavaScriptの登録にはアクションフックを使う

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

WordPressにもデフォルトでjQueryやjQuery UIといったスクリプトが登録されておりWordPress自体の動作を支えています。

あなたはCSSやJavaScriptファイルをどのような方法で読み込みますか?直接HTMLに記述するとHTMLが見辛くなってしまうだけでなく重複して読み込んでいたなんてことも起こってしまうのです。

そんなことないだろうと思われるかもしれませんが、読み込む数が多くなると全てを覚えてはいられません。

そこでWordPressが用意したAPIを使用することによってCSSやJavaScriptを正しく読み込もうという訳です。

wp_enqueue_scripts へフック

CSSやJavaScriptの登録はアクションフックを登録する add_action() で wp_enqueue_scripts へフックすることによって行います。フックは引っ掛けるイメージです。フックした関数は do_action( ‘wp_enqueue_scripts’ ) のタイミングで実行されます。

WordPress:wp_enqueue_scripts へのフック

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

add_action()

function add_action(
    $tag,
    $function_to_add,
    $priority = 10,
    $accepted_args = 1
) { }

$tag:登録するアクションの名称

$function_to_add:フックする関数

$priority(オプション):優先順位、デフォルトは10。数値が低い程先に実行される。

$accepted_args(オプション):関数が受け入れる引数の数。デフォルトは1。

add_action()の使用例

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

add_action() で関数をフックする例です。wp_enqueue_style() でCSSを登録しています。JavaScriptとCSSの登録方法については後で説明します。

JavaScriptの登録方法

CSSの登録方法

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

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

function add_my_stylesheet() {
    wp_enqueue_style(
        'my_style.css',
        get_stylesheet_directory_uri().'/style.css',
        "",
        date("YmdHi"),
    );

    wp_enqueue_style(
        'my_block_style.css',
        get_stylesheet_directory_uri().'/style.css',
        "",
        date("YmdHi"),
    );
}
add_action('wp_enqueue_scripts', 'add_my_stylesheet');

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

JavaScriptの登録

JavaScriptの登録には wp_enqueue_script() を使用します。wp_enqueue_scripts と名前が似ていますが別物です。

wp_enqueue_script() は指定したスクリプトを登録し実行キューに追加する関数です。つまり wp_enqueue_script() は登録と実行の両方を行います。

もし登録だけして特定の状況で実行したい場合は wp_register_script()を使用してください。

wp_enqueue_script()

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

$handle:スクリプトの登録名

$src(オプション):スクリプトのURL

$deps(オプション):登録するスクリプトが依存する関数をハンドル名で指定する

$ver(オプション):スクリプトのバージョン。キャッシュ時に参照されます。

$footer(オプション):true にセットするとheadではなく</body>の直前に出力されます。後から読み込みたいスクリプトを登録するときに使用します。

wp_enqueue_script()の使用例

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script(
        'prism-js',
        get_stylesheet_directory_uri(). '/js/prism.js',
        "",
        202004251415,
        true,
    );
});

この例ではJavaScriptをフッターで読み込むために $footertrue を指定しています。JavaScriptを head で読み込むとページの表示が遅れる場合はこのようにするとよいでしょう。

wp_register_script()

function wp_register_script(
    $handle,
    $src,
    $deps = array(),
    $ver = \false,
    $in_footer = \false
)

書き方は上記の wp_enqueue_script() と殆ど同じです。wp_register_script() はスクリプトの登録だけを行うので wp_enqueue_script() を使って後から好きなタイミングで実行することができます。

CSSの登録

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

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

CSSの登録だけ行いたい場合は wp_register_style() を使用します。

wp_enqueue_style()

function wp_enqueue_style(
    $handle,
    $src = '',
    $deps = array(),
    $ver = \false,
    $media = 'all'
)

$handle:スタイルシートの登録名

$src(オプション):スクリプトのURL

$deps(オプション):登録するスクリプトが依存する関数をハンドル名で指定する

$ver(オプション):スクリプトのバージョン。キャッシュ時に参照されます。

$media(オプション):メディア属性を指します。

wp_enqueue_style()の使用例

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

$ver202004281200 のような数字で指定してもかまいませんがこの場合スタイルシートの更新時に手動で値を変えないとCSSが再キャッシュされない可能性があります。

この例ではPHPの date() を使用して自動で日付が更新されるようにしました。CSSは更新頻度が高いので自動更新にしておくと編集時に楽になりますよ。

【WordPress】CSS編集時に自動で再キャッシュさせる方法
Web制作で編集したCSSをブラウザに反映させるためにキャッシュクリアしている人に自動でサーバーからCSSを再読み込みさせる方法を紹介します。再キャッシュの自動化で無駄な手間を省きWeb制作を楽にしましょう。

wp_register_style()

function wp_register_style(
    $handle,
    $src,
    $deps = array(),
    $ver = \false,
    $media = 'all'
)

wp_register_style() はスタイルシートの登録だけ行うためこれだけではCSSは反映されません。CSSを反映さるタイミングで wp_enqueue_style() を使い適用させます。

まとめ

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

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

  • add_action() を使用し wp_enqueue_scripts へフックする。
  • JavaScriptの登録は wp_enqueue_script() を使用する。
  • CSSの登録は wp_enqueue_style() を使用する。
  • wp_enqueue_script()、wp_enqueue_style() は登録と実行の両方を行う。
  • 登録だけして後から実行したいときは wp_register_script()、wp_register_style() を使用する。