如何基于update_post_meta创建事件日历的动态多维数组

我帮你梳理下具体的实现步骤，从前端表单克隆到后端数据处理，完全贴合你的需求：

一、前端表单结构与jQuery克隆逻辑 #

首先调整表单的name属性，确保提交后能得到规整的数组结构，同时用jQuery实现动态添加/移除日程组：

初始HTML表单 #

<form method="post" action="">
  <!-- WordPress安全验证nonce（必备） -->
  <?php wp_nonce_field('save_training_events', 'training_events_nonce'); ?>
  
  <div class="event-group">
    <input type="text" name="training_events[][date]" placeholder="例如：2018年3月1日">
    <input type="text" name="training_events[][start_time]" placeholder="例如：上午9:00">
    <input type="text" name="training_events[][end_time]" placeholder="例如：上午11:00">
    <button type="button" class="remove-event">移除</button>
  </div>

  <button type="button" id="add-event">添加新日程</button>
  <button type="submit" name="save_training_events">保存日程</button>
</form>

jQuery克隆代码 #

jQuery(document).ready(function($) {
  // 添加新日程组
  $('#add-event').click(function() {
    // 克隆第一个日程组
    const $newEventGroup = $('.event-group:first').clone();
    // 清空克隆输入框的内容，避免重复旧数据
    $newEventGroup.find('input').val('');
    // 把新组插入到"添加"按钮前面
    $(this).before($newEventGroup);
  });

  // 移除日程组（用事件委托处理动态生成的元素）
  $(document).on('click', '.remove-event', function() {
    // 至少保留一个日程组
    if ($('.event-group').length > 1) {
      $(this).closest('.event-group').remove();
    }
  });
});

二、后端用update_post_meta处理数据 #

在WordPress的自定义保存逻辑里（比如save_post钩子），接收表单数据并整理成你需要的「日期为父键，起止时间为子键」的多维数组：

基础版（单日期单时间段） #

add_action('save_post', 'save_training_events_meta', 10, 2);
function save_training_events_meta($post_id, $post) {
  // 跳过自动保存、修订版，确保用户有编辑权限
  if (wp_is_post_autosave($post_id) || wp_is_post_revision($post_id) || !current_user_can('edit_post', $post_id)) {
    return;
  }

  // 验证nonce，防止CSRF攻击
  if (!isset($_POST['training_events_nonce']) || !wp_verify_nonce($_POST['training_events_nonce'], 'save_training_events')) {
    return;
  }

  // 处理提交的日程数据
  if (isset($_POST['training_events'])) {
    $rawEvents = $_POST['training_events'];
    $formattedEvents = [];

    foreach ($rawEvents as $event) {
      // 跳过空日期的无效条目
      if (empty(trim($event['date']))) {
        continue;
      }

      // 清理输入内容，确保安全
      $dateKey = sanitize_text_field($event['date']);
      $formattedEvents[$dateKey] = [
        'start_time' => sanitize_text_field($event['start_time']),
        'end_time' => sanitize_text_field($event['end_time'])
      ];
    }

    // 更新post meta：第一个参数是文章ID，第二个是自定义meta键，第三个是整理好的数组
    update_post_meta($post_id, '_training_events', $formattedEvents);
  }
}

进阶版（单日期多时间段） #

如果需要支持同一个日期添加多个时间段，只需调整数组结构，把日期对应的子值改成数组：

// 替换上面的foreach循环部分
foreach ($rawEvents as $event) {
  if (empty(trim($event['date']))) {
    continue;
  }

  $dateKey = sanitize_text_field($event['date']);
  $timeSlot = [
    'start_time' => sanitize_text_field($event['start_time']),
    'end_time' => sanitize_text_field($event['end_time'])
  ];

  // 如果日期已存在，追加时间段；否则创建新条目
  if (isset($formattedEvents[$dateKey])) {
    $formattedEvents[$dateKey][] = $timeSlot;
  } else {
    $formattedEvents[$dateKey] = [$timeSlot];
  }
}

三、安全与验证提示 #

• 可以对日期格式做更严格的验证，比如用strtotime或checkdate函数确保输入的是有效日期
• 对于时间输入，也可以添加正则验证，确保格式符合要求
• 始终使用WordPress的安全函数（如sanitize_text_field、wp_verify_nonce）防止恶意输入和攻击

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