投稿公開前に確認チェックを追加する方法

はじめに

投稿を公開する際、誤って未完成の内容を公開してしまうことがあります。
Cocoon設定→エディター→「確認ダイアログ」はクラシックエディターのみ対応しており、Gutenbergエディターではこの機能を利用できません。

そこで、この問題を改善し、Gutenbergエディターでも確認チェックを必須にして安全に公開できるようにします。
投稿編集画面に「公開前に確認しました」というチェックボックスを追加し、チェックが入っていない場合は公開や保存ができず、チェックを入れると初めて公開できるようにします。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// メタボックスを追加
add_action('add_meta_boxes', function () {
  add_meta_box(
    'confirm_checkbox',
    '公開前チェック',
    'render_confirm_checkbox',
    ['post'],
    'side',
    'high'
  );
});


/**
 * メタボックスの入力フォームを出力
 *
 * @param WP_Post $post 投稿オブジェクト
 * @return void
 */
if (!function_exists('render_confirm_checkbox_metabox')):
function render_confirm_checkbox($post) {
  // 設定を取得
  $value = get_post_meta($post->ID, 'my_confirm_before_publish', true);

  wp_nonce_field('confirm_checkbox_action', 'confirm_checkbox_nonce');
  ?>
  <label style="display: block; margin: 4px 0;">
    <input type="checkbox" name="confirm_checkbox" value="1" <?php checked($value, '1'); ?> />
    公開前に確認しました
  </label>
  <?php
}
endif;


// 投稿データを保存
add_action('save_post', function ($post_id) {
  // nonceチェック
  if (!isset($_POST['confirm_checkbox_nonce']) || !wp_verify_nonce(wp_unslash($_POST['confirm_checkbox_nonce']), 'confirm_checkbox_action')) {
    return;
  }

  // 自動保存チェック
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
    return;
  }

  // リビジョンは除外
  if (wp_is_post_revision($post_id)) {
    return;
  }

  // 権限チェック
  if (!current_user_can('edit_post', $post_id)) {
    return;
  }

  // カスタムフィールドに保存
  $checked = isset($_POST['confirm_checkbox']) ? '1' : '';
  update_post_meta($post_id, 'my_confirm_before_publish', $checked);
});


// 管理画面用JS・CSSを追加
add_action('admin_enqueue_scripts', function ($hook_suffix) {
  if (!in_array($hook_suffix, ['post.php', 'post-new.php'], true)) {
    return;
  }

  // クラシックエディター用JS
  ob_start();
  ?>
  jQuery(function ($) {
    const $checkbox = $('input[name="confirm_checkbox"]');
    const $publishBtn = $('#publish');

    if (!$checkbox.length || !$publishBtn.length) {
      return;
    }

    $publishBtn.on('click.preventPublish', function (e) {
      const status = $('#post_status').val();
      if ((status === 'publish' || status === 'future') && !$checkbox.prop('checked')) {
        alert('公開前の確認チェックを行ってください。');
        e.preventDefault();
        return false;
      }
    });

    const updateButtonStyle = () => {
      $publishBtn.css('opacity', $checkbox.prop('checked') ? 1 : 0.5);
    };

    $checkbox.on('change', updateButtonStyle);
    $('#post_status').on('change', updateButtonStyle);
    updateButtonStyle();
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());


  // Gutenbergエディター用JS
  ob_start();
  ?>
  wp.domReady(function () {
    const { dispatch } = wp.data;
    const LOCK_NAME = 'confirm_before_publish';
    const { lockPostSaving, unlockPostSaving } = dispatch('core/editor');

    function getCheckbox() {
      return document.querySelector('input[name="confirm_checkbox"]');
    }

    function syncLock() {
      const checkbox = getCheckbox();
      if (!checkbox || !checkbox.checked) {
        lockPostSaving(LOCK_NAME);
      } else {
        unlockPostSaving(LOCK_NAME);
      }
    }

    // 初期状態を反映
    syncLock();

    // メタボックスが非同期で描画・再描画される場合に備えて監視
    const observer = new MutationObserver(function () {
      const checkbox = getCheckbox();
      if (checkbox && !checkbox.dataset.confirmBound) {
        checkbox.dataset.confirmBound = '1';
        checkbox.addEventListener('change', syncLock);
      }
      syncLock();
    });
    observer.observe(document.body, { childList: true, subtree: true });
  });
  <?php

  $handle = 'confirm_checkbox';

  wp_register_script($handle, false, ['wp-data', 'wp-dom-ready'], null, true);
  wp_enqueue_script($handle);
  wp_add_inline_script($handle, ob_get_clean());
});

Gutenbergエディターの標準機能で「公開前確認」を設定する場合

WordPress 5.0からGutenbergエディターには標準「公開前チェックを有効化」の設定があります。

以下の手順で設定します。

1. 画面右上の「オプション」をクリックします。
2. 「設定」をクリックします。
3. 「一般」の公開「公開前チェックを有効化」をオンにします。

さいごに

今回紹介した方法を使えば、クラシックエディターだけでなくGutenbergエディターでも投稿公開前に確認チェックを必須にできます。
チェックボックスを入れない限り公開や保存ができないため、誤って未完成の投稿を公開してしまうリスクを防げます。
安全に投稿管理を行いたい方に便利な機能です。