WordPressでスタイル・スクリプトファイルを読み込む方法まとめ（CSS・JavaScript）

2021年10月27日

目次非表示

フロントエンドでスタイル・スクリプトを読み込む

フロントエンドでスタイルまたはスクリプトを読み込みたい場合、wp_enqueue_scriptsフックを利用します。scriptsとありますが、styleを読み込むこと際にも利用します。

ファイルの読み込みには、関数wp_enqueue_style及びを使います。

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

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

次にスタイル及びスクリプトを読み込むためのコード例を記載します。

add_action('wp_enqueue_scripts', function() {

  // CSS
  wp_enqueue_style('main-style', get_stylesheet_directory_uri().'/style.css', [], '1.0');
  
  // JavaScript
  wp_enqueue_script('main-script', get_stylesheet_directory_uri().'/js/main.css', ['jquery'], '1.0', true);
  
});

どちらの関数の第3引数には依存関係を指定できます。

管理画面でスタイル・スクリプトを読み込む

管理画面でのみ読み込みたいスタイルまたはスクリプトがある場合、admin_enqueue_scriptsを利用します。

グローバル変数を利用することで、特定のページや投稿タイプでのみ読み込むことができます。

add_action('admin_enqueue_scripts', function() {
  global $pagenow, $post_type;

  // 例: $hook == 'edit.php'
  if ( $pagenow != 'edit.php' ) {
    return;
  }
  // 例: $post_type == 'post'
  if ( $post_type != 'post' ) {
    return;
  }
  
  // wp_enqueue_style または wp_enqueue_script を実行
  wp_enqueue_style('admin-style', get_stylesheet_directory_uri().'/admin-style.css', [], '1.0');
});

ログイン画面でスタイル・スクリプトを読み込む

admin_enqueue_scriptsは、ログインページでは実行されません。ログインページでは、login_enqueue_scriptsを実行し、スタイルまたはスクリプトを読み込む必要があります。

add_action('login_enqueue_scripts', function() {
  // wp_enqueue_style または wp_enqueue_script を実行
  wp_enqueue_style('login-style', get_stylesheet_directory_uri().'/login-style.css', [], '1.0');
});

参考：