如何将自定义Blog文章类型的描述与封面图设为必填字段

需求说明 #

已创建名为Blog的自定义文章类型，包含标题、描述（编辑器）和封面图三个字段，需将描述和封面图设为必填项，发布时若缺失则显示错误提示并阻止发布。

实现步骤 #

• 编辑器（描述）字段验证：通过后端钩子拦截保存请求，检查内容是否为空，为空则阻止发布并提示错误。
• 封面图字段验证：同时添加前端提交前检查和后端保存验证，双重保障字段不为空。

修改后的完整代码 #

add_action('init', 'custom_blog_post_type');

function custom_blog_post_type()
{
  $labels = array(
    'name'          => 'Blogs',
    'singular_name' => 'Blog',
    'menu_name'     => 'Blogs',
    'add_new'       => 'Add New Blog',
    'add_new_item'  => 'Add New Blog Post',
    'edit_item'     => 'Edit Blog Post',
    'all_items'     => 'All Blogs',
  );

  $args = array(
    'labels'            => $labels,
    'public'            => true,
    'has_archive'       => true,
    'show_in_rest'      => true,
    'menu_icon'         => 'dashicons-edit',
    'supports'          => array('title', 'editor'),
  );

  register_post_type('blogs', $args);
}

// 封面图元框
function add_cover_image_meta_box() {
  add_meta_box(
    'cover_image_meta_box',
    'Cover Image',
    'cover_image_meta_box_callback',
    'blogs',
    'side',
    'high'
  );
}
add_action('add_meta_boxes', 'add_cover_image_meta_box');

function cover_image_meta_box_callback($post) {
  // 获取当前图片URL
  $image_url = get_post_meta($post->ID, '_cover_image', true);
?>
  <div>
    <label for="cover_image">Upload a cover image:</label>
    <input type="text" name="cover_image" id="cover_image" placeholder="image url" style="margin-top: 3px;" value="<?php echo esc_attr($image_url); ?>" />
    <button type="button" id="upload_button" style="margin-top: 5px;" class="button upload-image-button">Upload Image</button>
  </div>

  <div id="image_preview" style="margin-top: 10px;">
    <?php if ($image_url) : ?>
      <img src="<?php echo esc_url($image_url); ?>" alt="Cover Image" style="max-width: 100%; height: auto;" />
    <?php endif; ?>
  </div>

  <script>
    jQuery(document).ready(function($) {
      // 媒体上传功能
      $('#upload_button').click(function(e) {
        e.preventDefault();

        var mediaUploader = wp.media({
          title: 'Select Image',
          button: {
            text: 'Use this image'
          },
          multiple: false
        }).open().on('select', function() {
          var uploaded_image = mediaUploader.state().get('selection').first();
          var image_url = uploaded_image.toJSON().url;

          $('#cover_image').val(image_url);
          $('#image_preview').html('<img src="' + image_url + '" alt="Cover Image" style="max-width: 100%; height: auto;" />');
        })
      });

      // 前端发布验证
      $('#publish, #save-post').click(function(e) {
        var coverImage = $('#cover_image').val().trim();
        var editorContent = tinyMCE.activeEditor.getContent().trim();
        
        if (!coverImage || !editorContent) {
          e.preventDefault();
          alert('请填写完整的描述内容和封面图，才能发布文章！');
          return false;
        }
      });
    });
  </script>
<?php
}

// 保存封面图元数据
function save_cover_image_meta($post_id) {
  // 跳过自动保存和修订版本
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
  if (wp_is_post_revision($post_id)) return;
  // 检查权限
  if (!current_user_can('edit_post', $post_id)) return;

  if (isset($_POST['cover_image'])) {
    update_post_meta($post_id, '_cover_image', sanitize_text_field($_POST['cover_image']));
  }
}
add_action('save_post', 'save_cover_image_meta');

// 编辑器内容必填验证（后端）
function validate_blog_content($post_data, $postarr) {
  // 仅针对blogs类型的发布操作
  if ($post_data['post_type'] === 'blogs' && $post_data['post_status'] === 'publish') {
    if (empty(trim($post_data['post_content']))) {
      add_settings_error('blog_validation_errors', 'empty_content', '描述内容不能为空！', 'error');
      // 将状态改为草稿，阻止发布
      $post_data['post_status'] = 'draft';
    }
  }
  return $post_data;
}
add_filter('wp_insert_post_data', 'validate_blog_content', 10, 2);

// 封面图必填验证（后端）
function validate_blog_cover_image($post_id, $post, $update) {
  // 跳过自动保存、修订版本，仅处理blogs类型的发布操作
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
  if (wp_is_post_revision($post_id)) return;
  if ($post->post_type !== 'blogs' || $post->post_status !== 'publish') return;
  if (!current_user_can('edit_post', $post_id)) return;

  $cover_image = isset($_POST['cover_image']) ? trim($_POST['cover_image']) : '';
  if (empty($cover_image)) {
    add_settings_error('blog_validation_errors', 'empty_cover', '封面图不能为空！', 'error');
    wp_update_post(array('ID' => $post_id, 'post_status' => 'draft'));
  }
}
add_action('save_post', 'validate_blog_cover_image', 10, 3);

// 显示后台错误提示
function display_blog_validation_errors() {
  settings_errors('blog_validation_errors');
}
add_action('admin_notices', 'display_blog_validation_errors');

代码说明 #

• 前端验证：点击发布按钮时立即检查字段完整性，弹出提示阻止无效提交。
• 后端验证：拦截文章保存流程，若字段为空则将文章设为草稿，并在后台顶部显示错误提示。
• 权限与场景过滤：跳过自动保存、修订版本等非人工操作，只针对真实发布场景做验证。

内容的提问来源于stack exchange，提问作者emad