如何通过 AJAX 在 WordPress 中为 ACF 自定义字段写入数据

梦萱君_5477

梦萱君_5477

2026-07-20

698人浏览

原创

如何通过 AJAX 在 WordPress 中为 ACF 自定义字段写入数据

本文详解如何在 WordPress REST API 创建文章时,正确提交并保存 ACF 字段值——关键在于理解 ACF 字段不支持直接通过 wp/v2 端点的 acf_fields 参数写入,需结合 acf/save_post 钩子与 update_field() 函数实现。

本文详解如何在 wordpress rest api 创建文章时,正确提交并保存 acf 字段值——关键在于理解 acf 字段不支持直接通过 `wp/v2` 端点的 `acf_fields` 参数写入,需结合 `acf/save_post` 钩子与 `update_field()` 函数实现。

在 WordPress 中使用 Advanced Custom Fields(ACF)插件时,开发者常误以为可通过 REST API 的 POST /wp/v2/{post_type} 请求体中直接嵌套 acf_fields 或 fields 对象来批量设置 ACF 值。但事实是:WordPress 原生 REST API 默认不处理 ACF 字段的写入逻辑,即使你注册了自定义文章类型并启用了 show_in_rest => true,ACF 字段也不会自动映射或保存。

你的 JavaScript 代码中使用 acf_fields: { ... } 是无效的——该键名并非 REST API 接受的标准参数,且 ACF 插件未为此提供默认解析器。因此,尽管文章成功创建(标题、内容、状态正常),ACF 字段却始终为空。

✅ 正确方案:采用「分离式提交 + 服务端钩子填充」策略:

  1. 前端仅提交基础字段(如 title, content, status, post_type),并可附带自定义数据(如经纬度)作为临时载体;
  2. 后端监听 acf/save_post 钩子(推荐),在文章保存完成后,调用 update_field() 安全写入 ACF 值。

以下是完整实现步骤:

Cn Password Generator
Cn Password Generator

安全的随机密码生成器。支持自定义长度、字符类型(大写/小写字母、数字、特殊符号),排除相似字符,批量生成。纯 Python 标准库,无需 API 密钥。

下载

✅ 步骤一:修正前端 AJAX 请求(移除无效 acf_fields)

createMarker(latitude, longitude) {
  const ourNewPost = {
    title: `${latitude}, ${longitude}`,
    content: `Coordinates: ${latitude}, ${longitude}`,
    status: "publish",
    // 关键:将 ACF 所需数据作为自定义字段传入(需提前注册为可写入的 REST 字段)
    points_latitude: latitude.toString(),
    points_longitude: longitude.toString(),
    points_title: "test"
  };

  $.ajax({
    beforeSend: (xhr) => {
      xhr.setRequestHeader("X-WP-Nonce", myData.nonce);
    },
    url: myData.root_url + "/wp-json/wp/v2/points/",
    type: "POST",
    data: ourNewPost,
    success: (response) => {
      console.log("Post created with ID:", response.id);
    },
    error: (xhr) => {
      console.error("Error:", xhr.responseJSON?.message || xhr.statusText);
    }
  });
}

⚠️ 注意:若需在 REST 请求中直接传递自定义字段(如 points_latitude),必须先在 PHP 中显式注册这些字段为可写入的 REST 参数:

// functions.php 或插件文件中
function register_points_rest_fields() {
  register_rest_field('points', 'points_latitude', [
    'schema' => ['type' => 'string'],
    'get_callback' => null,
    'update_callback' => function($value, $post, $field_name) {
      update_field($field_name, $value, $post->ID);
    }
  ]);
  register_rest_field('points', 'points_longitude', [
    'schema' => ['type' => 'string'],
    'get_callback' => null,
    'update_callback' => function($value, $post, $field_name) {
      update_field($field_name, $value, $post->ID);
    }
  ]);
  register_rest_field('points', 'points_title', [
    'schema' => ['type' => 'string'],
    'get_callback' => null,
    'update_callback' => function($value, $post, $field_name) {
      update_field($field_name, $value, $post->ID);
    }
  ]);
}
add_action('rest_api_init', 'register_points_rest_fields');

