ブログを集中してバーーっと書き進めた時に限って訪れる、保存せずに消えちゃうあの地獄。
「戻るボタン」や「ページ更新」のショートカットボタンに触れてしまったり、WordPressとかだと左メニューのどこかを間違えてクリックしてしまって別ページへ遷移しちゃったり。
集中して書ける時ほどこまめに保存することを忘れてしまい、ひと段落したところで集中が解けてこのミスをしてしまう。
書いた文章は全て水の泡。どれだけ泣き叫んでも、無慈悲に佇む純白の編集画面。
モチベーションは地の底へと失墜し、拗ねてポテチを食べてみても程よい塩気とともに虚しさが口の中に広がるのです。
そうして、暫くの時が過ぎ、結局残りの全気力を振り絞って再びモニターと向き合う。
地獄ですよね。
でもこれ、結構簡単に防げるの、知ってました？
「本当にこのページから離れますか？」の確認ダイアログを出す
新規投稿・ 記事編集のページでのみ、ページ遷移時に「 本当にこのページから離れますか？」的なあれを出します。
これは拗ねながらポテチを食べていた時にぽっと思いついただけの方法なので、もっといい方法があるかもしれませんが。
鉄壁の防御魔法（コードの内容）
functions.phpに以下を記述。
function add_script_beforeunload() {
global $pagenow;
if($pagenow === 'post.php' || $pagenow === 'post-new.php'){
echo '<script>
window.addEventListener("beforeunload", function (e) {
confirmationMessage = "本当にこのページから離れるのかい?";
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
</script>';
}
}
add_action( 'admin_footer', 'add_script_beforeunload' );これだけ。
タイトルや本文をちょっとでも編集すると、別ページへの遷移時・ページを更新する時に警告ダイアログが出てくるようになります。
*何もしないと出ないので、動作確認時は何か編集してから別ページに移動してみてください。
beforeunloadというイベントを使用する方法です。本来、ユーザーがフォームの入力中に離脱するのを防ぐために実装されていることが多いと思います。
$pagenowというグローバル変数に現在どのページにいるのか、という情報が保存されているので、「 'post.php' (編集画面)」の時と「 'post-new.php' (新規投稿画面)」の時のみ、このスクリプトを挿入します。
フックさせるのはとりあえず「' admin_footer'」としてますが、 jQueryも使っていないのでどこでもいいと思います。とりあえず動けば。あの地獄を防ぐことさえできたならば。
確認ダイアログを出すことの問題点
地獄を見ずに済むのであれば些細なる問題点ですが、一応以下のような問題点があります。
「公開ボタン」や「保存ボタン」を押した時にもいちいちダイアログがでてきて鬱陶しい
保存ボタンを押しても「このページを離れる」をクリックしなければなりません。少し最初は慣れないですが、これくらいはまぁ我慢するとしましょう。
returnで返しているメッセージがちゃんと表示されない。
これは何故なのかよくわかっていないのですが、
confirmationMessage = "本当にこのページから離れるのかい?";の部分に書いてある " 本当にこのページから離れるのかい?"; というメッセージが本来ダイアログに出力されるものだとは思うのですが、なんか表示されないですね。
まぁ、ユーザーに見せるものではないので良しとしましょう。
原因がわかる方、是非ご教示いただければ幸いでございます。
保存ボタンを押したときにでるダイアログで「キャンセル」してしまうと保存ボタンが押せなくなる
WordPressの公開・保存ボタンを押したときにもこの確認ダイアログが出てくることは上記で述べましたが、この時、「キャンセル」を選択しまうと保存ボタンが押下された状態でフリーズしてしまい、その後もう一度保存するということができなくなります。
もしこうなってしまった場合は、編集していてまだ保存されていない部分をコピーしておき、一度画面を更新してから改めてペーストし直す、という作業が必要になってきてしまいます。
いきなり保存されずに別ページへ飛んでしまう地獄に比べればまだマシですが、保存時は注意しましょう。
マジで安心できます
これを実装してから、本当に安心できて、穏やかな気持ちでブログを書くことが来ます。
