add_to_home_screen

【WordPress】CSSとJavaScriptを読み込む方法まとめ

WordPressでCSSやJavaScriptを読み込む場合、、フロントやエディター、管理画面など、読み込ませたい場所によって書き方が変わるため、ややこしいです。

場面ごとの読み込みの方法をまとめましたので、迷った際に参考になる記事です。

目次

CSSを読み込む方法

フロントでCSSを読み込む

フロントでCSSを読み込むには、アクションフック wp_enqueue_scripts を使用します。読み込みの記述が必要なのは、テーマにおける style.css も例外ではありません。

フロントにFree版 Font Awesome を読み込む例
  1. add_action(’wp_enqueue_scripts’, function () {
  2.     wp_enqueue_style(
  3.         'font-awesome-free',
  4.         'https://use.fontawesome.com/releases/v5.8.2/css/all.css',
  5.         [],
  6.         '5.8.2'
  7.     );
  8. })；

リソース: Plugin API/Action Reference/wp enqueue scripts

ビジュアルエディターでCSSを読み込む

ビジュアルエディター（ブロックエディターまたはクラシックエディター）にCSSを適用するには、3つの方法があります。

  • アクションフック admin_enqueue_scripts を使う方法
  • アクションフック enqueue_block_editor_assets を使う方法（WordPress 5.0.0 以降）
  • 関数 add_editor_style() を使う方法

個人的には、専用関数を使う方法をお勧めします。特に、SassなどのCSSプリプロセッサを使用しないで開発を行う場合には便利な方法です（理由は後述）。

アクションフック admin_enqueue_scripts を使用してCSSを適用する方法

アクションフック「admin_enqueue_scripts」でエディターにCSSを適用する例（テーマの場合）
  1. add_action('admin_enqueue_scripts', function ($hook) {
  2.     if ($hook !== 'edit.php') {
  3.         return;
  4.     }
  5.     wp_enqueue_style(
  6.         'custom-editor-style',
  7.         get_template_directory_uri() . '/editor-style.css'
  8.     );
  9. });
editor-style.css
  1. .editor-styles-wrapper {  /* エディターのスコープ */
  2.   /* ... */
  3. }

リソース: Plugin API/Action Reference/admin enqueue scripts

アクションフック enqueue_block_editor_assets を使用してCSSを適用する方法（≧5.0.0）

アクションフック enqueue_block_editor_assets は、WordPress のバージョンが5.0.0以降だと使用できます。

admin_enqueue_scripts との違いは、「エディター画面でのみ読み込まれる」ことです。よって、if 文は不要です。

アクションフック「enqueue_block_editor_assets」でエディターにCSSを適用する例（テーマの場合）
  1. add_action('enqueue_block_editor_assets', function () {
  2.     wp_enqueue_style(
  3.         'custom-editor-style',
  4.         get_template_directory_uri() . '/editor-style.css'
  5.     );
  6. });

リソース: enqueue_block_editor_assets | Hook | WordPress Developer Resources

関数 add_editor_style() を使用してCSSを適用する方法

この方法は、セレクタのスコープが自動で追加されることが特徴的です。純粋なCSSで開発を行う場合には特に恩恵を受けます。

関数「add_editor_style()」でビジュアルエディターにCSSを適用する例
  1. add_editor_style('editor-style.css');
editor-style.css
  1. body { /* ... */ }
  2. p { /* ... */ }

管理画面では、次のように、自動的に置き換えらて読み込まれます。

自動的に置き換えられた editor-style.css
  1. .editor-styles-wrapper { /* ... */ }
  2. .editor-styles-wrapper p { /* ... */ }

セレクタの先頭に .editor-styles-wrapper が自動的に付加されるので、それを見越した記述が必要になります。

リソース: 関数リファレンス/add editor style

フロントとビジュアルエディター共通でCSSを読み込む（≧5.0.0）

フロントと管理画面のビジュアルエディターとに同じCSSを適用するなら、アクションフック enqueue_block_assets を使用して、1回の記述で済ませることができます。ただし、WordPressのバージョンが5.0.0以降であることが必要です。

フロントとビジュアルエディタ共通のCSSを適用する例（テーマの場合）
  1. add_action('enqueue_block_assets', function () {
  2.     wp_enqueue_style(
  3.         'style-both',
  4.         get_template_directory_uri() . '/style-both.css'
  5.     );
  6. });
style-both.css
  1. /* フロントにもビジュアルエディターにも適用される。 */

リソース: enqueue_block_assets | Hook | WordPress Developer Resources

管理画面でCSSを読み込む

エディターに限らず、管理画面でCSSを読み込むには、アクションフック admin_enqueue_scripts を使用します。

管理画面にCSSを適用する例（テーマの場合）
  1. add_action('admin_enqueue_scripts', function ($hook) {
  2.     wp_enqueue_style(
  3.         'admin-style',
  4.         get_template_directory_uri() . '/admin-style.css'
  5.     );
  6. });

リソース: Plugin API/Action Reference/admin enqueue scripts

ログイン画面でCSSを読み込む

ログイン画面でCSSを読み込むには、アクションフック login_enqueue_scripts を使用します。