✅ 步骤二:服务端使用 acf/save_post 钩子统一处理(更推荐)

若不想逐个注册 REST 字段,或需复杂逻辑(如根据其他字段计算 ACF 值),请采用此方式:

// 在主题 functions.php 或插件中添加
add_action('acf/save_post', 'save_points_acf_fields', 10, 1);

function save_points_acf_fields($post_id) {
  // 确保仅处理 'points' 自定义文章类型,且非自动保存/预览
  if (wp_is_post_revision($post_id) || wp_is_post_autosave($post_id)) {
    return;
  }

  if (get_post_type($post_id) !== 'points') {
    return;
  }

  // 从 $_POST 或请求体中提取原始数据(需确保 nonce 已验证)
  // 注意:此处需配合前端发送额外参数,或通过其他方式传递(如 post_meta 临时存储)
  // 更健壮做法:在 createMarker 中添加一个隐藏字段标识来源,并用 $_POST 获取
  if (isset($_POST['points_latitude']) && isset($_POST['points_longitude'])) {
    $lat = sanitize_text_field($_POST['points_latitude']);
    $lng = sanitize_text_field($_POST['points_longitude']);
    $title = sanitize_text_field($_POST['points_title'] ?? 'Default Title');

    update_field('points_latitude', $lat, $post_id);
    update_field('points_longitude', $lng, $post_id);
    update_field('points_title', $title, $post_id);
    update_field('status', 0, $post_id); // 注意:字段名需与 ACF 后台实际字段键名完全一致
  }
}

? 重要提醒:

  • update_field() 的第一个参数必须是 ACF 字段的 字段键(Field Key) 或 字段名称(Field Name),推荐使用字段名称(如 'points_latitude'),前提是该字段在 ACF 中已启用“Show in REST API”选项(ACF Pro v5.11+ 支持);
  • 若使用免费版 ACF,务必确认字段已启用“REST API”支持(在字段编辑页勾选 Appears in REST API);
  • 永远对用户输入执行 sanitize_text_field() 或更严格的过滤,防止 XSS 或注入风险;
  • acf/save_post 钩子在所有 ACF 字段保存后触发,适合做最终校验或联动更新。

通过以上配置,即可实现前端一键创建含完整 ACF 数据的自定义文章,兼顾安全性、可维护性与兼容性。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

wordpress ajax word

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2500

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

340

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2333

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1141

6

wordpress seo
wordpress seo

WordPress网站SEO优化方法有:1、选择一个SEO友好的主题,具有清晰的代码结构,快速的加载速度和响应式设计;2、使用SEO插件,优化你的标题标签,元描述,关键字,XML站点地图等;3、优化你的内容,内容是SEO优化的核心;4、优化你的网站速度;5、创建友好的URL;6、使用内部链接;7、优化图像;8、使用社交媒体;9、定期更新你的网站;10、监控和分析你的网站等等。

2023.09.18

4855

6

wordpress下载后怎么安装
wordpress下载后怎么安装

安装前准备:确保服务器满足要求、获取安装文件、创建数据库。上传 wordpress 文件。创建数据库和用户。运行安装程序:选择语言、输入数据库信息、网站标题和管理员信息。安装 wordpress。安装后配置:设置永久链接、安装主题、安装插件、创建内容。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.04.15

4999

6

WordPress插件教程
WordPress插件教程

本专题整理热门WordPress插件资源,涵盖SEO优化、缓存加速、安全防护、表单管理、电商扩展等插件推荐与使用教程。

2026.06.16

258

17

WordPress建站教程大全
WordPress建站教程大全

本专题汇总WordPress教程相关内容,包括WordPress安装教程、建站教程、使用技巧、网站管理经验和实战案例,帮助用户快速掌握WordPress建站与运营方法。

2026.06.16

500

20

WordPress开发教程
WordPress开发教程

本专题提供WordPress开发技术资料,包括主题开发、插件开发、自定义功能开发、API调用及性能优化等内容。

2026.06.16

658

25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何在 Windows 11 上安装 XAMPP
如何在 Windows 11 上安装 XAMPP

共1课时 | 203人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 11.6万人学习