Mind Elixir × WordPress 自作プラグイン:5分ごと自動保存機能を追加


本記事では、WordPress 管理画面にマインドマップを組み込む「Mind Elixir Admin」プラグインに、自動保存機能を追加する手順を解説します。PHP 側では「自動保存を有効にする」チェックボックスを設置し、JavaScript 側で 5 分ごとに既存の保存ボタン(#save-map-button
)を自動クリックさせる方法を紹介します。
はじめに
-
背景・目的
-
過去に作成したWordPress 管理画面でのマインドマッププラグインの使い勝手を向上させるため、自動保存機能を実装したい。
WordPress管理画面にマインドマップで記事アイデアをメモするプラグインを作ってみた
WordPress管理画面で複数マインドマップを保存・切替・削除するプラグインに拡張してみた -
手動保存と同じ処理を自動で呼び出すことで、ユーザー操作を減らしデータ消失を防止。
-
実装の概要
-
PHP 側
-
チェックボックスを出力し、
checked()
でデフォルト ON に設定。
-
-
JavaScript 側
setInterval()
で 5 分ごとに$('#save-map-button').trigger('click')
を実行。-
ボタンの通常クリック処理をそのまま呼び出し、Ajax 保存を行う。
コード解説ポイント
-
シンプル再利用
手動・自動どちらも同じ 保存ボタンのクリックイベント を流用することで、メンテナンス性を向上。 -
ユーザー設定反映
チェックボックスでフラグ制御し、JS 側で簡単に on/off 切り替え可能。
コード
コードはgithubで公開中です。
5分毎に自動保存する機能の追加 · bomura/wp-mind-elixir-admin@638433f
まとめ・今後の拡張案
-
本手法により、5 分ごとに自動でマインドマップを保存できるようになりました。
-
拡張案
-
保存間隔を管理画面で入力可能にする
-
保存完了通知をトースト表示に変更
-
ローカルストレージバックアップとの併用
-
ぜひこの実装をベースに、より快適なマインドマップ編集環境を構築してみてください!