ログイン画面にCSSを適用する例（テーマの場合）
  1. h1 { /* ... */ }
  2. [id="loginform"] { /* ... */ }
  3. [id="nav"] { /* ... */ }
  4. [id="backtoblog"] { /* ... */ }
login-style.css
  1. add_action('wp_enqueue_scripts', function () {
  2.     wp_enqueue_script(
  3.         'code-prettify',
  4.         'https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js',
  5.         [],
  6.         null,
  7.         true
  8.     );
  9. });

リソース: Plugin API/Action Reference/login enqueue scripts

JavaScriptを読み込む方法

フロントでJavaScriptを読み込む

フロントでJavaScriptを読み込むには、CSS同様、アクションフック wp_enqueue_scripts を使用します。

フロントにGoogle code-prettify を読み込む例
  1. add_action('wp_enqueue_scripts', function () {
  2.     wp_enqueue_script(
  3.         'code-prettify',
  4.         'https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js',
  5.         [],
  6.         null,
  7.         true
  8.     );
  9. });

リソース: Plugin API/Action Reference/wp enqueue scripts

エディターでJavaScriptを読み込む

エディターでJavaScriptを読み込むには、2つの方法があります。

  • アクションフック admin_enqueue_scripts を使う方法
  • アクションフック enqueue_block_editor_assets を使う方法（WordPress 5.0.0 以降）

アクションフック admin_enqueue_scripts を使用してJavaScriptを読み込む方法

アクションフック「admin_enqueue_scripts」を使用してエディターでJavaScriptを読み込む例（テーマの場合）
  1. add_action('admin_enqueue_scripts', function ($hook) {
  2.     if ($hook !== 'edit.php') {
  3.         return;
  4.     }
  5.     wp_enqueue_script(
  6.         'custom-editor-style',
  7.         get_template_directory_uri() . '/editor-script.js',
  8.         [],
  9.         null,
  10.         true
  11.     );
  12. });

リソース: Plugin API/Action Reference/admin enqueue scripts

アクションフック enqueue_block_editor_assets を使用してJavaScriptを読み込む方法（≧5.0.0）

アクションフック enqueue_block_editor_assets は、WordPress のバージョンが5.0.0以降だと使用できます。

admin_enqueue_scripts との違いは、「エディター画面でのみ読み込まれる」ことです。よって、if 文は不要です。

アクションフック「enqueue_block_editor_assets」を使用してエディターにJavaScriptを読み込む例（テーマの場合）
  1. add_action('enqueue_block_editor_assets', function () {
  2.     wp_enqueue_script(
  3.         'editor-ｓｃript',
  4.         get_template_directory_uri() . '/editor-script.js',
  5.         [],
  6.         null,
  7.         true
  8.     );
  9. });

リソース: enqueue_block_editor_assets | Hook | WordPress Developer Resources

フロントとエディター共通でJavaScriptを読み込む（≧5.0.0）

フロントと管理画面のエディターとに同じJavaScriptを読み込むなら、アクションフック enqueue_block_assets を使用して、1回の記述で済ませることができます。ただし、WordPressのバージョンが5.0.0以降であることが必要です。

フロントとエディタ共通のJavaScriptを読み込む例（テーマの場合）
  1. add_action('enqueue_block_assets', function () {
  2.     wp_enqueue_script(
  3.         'ｓｃript-both',
  4.         get_template_directory_uri() . '/script-both.js',
  5.         [],
  6.         null,
  7.         true
  8.     );
  9. }

リソース: enqueue_block_assets | Hook | WordPress Developer Resources

管理画面でJavaScriptを読み込む

エディターに限らず、管理画面でJavaScriptを読み込むには、アクションフック admin_enqueue_scriptsを使用します。

管理画面でJavaScriptを読み込む例（テーマの場合）
  1. add_action('admin_enqueue_scripts', function ($hook) {
  2.     wp_enqueue_script(
  3.         'admin-ｓｃript',
  4.         get_template_directory_uri() . '/admin-script.js',
  5.         [],
  6.         null,
  7.         true
  8.     );
  9. });

リソース: Plugin API/Action Reference/admin enqueue scripts

ログイン画面でJavaScriptを読み込む

ログイン画面でスクリプトを読み込むには、アクションフック login_enqueue_scripts を使用します。

ログイン画面でJavaScriptを読み込む例（テーマの場合）
  1. add_action('login_enqueue_scripts', function () {
  2.     wp_enqueue_script(
  3.         'login-script',
  4.         get_template_directory_uri() . '/login-script.js',
  5.         [],
  6.         null,
  7.         true
  8.     );
  9. });

リソース: Plugin API/Action Reference/login enqueue scripts

まとめ

これまでに説明した内容を表にまとめました。

CSSJavaScript
フロントwp_enqueue_scriptswp_enqueue_scripts
ビジュアルエディターenqueue_block_editor_assets (≧5.0.0)
または
add_editor_style()		enqueue_block_editor_assets (≧5.0.0)
フロントとビジュアルエディター共通enqueue_block_assets (≧5.0.0)enqueue_block_assets (≧5.0.0)
管理画面
（エヂター含む）		admin_enqueue_scriptsadmin_enqueue_scripts
ログイン画面login_enqueue_scriptslogin_enqueue_scripts