ツールバーに「エディター切替」ボタンを追加する方法

はじめに

WordPressのテーマ「Cocoon」を利用していると、状況に応じ、Gutenbergエディターとクラシックエディターを切り替えたくなる場面があります。
通常は管理画面の設定ページまで移動して変更する必要がありますが、テストなどで頻繁に切り替えたい場合は手間がかかります。

そこで、ツールバーに「エディター切替」ボタンを追加し、簡単に切り替えられるようにします。

この記事では、その方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// ツールバーにメニュー追加
add_action('admin_bar_menu', function ($wp_admin_bar) {
  // 権限チェック
  if (!current_user_can('manage_options')) {
    return;
  }

  // 現在のCocoonエディター設定を取得
  $is_gutenberg_enabled = (bool) is_gutenberg_editor_enable();

  // 切り替え後の状態を設定
  $next_status = $is_gutenberg_enabled ? 0 : 1;

  // 表示ラベルを設定
  $label = $is_gutenberg_enabled ? 'エディター：Gutenberg' : 'エディター：クラシック';

  // 現在のページURLにパラメータを設定
  $editor_url = add_query_arg(['editor_mode' => $next_status]);

  // ツールバーにメニューを登録
  $wp_admin_bar->add_node([
    'id'    => 'editor-mode',
    'title' => esc_html($label),
    'href'  => wp_nonce_url($editor_url, 'editor_mode_action', 'editor_mode_nonce'),
    'meta'  => [
      'title' => 'Cocoonのエディター設定を切り替える',
    ],
  ]);
}, 9999);


// 管理画面からの設定データ更新
add_action('init', function () {
  if (!isset($_GET['editor_mode'])) {
    return;
  }

  // nonceチェック
  if (!isset($_GET['editor_mode_nonce']) || !wp_verify_nonce(sanitize_text_field(wp_unslash($_GET['editor_mode_nonce'])), 'editor_mode_action')) {
    wp_die('セキュリティチェックに失敗しました。');
  }

  // 権限チェック
  if (!current_user_can('manage_options')) {
    wp_die('権限がありません。');
  }

  // 切り替え後の値を取得
  $editor_mode = (int) $_GET['editor_mode'];
  $editor_mode = $editor_mode ? 1 : 0;

  // Cocoonの設定を更新
  set_theme_mod(OP_GUTENBERG_EDITOR_ENABLE, $editor_mode);

  wp_safe_redirect(remove_query_arg(['editor_mode', 'editor_mode_nonce']));
  exit;
});

さいごに

今回紹介した方法を使えば、WordPressの管理画面の奥深くにある設定ページへ移動することなく、ツールバーから直接Cocoonのエディターモードをワンクリックで切り替えることができるようになります。
検証作業などでGutenbergとクラシックエディターを頻繁に行き来するサイト管理者やブロガーの皆様にとって、日々の編集作業を効率化する非常に便利なカスタマイズです。