Mind Elixir × WordPress 自作プラグイン：複数マインドマップを保存・切替・削除機能を追加
以前、WordPress 管理画面で複数のマインドマップを作成・切り替え・削除できるようにするプラグインを自作しました(WordPress管理画面にマインドマップで記事アイデアをメモするプラグインを作ってみた)。今回は、マインドマップの複数管理機能を追加しました。プルダウンから topic を選んで読み込み、JSON データを wp_options にプレフィックス付きで保存、さらには削除ボタンや確認ダイアログ、新規追加ボタンも備えたフル機能版です。
最終仕様
-
プルダウンにマインドマップの topic を表示
-
mind_elixir_map_data_というプレフィックスを付けて、wp_optionsに保存 -
削除ボタンの追加
-
削除ボタンを押した際は、ポップアップで確認
-
マップの新規追加ボタン
実装のポイント
プルダウンで topic を管理
-
サーバー側で
SELECT option_name, option_value … WHERE option_name LIKE 'mind_elixir_map_data_%'を実行し、JSON をデコード -
ルートノードの
nodeData.topicを抽出し、<option>の表示テキストに設定 -
JavaScript 側では AJAX で一覧を取得し、
$('#mea-map-selector').empty().append(...)で動的に再描画
保存時にプレフィックス付きで option 登録
-
保存ボタン押下時、
mind.getData()で得た JSON を文字列化 -
プレフィックス＋現在日時（
YmdHis）でoption_nameを生成し、update_option()で永続化
削除ボタンと確認ダイアログ
-
ボタン押下で
window.confirm()で確認ポップアップ -
OK なら AJAX で
delete_option()を実行し、成功時に一覧を再描画
新規マップ追加ボタン
-
「New Mind Map」固定の topic で
MindElixir.new()からデータ生成 -
プルダウンに新規オプションを追加し、即ロード・即保存候補に
まとめ
このプラグインでは、WordPress の wp_options を使ってマインドマップを簡単に保存・切り替え・削除できる管理画面を実装しました。
-
プルダウン：topic で一覧表示
-
保存：prefix＋日時でオプション名を自動生成
-
削除：確認ダイアログ付きで安全に削除
-
新規追加：ボタン一つで空のマップを生成
GitHub リポジトリも公開中ですので、ぜひ試してみてください！