Speichere post meta/custom field Daten mit der WP API (JSON API) und AJAX – register_meta() heißt das Zauberwort!

Die JSON-API von WordPress bringt immense Vorteile und wird auch schon stark benutzt. Wir haben schon sehr früh über die Entwicklung der JSON-API geschrieben und befassen uns daher schon lange mit der ganzen Thematik.

json photo
Photo by xmodulo

Leider gibt es bei der WP-API einige Baustellen. Angefangen von der überaus schlechten Dokumentation bis zu den gravierenden Änderungen bei Versionssprüngen.

Ein großes Problemfeld ist das Auslesen und Speichern von custom fields / post meta per JSON-API.

Daher: Die Geschichte der Custom Fields in WordPress ist eine Geschichte voller Missverständnisse!

In den ersten Versionen der JSON-API war es recht einfach möglich, Custom Fields zu befüllen. Aber mit den späteren Versionen wurde die einfache Speichermöglichkeit entfernt und nun sind gewisse Vorbereitungen notwendig.

Ein kleines Beispiel soll zeigen, wie man nun per AJAX ein Postmeta mittels JSON speichert. Wir gehen von einem Formular mit Eingabemöglichkeit für Titel und Content aus.

Schritt 1: Postmeta für WP-API vorbereiten mit register_meta()

 

Wichtig ist, „show_in_rest“ auf true zu stellen!

// add_action( 'init', register_meta_for_json' ); //BSP-Hook
 public static function register_meta_for_json() {
 $vorbereitetes_meta_args = array(
 'type' => 'string',
 'description' => 'Testmeta fuer JSON',
 'single' => true,
 'show_in_rest' => true,
 );

$Stars_args = array(
 'type' => 'number',
 'description' => 'Feld für Star-Rating',
 'single' => true,
 'show_in_rest' => true,
 );

register_meta( 'post', 'vorbereitetes_meta', $vorbereitetes_meta_args );
 register_meta( 'post', 'Stars', $Stars_args );
 }

 

 

 

Schritt 2: JavaScript-Datei einbinden und eigene Parameter anfügen

add_action( 'wp_enqueue_scripts', 'json_script');
 function json_script() {

wp_enqueue_script( 'wpent-json', plugins_url( 'wpent_json.js', __FILE__ ), array( 'jquery' ) );

$localize_script_args = array(
 'nonce' => wp_create_nonce( 'wp_rest' ), //extra wichtig - muss wp_rest sein!
 'jsonroot' => esc_url_raw( get_rest_url() ),
 'userID' => get_current_user_id(),
 );

wp_localize_script( 'wpent-json', 'WPENT_JSON_DATA', $localize_script_args );
 }

Schritt 3: Daten vorbereiten und per AJAX den JSON-Call machen

 

jQuery( document ).ready( function ( $ ) {
 $( '#eingabeformular' ).on( 'submit', function(e) {
 e.preventDefault();
 var title = $( '#eingabefeld_titel' ).val();
 var content = $( '#eingabefeld_content' ).val();
 var postmeta = { 'vorbereitetes_meta':"Metainhalt", 'Stars':"11"};

var data = {
 'title' : title,
 'content' : content,
 'status' : 'publish',
 'tags' : [2, 3],
 'categories' : [1, 4],
 'meta' : postmeta
 };

$.ajax({
 method: "POST", // oder type: 'POST',
 url: WPENT_JSON_DATA.jsonroot + 'wp/v2/posts', // url: 'meinedomain.at/wp-json/wp/v2/posts',
 dataType : 'json',
 contentType: 'application/json',
 data: data,
 beforeSend: function ( xhr ) {
 xhr.setRequestHeader( 'X-WP-Nonce', WPENT_JSON_DATA.nonce );
 },
 success : function( response ) {
 console.warn( response );
 },
 fail : function( response ) {
 console.warn( response );
 }
 });

});

} );

 

Andere Möglichkeiten

Andere Seiten haben auch schöne…Möglichkeiten für diesen Zweck. Hier der Überblick:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.