2026年10月2日

WordPressのCKEditor 5を使う方法

プラグイン関連

はじめに

WordPressのエディタは長年にわたってTinyMCEを使用してきましたが、現在ではより洗練されたCKEditor 5が利用可能となっています。この記事ではCKEditor 5をWordPressで使用する方法から設定までを詳しく紹介します。

症状・背景

WordPressのエディタ機能を強化したい
より直感的なインターフェースが必要
表示と編集が一貫性を持つようにしたい
編集中のライブプレビュー機能を利用したい

手順・設定方法

ステップ1: CKEditor 5プラグインをインストールする

# WordPress管理画面にログインします。
wp admin login --username=admin --password=your_password

# CKEditor 5プラグインの最新版をインストールします。
wp plugin install ckeditor-5-wordpress-plugin --activate

ステップ2: CKEditor 5の設定を行う

# WordPressの設定画面を開きます。
wp option update ckeditor_5_settings '{ "default_language": "ja", "toolbar": [ { "name": "tools", "items": ["bold", "italic"] }, { "name": "links", "items": ["link", "unlink"] } ] }'

ステップ3: カスタムスタイルとショートコードを追加

# WordPressのテーマディレクトリにあるfunctions.phpファイルを開きます。
nano wp-content/themes/your-theme/functions.php

# CKEditor 5にカスタムスタイルやショートコードを追加するための関数を追記します。
add_filter( 'ckeditor_5_editor_config', function( $config ) {
    $config['styles'] = [
        [ 'name' => 'Example Style', 'element' => 'p', 'attributes' => [ 'class' => 'example-class' ] ],
    ];
    return $config;
} );

ステップ4: パフォーマンスとセキュリティを確認

# CKEditor 5の設定が問題なく動作しているかチェックします。
wp option get ckeditor_5_settings

# セキュリティ設定を確認し、必要に応じて更新します。
wp security check

注意事項

使用する前に必ずプラグインの最新バージョンを使用すること。
環境によっては追加のCSSやJavaScriptが必要となる場合があります。
セキュリティ上の注意点としては、プラグインが信頼できるソースからダウンロードされること。
パフォーマンスを最適化するためには、不要な機能を無効にすること。

まとめ

1. エディタのインストール: CKEditor 5プラグインをWordPressでインストールします。

2. 基本設定: CKEditor 5の言語やツールバーの設定を行います。

3. カスタマイズ: カスタムスタイルやショートコードを追加することで独自性を持たせます。

4. パフォーマンスとセキュリティ: 環境に適した最適化を行い、安全な設定を確認します。

Post Views: 2