WordPressの記事編集画面で誤って記事公開してしまうのを防ぐために公開ボタンの色を変える

WordPressでの記事作成、こまめに保存をしながら記事を書くことありますよね。保存しようと思って保存ボタンを押したつもりが実は公開ボタンだった。なんてことがたまにあります。

なぜ公開ボタンを押してしまうのか。これは記事ステータス変更のエリア一帯で、公開ボタンが目立つように色がついているからだと思います。ぼんやりしているといちばん最初に目に入ってきたボタンを押してしまいます。

ということで、この認知的なミスが起こりにくくなるように、公開ボタンの色を変えてしまいましょう。

公開ボタンの色を変える方法

早速カスタマイズしていきたいと思います。要件はこんな感じ：

公開済みの記事でないときに公開ボタンの色を抑える
代わりに下書き保存ボタンの色を強調する

方針としては、WordPressのデザインシステムに乗っかっていきたいので、直接CSSは触らないようにします。ボタンの色を付け替えているclassをJavaScriptで変えるようにしてみました。

add_action('admin_enqueue_scripts', function($hook_suffix) {
  global $post;
  if ($hook_suffix !== 'post-new.php' && $hook_suffix !== 'post.php') return;
  if ($post->post_status === 'publish') return;
  echo "
    <script>
      window.addEventListener('DOMContentLoaded', () => {
        const publishButton = document.getElementById('publish');
        publishButton.classList.remove('button-primary');

        const saveButton = document.getElementById('save-post');
        saveButton.classList.add('button-primary');
      });
    </script>
  ";
});