Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
534 views
in Technique[技术] by (71.8m points)

javascript - Populate ACF Fields using Wordpress Rest API JS

I'm new working with WordPress and I'm playing around with the Advanced Custom Fields plugin. It seems nice but I'd like to know if it's possible to POST a new object (created using ACF) through the WordPress REST API? I'm already using it to GET all my custom objects (thanks to ACF to REST API Plugin).

I'm using WordPress as my backend and NextJS as the frontend so I'd like to create a new HTML form, where the user can input some info and directly create an instance of that object.

If it's not possible, what's the mechanism to save to the database (common MySQL instance) and simulate the same operation I need? I'd like to prevent going through some custom implementation if it's something out there yet (let me know if you need more info about the problem or the data)

EDIT:

After some research, I figured out that I was trying to create the object using the incorrect endpoint.

Now I'm able to create my own object (custom post type) but I'm not able to populate the ACF fields...

I send an standard request:

var data = JSON.stringify({
  "title": "Test00",
  "status": "publish",
  "acf":{
    "customfield1":"Some value..."
  }
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "http://localhost:8000/wp-json/wp/v2/custom");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODAwMCIsImlhdCI6MTU2MDM3NTQxNywibmJmIjoxNTYwMzc1NDE3LCJleHAiOjE1NjA5ODAyMTcsImRhdGEiOnsidXNlciI6eyJpZCI6IjIifX19.BCyrlFm_qD3-9DzCxQ37n4pJYkTasvLaN34NJtFAMC4");
xhr.setRequestHeader("cache-control", "no-cache");

xhr.send(data);

And I receive this:

{
  ...
  "acf":{
    "customfield1":null
  }
}

Is there any way to do it all at once? Should I create the object and then, send the extra info?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Like the GET request, You can use the POST request as well to store data into the CMS. What you need to do is to pass the authorization headers with the POST API call.
You can get more detail about the authorization mechanism here: https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/

Headers:

Authorization:Bearer <token>
Content-Type:application/json

Secondly you can pass the Body data as a RAW json as below:

{
"title":"Sample ACF field demo",
"status": "publish",
"fields": 
    {      
        "text_custom_field_name" : "Text value",
        "checkbox_custom_field_name" : [
                "Option1,",
                "Option2,",
                "Option3"
            ],
        "textarea_custom_field_name" : "This is message field",
        "boolean_custom_field_name" : [
                true
            ]
    }
}

Please let me know if any help needed.

Thanks


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...