WordPressの投稿画面でページ移動や公開時にダイアログボックスを出す。

WordPress は記事を投稿する際に最後に保存した状態から編集されていると警告のダイアログボックスが出るようになっています。

しかしこの機能、カスタムフィールドは対象になっていないため、カスタムフィールドだけを編集して別のページに移動しようとすると警告も出ずにそのまま移動して、せっかく編集した内容が無効になってしまいます。

また、記事の公開時も、「公開」ボタンを押しても特に確認のダイアログボックスが出ないため、間違えて本番公開をしてしまう事故が起きやすくなっています。

こうしたちょっとした使い勝手の悪さは大きなストレスにも繋がるので、function.php を編集して快適な管理画面に育てていきましょう。

具体的なコードは次のとおりです。

<?php
function add_script_confirm() {
  global $pagenow;
  if($pagenow === 'post.php' || $pagenow === 'post-new.php'){ ?>
      <script>
      $(function() {
        window.onbeforeunload = function(e){
          return "このページを離れますか？";  // Chrome以外
          e.returnValue = "このページを離れますか？"; // Chrome
        }
        $('form').on('submit', function(e){
          var tmpUnload = window.onbeforeunload;
          window.onbeforeunload = null; // 関数を一旦削除
          var btn = $(this).find("input[type=submit]:focus");
          if (btn.attr('value') == ) {
            if (!confirm('記事を本番公開しますか？')) {
              window.onbeforeunload = tmpUnload; // 関数を再設定
              return false;
            }
          }
        });
      });
      </script>
<?php
  }
}
add_action( 'admin_footer', 'add_script_confirm' );
?>

$pagenow は現在アクセスしている管理ページのファイル名になります。WordPress私的マニュアル 様が詳しく詳細していただいています。

現在のページが投稿編集か新規投稿の場合にだけ確認ダイアログボックスを出す JavaScript を追加します。

window.onbeforeunload はページの移動やリロードをしようとするときにダイアログボックスを出します。

サンプルコードでは一応ダイアログボックス内のテキストを設定していますが、Chrome では無視されてブラウザに設定されているテキストが強制的に表示されます。

$('form').on('submit', function(e){ で公開（更新）ボタンを押した時の動きを設定しています。

公開、更新ボタンは同じ ID を持っているので、まず

var btn = $(this).find("input[type=submit]:focus");

で押されたボタンを取得して、そのボタンの value 属性で「公開」ボタンだったときだけダイアログボックスを出すようにしています。

また、submit でも画面移動の扱いになるので window.onbeforeunload が動いてしまうため、

window.onbeforeunload = null;

で一旦削除しています。
（ダイアログでキャンセルしたときのために、削除の前に別の変数に処理をコピーしています）

あとは confirm で確認画面を出して、キャンセルが押されたときには window.onbeforeunload に処理を戻しつつ return false; して完了です。

これで記事作成や投稿時のミスも減って安心して使えますね。