ワードプレスの管理画面に追加したメニューで「保存しました」を表示させる方法

ワードプレスの管理画面内では保存ボタンを押すと「保存しました」というメッセージが表示されます。しかし後から独自メニューとして追加した画面では保存ボタンを押してもメッセージは表示させません。メッセージが出なくても保存されていれば問題ありませんが表示された方がユーザーにとってはわかりやすいです。

管理画面に追加したメニューで保存しましたを表示させる方法

ワードプレスでは管理画面内で表示させるメッセージのhtmlが準備されています。

<div id="settings_updated" class="updated notice is-dismissible"><p><strong>設定を保存しました</strong></p></div>

設定を保存しましたのメッセージ

上記のhtmlを読み込ませるだけで以下のデザインでメッセージが表示されます。

条件分岐として書く方法

あとは保存が実行されたタイミングでif文を設定して上記のhtmlを表示させればOK。もしinputなどでnameとして値を受け取っている場合はissetなどで以下のような条件分岐を書いて実行させるとシンプルです。

if(isset($_REQUEST['TEST'])){
	echo '<div id="settings_updated" class="updated notice is-dismissible"><p><strong>設定を保存しました</strong></p></div>';
}

update_optionで使う条件分岐

独自メニューを追加する場面では「add_option(‘sample’);」などで値を持たせているので、保存時に下記のような条件分岐で「update_option」を実行しているはずです。update_optionが実行されるということは値が上書き保存されているのと同じ意味なので同じ条件で「設定を保存しました」を実行すればOKです。

if(isset($_REQUEST['TEST'])){
	update_option('sample', $_REQUEST['sample']);
}

保存とメッセージ出力を同時で行う

まとめて書くと以下でもOKです。

//まとめて書く場合
if(isset($_REQUEST['TEST'])){
	update_option('sample', $_REQUEST['sample']);
	echo '<div id="settings_updated" class="updated notice is-dismissible"><p><strong>設定を保存しました</strong></p></div>';
}

ちなみにclassの一部を省くと右端にある「×」アイコンが非表示になります。

<div id="settings_updated" class="updated notice"><p><strong>設定を保存しました</strong></p></div>

まとめ

保存メッセージを出すだけなら厳密な判断は必要ありません。厳密な判断とは「もし値が変更されていない状態で保存された場合」に「保存しました」を出さないなどの考慮です。仮に保存前と保存後が同じ値だったとしてもユーザーは「保存したいのでボタンを押す」わけなので、ボタンを押す＝メッセージを出すでOKです。

エンジニア目線では経験が豊富になればなるほど複雑なロジックを実装したくなりますが何より現実で操作している『ユーザーの目線』がもっとも大切です。初心を忘れず条件分岐はシンプルに仕上げましょう。