独自のJavaScriptやCSSを読み込ませる

  • 参照ページ ★WordPressテーマのCSSとJSをfunctions.phpで読み込む方法
  • 参照ページ WORDPRESS で CSS、JAVASCRIPT ファイルを読み込む正しい方法
  • 参照ページ 独自のCSSやJSを読み込む
  • 参照ページ JSやCSSを一元管理する

  • ディレクトリの指定

    get_template_directory_uri() 親テーマのディレクトリURI
    get_stylesheet_directory_uri() 子テーマのディレクトリURI

    サンプル


    詳細

    読み込むエリアにあわせて適切なフックを使用する

    wp_enqueue_scripts サイト公開側に読み込む場合に使用するフックです。
    login_enqueue_scripts ログイン画面に読み込む場合に使用するフックです。
    admin_enqueue_scripts 管理画面に読み込む場合に使用するフックです。

    上記フックは xxx_scripts という名前ですが、スクリプトだけでなくスタイルシートの読み込みにも使用されます。誤解を招き易い点なので注意してください。また、wp_print_scripts フック、wp_print_styles フックを使用している例を見かけますがこれらを使用することは誤りです。適切なフックを用いずにスタイルシートやスクリプトを読み込むことは不整合の原因となりますので、明確な意図がない限り行うべきではありません。

    スタイルシートを登録・読み込みキューに追加する

    wp_enqueue_style( $handle, $src, $deps, $ver, $media );

    $handle スタイルシートの識別名、ハンドル。
    $src スタイルシートの URL(オプション)
    $deps 依存スタイルシート識別名の配列(オプション)
    $ver バージョン文字列。クエリーストリングに付加される。(オプション)
    $media スタイルシートのメディア指定(オプション)

    スクリプトを登録・読み込みキューに追加する

    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

    $handle スクリプトの識別名、ハンドル。
    $src スクリプトの URL(オプション)
    $deps 依存スクリプト識別名の配列(オプション)
    $ver バージョン文字列。クエリーストリングに付加される。(オプション)
    $in_footer true とすることでスクリプトは の前のエリアで読み込まれる。デフォルトは false で の前のエリアで読み込まれる。(オプション)

    具体例

    子テーマのスタイルシートのあるディレクトリの URL を取得する場合は、get_template_directory_uri() ではなく、get_stylesheet_directory_uri() を使用する点に注意してください。

    WP_REGISTER_STYLE() と WP_REGISTER_SCRIPT() について

    wp_register_style() はスタイルシート、wp_register_script() はスクリプトの登録を行う単機能の関数で、これらだけではファイルは読み込みキューには追加されません。対して、wp_enqueue_style() はスタイルシート、wp_enqueue_script() はスクリプトの登録と読み込みキューへの追加を行うマルチ機能の関数です

    wp_enqueue_style()、wp_enqueue_script() で登録に必要なパラメーター($handle、$src)を設定している場合は、wp_register_style()、wp_register_script() は不要。
    wp_register_style()、wp_register_script() で事前に登録済みのファイルは、wp_enqueue_style()、wp_enqueue_script() においてハンドルのみで読み込みキューに追加可能。

    読み込み順序のコントロール

    ファイルは、wp_enqueue_style()、wp_enqueue_script() の実行順にキューに追加される。
    wp_register_style()、wp_register_script()、wp_enqueue_style()、wp_enqueue_script() の $deps パラメーターにあるファイルは先に読み込まれる。
    wp_register_script()、wp_enqueue_script() で $in_footer が true の場合は </body> の前のエリアで、そうでない場合は の前のエリアで読み込まれる。
    フックで呼ばれる関数の実行順序は add_action() の $priority で決まる。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です