Archiv der Kategorie: custom fields

Positionierung von Custom Fields oder wie bekomme ich Felder in die Sidebar: Der ‚context‘-Parameter ist dein Freund!

Wir verwenden ACF und Custom Fields sehr häufig um unseren Produkten einen deutlich komplexeren Aufbau zu ermöglichen.
Daher machen wir uns auch immer reichlich Gedanken darüber, wie wir den Aufbau so einfach und logisch wie möglich gestalten können.

Dazu gehört nicht nur die Auswahl der Darstellungsform, sondern natürlich auch die Auswahl des Orts, wo wir unsere Custom Fields eingeblendet haben wollen.

Wenn ein Artikel z.B. ein alternatives Beitragsbild erhalten soll, ist es unsinnig dieses Feld direkt nach dem Titel anzuzeigen. Es sollte natürlich seitlich in der Nähe des primären Beitragsbild zu finden sein. Und das können wir ja ganz einfach steuern, oder?

Custom Fields und ACF

Wie wir Custom Fields erstellen, soll hier nicht Thema sein. Daher gehe ich nur auf die Funktion ein, mit der wir die Position festlegen können.

Hierfür verwenden wir die Funktion „add_meta_box( $id, $title, $screen, $context, $priority, $callback_args );„. Diese Metabox soll dann unsere Custom Fields beherbergen.

Der „context“ gibt dabei an, in welchem Bereich die Metabox angezeigt werden soll und mit „priority“ können wir zu einem bestimmten Grad festlegen, ob die Metabox vor oder nach anderen Metaboxen angezeigt wird.

ACF hat dafür natürlich einen eigenen Einstellungsbereich, bei dem wir ohne etwas zu programmieren zu unsern Custom Fields kommen.

Beispiel für die ACF Einstellungen

Hier im Screenshot sehen wir die Auswahl der Position unserer neuen Feldgruppe mit ACF.

Die Freiheit der Benutzer, die (unnötige?) Arbeit des Entwicklers

Egal wie gut und durchdacht unsere Logik dahinter ist, so bietet WP jedem Benutzer die Möglichkeit seine Eingabemaske so umzustellen, wie er oder sie es gerne hätte.

Denn die Informationen, wie Custom Fields und ACFs im Backend angezeigt werden, speichert WP in der Datenbank für jeden Nutzer einzeln in der Tabelle „_usermeta“ mit dem Key „meta-box-order_page“ ab.

Aber ist diese Geistesanstrengung dann überhaupt nötig?

Absolut! Immerhin dürfen wir nicht vergessen, dass der Großteil der Nutzer dieses Feature vermutlich gar nicht kennt. Außerdem zählt ja auch der erste Eindruck. Und den geben immer noch wir vor!

Aber einen wichtigen Punkt gibt es hierbei zu bedenken und der ist auch der Grund für diesen Artikel.

Achtung bei nachträglichen Änderungen

Sobald wir uns entscheiden, ein Feld im Nachhinein umzustellen, kann es passieren, dass ein Nutzer von dieser Umstellung nichts mitbekommt.

Denn jeder Nutzer, der bereits aktiv mit unseren Custom Fields oder unsern ACFs gearbeitet hat, der hat noch die alten Positionsangaben in der Datenbank stehen und ist somit von unseren Umstellungen ausgeschlossen.
(Zumindest solange wir hier nicht programmatisch eingreifen und auch gleich diesen Wert in der „_usermeta“-Tabelle ändern…)

In Kurz: Hat ein User bereits ein bestehendes ACF-Feld bearbeitet, wird zu den Usermetadaten die Aufteilung des Backends gespeichert und Änderungen kommen beim User nicht an!

Das ist für alle Entwickler zu bedenken, die im Nachhinein ACF-Felder bearbeiten und in der Position verschieben.

 

weiterführende Links:

Custom Fields

Custom Meta Boxes

add_meta_box()

Creating a Field Group

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: