2026年8月15日

WordPressのCode Mirror（コードエディタ）を使う方法

プラグイン関連

はじめに

CodeMirrorは、ブラウザ上でプログラムコードを編集するための優れたJavaScriptライブラリです。WordPressでの使用により、テーマやプラグインのカスタマイズがより簡単に、効果的に実現できます。

CodeMirrorは非常に柔軟性があり、多くの設定オプションと拡張機能を持っています。これを使用することで、CSSやJSなどのコードエディタを改善し、ユーザーインターフェースも向上させることができます。

症状・背景

このテーマが必要になる主な場面:

テーマのカスタマイズ設定ページで高品質なコードエディタを提供したい場合
カスタムポストタイプやカスタムフィールドにプログラムコードの入力を追加したい場合
CSSやJavaScriptを直接編集するためのユーザーインターフェースが必要な場合

手順・設定方法

ステップ1: CodeMirrorのインストールと初期化

# WordPressテーマのフォルダにcode-mirrorというサブフォルダを作成します。
mkdir -p wp-content/themes/your-theme/code-mirror

# CodeMirrorのJavaScriptファイルをダウンロードし、code-mirrorディレクトリ内に配置します。
wget https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js
mv codemirror.min.js wp-content/themes/your-theme/code-mirror/

# サーバー上にスタイルシートを配置し、必要に応じてテーマのfunctions.phpで読み込みます。
wget https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css
mv codemirror.min.css wp-content/themes/your-theme/code-mirror/

# functions.phpファイル内でCodeMirrorを読み込むように設定します。
wp_enqueue_script( 'codemirror', get_template_directory_uri() . '/code-mirror/codemirror.min.js', array(), null, true );
wp_enqueue_style( 'codemirror', get_template_directory_uri() . '/code-mirror/codemirror.min.css' );

# WordPressの管理画面でCodeMirrorを使用するためのJavaScriptを追加します。
add_action('admin_footer', function(){
    echo '<script src="' . esc_url(get_template_directory_uri()) . '/code-mirror/codemirror.min.js"></script>';
    echo '<link rel="stylesheet" href="' . esc_url(get_template_directory_uri()) . '/code-mirror/codemirror.min.css">';
});

ステップ2: CodeMirrorの設定とカスタマイズ

# テーマのカスタマイザーでCodeMirrorを有効にするCSSやJavaScriptを読み込みます。
function my_theme_customizer($wp_customize) {
    $wp_customize->add_setting('my_theme_code', array(
        'default' => '',
        'transport' => 'postMessage',
    ));

    $wp_customize->add_control(new WP_Customize_Control($wp_customize, 'my_theme_code', array(
        'label' => __('コードエディタ'),
        'section' => 'my_theme_section',
        'settings' => 'my_theme_code',
        'type' => 'textarea'
    )));

    // CodeMirrorの設定をカスタマイズします。
    $wp_customize->add_setting('code_mirror_theme', array(
        'default' => 'monokai',
    ));

    $wp_customize->add_control(new WP_Customize_Control($wp_customize, 'code_mirror_theme', array(
        'label' => __('テーマ'),
        'section' => 'my_theme_section',
        'settings' => 'code_mirror_theme',
        'type' => 'select',
        'choices' => array('monokai', 'material', 'solarized')
    )));

    // CodeMirrorの設定をカスタマイズします。
    $wp_customize->add_setting('code_mirror_mode', array(
        'default' => 'javascript',
    ));

    $wp_customize->add_control(new WP_Customize_Control($wp_customize, 'code_mirror_mode', array(
        'label' => __('モード'),
        'section' => 'my_theme_section',
        'settings' => 'code_mirror_mode',
        'type' => 'select',
        'choices' => array('javascript', 'htmlmixed', 'css')
    )));
}

add_action( 'customize_register', 'my_theme_customizer' );

ステップ3: CodeMirrorとWordPressのカスタムフィールドとの統合

# カスタムフィールドでCodeMirrorを使用するための設定を行います。
function my_custom_field_code_mirror($meta_box) {
    wp_enqueue_script( 'code-mirror-js', get_template_directory_uri() . '/js/code-mirror.js' );
    wp_enqueue_style( 'code-mirror-css', get_template_directory_uri() . '/css/code-mirror.css' );

    // カスタムフィールドのHTMLを生成します。
    $html = '<textarea id="custom-field-code" name="' . esc_attr($meta_box['id']) . '">' . esc_textarea(get_post_meta(get_the_ID(), $meta_box['id'], true)) . '</textarea>';
    echo $html;
}

add_action('admin_enqueue_scripts', function(){
    wp_enqueue_script( 'code-mirror-js', get_template_directory_uri() . '/js/code-mirror.js' );
    wp_enqueue_style( 'code-mirror-css', get_template_directory_uri() . '/css/code-mirror.css' );
});

// カスタムフィールドのコールバック関数にCodeMirrorを統合します。
add_action('save_post', function($post_id){
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
        return;

    $meta_box = get_post_meta($post_id, 'code_mirror_settings', true);
    update_post_meta($post_id, $meta_box['id'], wp_kses($_POST[$meta_box['id']], array()));
});

ステップ4: CodeMirrorのトラブルシュートと監視

# JavaScriptエラーをログに記録するための設定を行います。
function log_js_errors($wp_error) {
    error_reporting(E_ALL);
    ini_set('display_errors', 1);

    // JavaScriptエラーをログに出力します。
    add_action( 'admin_head', function(){
        echo '<script>console.error = function(msg){ jQuery.post("' . admin_url('admin-ajax.php') . '", {action: "log_js_error", error_msg: msg}); };</script>';
    });

    // AJAXハンドラーを追加します。
    add_action( 'wp_ajax_log_js_error', function(){
        if (isset($_POST['error_msg'])) {
            $error = sanitize_text_field($_POST['error_msg']);
            error_log($error);
        }
        wp_die();
    });
}

add_filter('wp_doing_ajax', '__return_true');
log_js_errors(new WP_Error());

注意事項

CodeMirrorの設定を変更する際は、テスト環境で確認すること。
JavaScriptやCSSファイルが正しく読み込まれていることを確認すること。
カスタムフィールドでの使用時にセキュリティ対策を施すこと。
サーバーのメモリとパフォーマンスに影響を与える可能性があるため、適切な設定を行うこと。

まとめ

1. CodeMirrorのインストール: WordPressテーマやプラグイン内で必要に応じてCodeMirrorを導入します。

2. カスタマイズ: 適切な設定とテーマを選択し、コードエディタを効果的に使用します。

3. 統合: カスタムフィールドや他のWordPress機能との連携を実現します。

4. トラブルシュート: JavaScriptエラーのログを取得して問題解決に役立てます。

5. パフォーマンス管理: CodeMirrorを使用した際のサーバー負荷を監視し、適切な設定を行います。

Post Views: 5