ワードプレスのwp_enqueue_editor関数の使用方法・解説

概要

wp_enqueue_editor関数は、エディタ用のスタイルシートおよびJavaScriptを出力するために使用されます。この関数は主に、カスタマイズした投稿タイプやカスタムフィールドを持つプラグインやテーマの開発時に活用され、ユーザー体験を向上させるためにエディタのインターフェースを拡張する際に使われます。特に、以下のような状況で役立ちます。

1. カスタムメタボックスを作成する際
2. ビジュアルエディタの機能を強化する時
3. 特定のエディタスタイルを適用する必要がある場合
4. エディタに独自のスクリプトやスタイルを追加する時
5. 特定のエディタ機能（例えば、タクソノミーの追加）を実装する際
6. プレビュー機能をサポートする場合
7. 特定のユーザー権限によるエディタ機能の制限時
8. エディタのUIをカスタマイズしたい場合

構文

wp_enqueue_editor();

パラメータ

wp_enqueue_editor関数には引数はありません。

戻り値

この関数は、エディタ用のスタイルシートとJavaScriptを出力するための動作を行い、特に戻り値はありません。

使用可能なワードプレスバージョン

wp_enqueue_editor関数は、WordPress 3.1以降で使用可能です。

コアファイルのパス

wp_enqueue_editor関数は、WordPressのコアで以下のファイルに含まれています：

wp-includes/script-loader.php

関連する関数

以下の関数も関連しています：wp_enqueue_scripts、wp_add_inline_script

この関数のアクションでの使用可能性

アクション	使用可能性
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

サンプル 1: 基本的なエディタの読み込み

このコードは、WordPressエディタを読み込むための最低限の実装を示しています。

function my_custom_editor_init() {
    wp_enqueue_editor();
}
add_action('admin_enqueue_scripts', 'my_custom_editor_init');

引用元: https://developer.wordpress.org/reference/functions/wp_enqueue_editor/

サンプル 2: カスタムエディタスタイルの適用

カスタムスタイルシートをエディタに追加します。

function my_custom_editor_styles() {
    wp_enqueue_editor();
    add_editor_style('my-custom-editor-style.css');
}
add_action('admin_init', 'my_custom_editor_styles');

引用元: https://developer.wordpress.org/reference/functions/add_editor_style/

サンプル 3: JavaScriptの追加

エディタにカスタムJavaScriptを追加する例です。

function my_editor_scripts() {
    wp_enqueue_editor();
    wp_enqueue_script('my_custom_script', get_template_directory_uri() . '/js/my_custom_script.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'my_editor_scripts');

引用元: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

サンプル 4: ビジュアルエディタの有効化

このコードは、特定の条件でビジュアルエディタを有効化します。

function enable_visual_editor() {
    if (current_user_can('edit_posts')) {
        wp_enqueue_editor();
    }
}
add_action('admin_init', 'enable_visual_editor');

引用元: https://developer.wordpress.org/reference/functions/current_user_can/

サンプル 5: CKEditorの統合

カスタムエディタを統合する方法を示しています。

function integrate_custom_editor() {
    wp_enqueue_editor();
    // CKEditorのスクリプトを追加
    wp_enqueue_script('ckeditor', 'https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js', array(), null, true);
}
add_action('admin_enqueue_scripts', 'integrate_custom_editor');

引用元: https://ckeditor.com/docs/ckeditor4/latest/quickstart.html