WordPressでCSSやJavaScriptを読み込む場合、、フロントやエディター、管理画面など、読み込ませたい場所によって書き方が変わるため、ややこしいです。
場面ごとの読み込みの方法をまとめましたので、迷った際に参考になる記事です。
CSSを読み込む方法
フロントでCSSを読み込む
フロントでCSSを読み込むには、アクションフック wp_enqueue_scripts
を使用します。読み込みの記述が必要なのは、テーマにおける style.css
も例外ではありません。
- add_action(’wp_enqueue_scripts’, function () {
- wp_enqueue_style(
- 'font-awesome-free',
- 'https://use.fontawesome.com/releases/v5.8.2/css/all.css',
- [],
- '5.8.2'
- );
- });
リソース: 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を適用する方法
- add_action('admin_enqueue_scripts', function ($hook) {
- if ($hook !== 'edit.php') {
- return;
- }
- wp_enqueue_style(
- 'custom-editor-style',
- get_template_directory_uri() . '/editor-style.css'
- );
- });
- .editor-styles-wrapper { /* エディターのスコープ */
- /* ... */
- }
リソース: 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
文は不要です。
- add_action('enqueue_block_editor_assets', function () {
- wp_enqueue_style(
- 'custom-editor-style',
- get_template_directory_uri() . '/editor-style.css'
- );
- });
リソース: enqueue_block_editor_assets | Hook | WordPress Developer Resources
関数 add_editor_style()
を使用してCSSを適用する方法
この方法は、セレクタのスコープが自動で追加されることが特徴的です。純粋なCSSで開発を行う場合には特に恩恵を受けます。
- add_editor_style('editor-style.css');
- body { /* ... */ }
- p { /* ... */ }
管理画面では、次のように、自動的に置き換えらて読み込まれます。
- .editor-styles-wrapper { /* ... */ }
- .editor-styles-wrapper p { /* ... */ }
セレクタの先頭に .editor-styles-wrapper
が自動的に付加されるので、それを見越した記述が必要になります。
リソース: 関数リファレンス/add editor style
フロントとビジュアルエディター共通でCSSを読み込む(≧5.0.0)
フロントと管理画面のビジュアルエディターとに同じCSSを適用するなら、アクションフック enqueue_block_assets
を使用して、1回の記述で済ませることができます。ただし、WordPressのバージョンが5.0.0以降であることが必要です。
- add_action('enqueue_block_assets', function () {
- wp_enqueue_style(
- 'style-both',
- get_template_directory_uri() . '/style-both.css'
- );
- });
- /* フロントにもビジュアルエディターにも適用される。 */
リソース: enqueue_block_assets | Hook | WordPress Developer Resources
管理画面でCSSを読み込む
エディターに限らず、管理画面でCSSを読み込むには、アクションフック admin_enqueue_scripts
を使用します。
- add_action('admin_enqueue_scripts', function ($hook) {
- wp_enqueue_style(
- 'admin-style',
- get_template_directory_uri() . '/admin-style.css'
- );
- });
リソース: Plugin API/Action Reference/admin enqueue scripts
ログイン画面でCSSを読み込む
ログイン画面でCSSを読み込むには、アクションフック login_enqueue_scripts
を使用します。
- h1 { /* ... */ }
- [id="loginform"] { /* ... */ }
- [id="nav"] { /* ... */ }
- [id="backtoblog"] { /* ... */ }
- add_action('wp_enqueue_scripts', function () {
- wp_enqueue_script(
- 'code-prettify',
- 'https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js',
- [],
- null,
- true
- );
- });
リソース: Plugin API/Action Reference/login enqueue scripts
JavaScriptを読み込む方法
フロントでJavaScriptを読み込む
フロントでJavaScriptを読み込むには、CSS同様、アクションフック wp_enqueue_scripts
を使用します。
- add_action('wp_enqueue_scripts', function () {
- wp_enqueue_script(
- 'code-prettify',
- 'https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js',
- [],
- null,
- true
- );
- });
リソース: 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を読み込む方法
- add_action('admin_enqueue_scripts', function ($hook) {
- if ($hook !== 'edit.php') {
- return;
- }
- wp_enqueue_script(
- 'custom-editor-style',
- get_template_directory_uri() . '/editor-script.js',
- [],
- null,
- true
- );
- });
リソース: 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
文は不要です。
- add_action('enqueue_block_editor_assets', function () {
- wp_enqueue_script(
- 'editor-script',
- get_template_directory_uri() . '/editor-script.js',
- [],
- null,
- true
- );
- });
リソース: enqueue_block_editor_assets | Hook | WordPress Developer Resources
フロントとエディター共通でJavaScriptを読み込む(≧5.0.0)
フロントと管理画面のエディターとに同じJavaScriptを読み込むなら、アクションフック enqueue_block_assets
を使用して、1回の記述で済ませることができます。ただし、WordPressのバージョンが5.0.0以降であることが必要です。
- add_action('enqueue_block_assets', function () {
- wp_enqueue_script(
- 'script-both',
- get_template_directory_uri() . '/script-both.js',
- [],
- null,
- true
- );
- }
リソース: enqueue_block_assets | Hook | WordPress Developer Resources
管理画面でJavaScriptを読み込む
エディターに限らず、管理画面でJavaScriptを読み込むには、アクションフック admin_enqueue_scripts
を使用します。
- add_action('admin_enqueue_scripts', function ($hook) {
- wp_enqueue_script(
- 'admin-script',
- get_template_directory_uri() . '/admin-script.js',
- [],
- null,
- true
- );
- });
リソース: Plugin API/Action Reference/admin enqueue scripts
ログイン画面でJavaScriptを読み込む
ログイン画面でスクリプトを読み込むには、アクションフック login_enqueue_scripts
を使用します。
- add_action('login_enqueue_scripts', function () {
- wp_enqueue_script(
- 'login-script',
- get_template_directory_uri() . '/login-script.js',
- [],
- null,
- true
- );
- });
リソース: Plugin API/Action Reference/login enqueue scripts
まとめ
これまでに説明した内容を表にまとめました。
CSS | JavaScript | |
---|---|---|
フロント | wp_enqueue_scripts | wp_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_scripts | admin_enqueue_scripts |
ログイン画面 | login_enqueue_scripts | login_enqueue_scripts |