Buchung über das Frontend Fortgeschrittene Einreichung

Heute werden wir unsere Mini-Serie zum Einfügen von Posts über das Frontend fortsetzen. In diesem Abschnitt werden wir uns jedoch ausschließlich mit der Verwaltung benutzerdefinierter Meta-Felder beschäftigen, die wir möglicherweise in unserem Post-Typ haben. Also machen wir uns bereit und beginnen!


Einführung

Wir sind jetzt in Teil 3 unserer Miniserie, und wenn Sie die anderen beiden Teile nicht gelesen haben, rate ich Ihnen, dies zu tun, weil wir dort weitermachen, wo wir aufgehört haben. Unser Ziel nach Abschluss dieser Miniserie sollte es dem Benutzer ermöglichen, Beiträge über das Frontend einzureichen, zu bearbeiten und den Beitrag in den Papierkorb zu verschieben. Alles ohne auf dem WordPress Dashboard zu sein. Diese Methoden können sowohl in einem Theme als auch in einem Plugin verwendet werden und sind sehr anpassungsfähig, um sehr fortgeschrittene und komplexe Einreichungen zu erzielen.

Die Demo und die Download-Dateien sind ein abgespecktes Thema, das nur für die Zwecke dieses Tutorials erstellt wurde.

Öffne also deinen bevorzugten Texteditor und lass uns anfangen!


Schritt 1 Einfügen einer benutzerdefinierten Meta-Box

Beginnen wir mit dem Erstellen eines Ordners umfassen, In diesem Ordner erstellen wir eine Datei mit dem Namen post-meta.php. Wir werden unsere benutzerdefinierte Meta-Box innerhalb dieser Datei erstellen. Ich werde das ziemlich schnell durchgehen, aber wenn Sie alles über die Wunder erfahren möchten, die Sie mit benutzerdefinierten Meta-Boxen erreichen können, hat Tammy Hart eine erstaunliche Tutorial-Serie geschrieben, die sich als wiederverwendbare benutzerdefinierte Meta-Boxen bezeichnet.

In unserem post-meta.php, Wir werden ein Präfix erstellen, um sicherzustellen, dass wir eine eindeutige Kennung für alle unsere Felder haben. Außerdem beginnen wir mit der Erstellung eines Arrays, in dem alle unsere Informationen enthalten sind, um eine benutzerdefinierte Meta-Box zu erstellen. Der folgende Code dient zum Erstellen einer ID für die benutzerdefinierte Meta-Box, zum Festlegen eines Titels, in dem die Meta-Box (welcher Beitragstyp) angezeigt wird, und die Felder, die diese enthalten soll:

 // Field Array $ prefix = 'vsip_'; $ vsip_post_meta_box = array ('id' => 'vsip-post-meta-box'), 'title' => __ ('Custom Meta', 'framework'), 'page' => 'post', 'context' = > 'normal', 'Priorität' => 'hoch', 'Felder' => array (array ('name' => __ ('Benutzerdefinierte Eingabe Eins:', 'Rahmen'), 'desc' => __ (' Geben Sie Ihre benutzerdefinierte Meta 1 ',' framework '),' id '=> $ prefix.'custom_one', 'type' => 'text'), array ('name' => __ ('Custom Input Two:', 'framework'), 'desc' => __ ('Geben Sie Ihr benutzerdefiniertes Meta 2' ein, 'framework'), 'id' => $ prefix.'custom_two ',' type '=>' text '),));

Als Nächstes erstellen wir unsere Meta-Box, indem wir eine Funktion erstellen. In dieser Funktion verwenden wir die WordPress-Funktion: add_meta_box.

Der folgende Code zeigt, wie wir unsere Meta-Box erstellt haben, sowie den Action-Hook add_meta_boxes:

 // Benutzerdefinierte Meta-Box add_action ('add_meta_boxes', 'vsip_project_add_meta'); Funktion vsip_project_add_meta () global $ vsip_post_meta_box; add_meta_box ($ vsip_post_meta_box ['id'], $ vsip_post_meta_box ['title'], 'vsip_display_post_meta', $ vsip_post_meta_box ['page'], $ vsip_post_meta_box ['context'], $ vsip_post_meta_box '  // END OF-Funktion: vsip_project_add_meta

Nachdem wir nun unsere Meta-Box erstellt haben und alle Felder mit den Informationen, die wir speichern möchten, festgelegt haben, müssen wir unsere Meta-Box anzeigen. Dazu erstellen wir eine andere Funktion mit dem gleichen Namen wie unser dritter Parameter in unserem add_meta_box Funktion. In unserem Fall erstellen wir eine Funktion mit dem Namen: vsip_display_post_meta.

Der folgende Code ruft jedes Feld innerhalb unseres Arrays ab, das alle unsere Informationen enthält, überprüft den jeweiligen Feldtyp und gibt den richtigen Feldtyp aus:

 Funktion vsip_display_post_meta () global $ vsip_post_meta_box, $ post; // Nonce für Echo verwenden'; Echo ''; foreach ($ vsip_post_meta_box ['fields'] als $ field) // aktuelle Post-Metadaten abrufen $ meta = get_post_meta ($ post-> ID, $ field ['id'], true); switch ($ field ['type']) // Wenn Textfall 'text': echo '','','
'; Echo ''; brechen; Echo '
'; // END Of Function: vsip_display_post_meta

Wir haben unsere benutzerdefinierte Meta-Box erstellt und deren Inhalt angezeigt. Jetzt müssen wir nur noch die Daten speichern, sobald der Benutzer den Inhalt für die Felder eingefügt hat. Dazu erstellen wir eine letzte Funktion, mit der unsere Daten korrekt gespeichert werden. Der Code lautet wie folgt:

 // Metadaten speichern add_action ('save_post', 'vsip_post_save_data'); Funktion vsip_post_save_data ($ post_id) global $ vsip_post_meta_box; // nonce if verifizieren (! isset ($ _ POST ['vsip_meta_box_nonce']) ||! wp_verify_nonce ($ _ POST ['vsip_meta_box_nonce'], Basisname (__ FILE__))) return $ post_id;  // autosave prüfen, wenn (definiert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id;  // Berechtigungen prüfen if ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) return $ post_id;  elseif (! current_user_can ('edit_post', $ post_id)) return $ post_id;  foreach ($ vsip_post_meta_box ['fields'] als $ field) $ old = get_post_meta ($ post_id, $ field ['id'], true); $ new = $ _POST [$ field ['id']]; if ($ new && $ new! = $ old) update_post_meta ($ post_id, $ field ['id'], $ new);  elseif ("== $ new && $ old) delete_post_meta ($ post_id, $ field ['id'], $ old); // Ende der Funktion: vsip_post_save_data

Okay, ich weiß, dass wir das sehr schnell durchgemacht haben, aber der Fokus dieses Tutorials liegt auf der Verwaltung der benutzerdefinierten Meta über das Frontend. Jetzt, da alles aus dem Weg geräumt ist und wir unsere benutzerdefinierte Meta-Box in unseren Posts eingerichtet haben, werden wir fortfahren, wie Sie die Felder in unseren Insert-Post einfügen und die benutzerdefinierten Meta-Felder bearbeiten können.


Schritt 2 Bearbeiten unserer Insert-Posts

Wir werden die Seite zum Einfügen von Posts bearbeiten, um die neu hinzugefügten benutzerdefinierten Felder zu kompensieren. Lass uns gehen und unsere öffnen template-insert-posts.php und fügen Sie einige zusätzliche Felder ein. Da es sich bei unseren benutzerdefinierten Metafeldern um Textfelder handelt, werden wir wie folgt zwei zusätzliche Texteingabefelder in unser Formular einfügen:

 

Wenn der Benutzer auf "Senden" klickt, werden die benutzerdefinierten Meta-Informationen in die entsprechenden Felder eingefügt. Dazu benötigen wir die WordPress-Funktion: update_post_meta, Diese Funktion ermöglicht es uns, das Post-Meta zu aktualisieren, und wir können das Post-Meta nur aktualisieren, wenn wir einen Post erstellt haben und eine ID haben.

Wir werden also dorthin gehen, wo wir die Funktion verwenden: wp_insert_post Und direkt über unserem Weiterleitungslink werden wir unsere benutzerdefinierte Meta einfügen.

Der folgende Code testet, ob wir einen Beitrag erstellt haben, und verwendet dann den update_post_meta Funktion und übergeben Sie die post_id Zu dieser Funktion, zusammen mit der ID des Feldes, das wir aktualisieren möchten, und schließlich dem Wert aus unserem Formular, das wir in die Meta-Box posten:

 if ($ post_id) // Benutzerdefiniertes Meta aktualisieren update_post_meta ($ post_id, 'vsip_custom_one', esc_attr (strip_tags ($ _ POST ['customMetaOne']))); update_post_meta ($ post_id, 'vsip_custom_two', esc_attr (strip_tags ($ _ POST ['customMetaTwo')))); // Weiterleitung wp_redirect (home_url ()); Ausfahrt; 

Das ist es! Wir haben eine benutzerdefinierte Meta-Box erstellt und unser Post-Post-Formular aktualisiert, um sicherzustellen, dass wir uns auf diese Felder konzentrieren und diese korrekt gespeichert werden. Als Nächstes werden wir uns mit der Bearbeitung unserer benutzerdefinierten Meta beschäftigen.


Schritt 3 Bearbeiten unserer benutzerdefinierten Meta

Jetzt müssen wir in der Lage sein, das benutzerdefinierte Meta über das Front-End zu bearbeiten, sodass wir damit beginnen, unser Meta zu öffnen template-edit-posts.php und fügen Sie unsere beiden neuen Eingabefelder ein, die wir unserem Einfügungsformular hinzugefügt haben:

 

Als Nächstes müssen wir unser benutzerdefiniertes Post-Meta des jeweiligen Posts abrufen. Dazu verwenden wir die WordPress-Funktion: get_post_meta innerhalb unserer WordPress-Schleife. Scrollen Sie nach oben, wo wir unsere WordPress-Schleife haben, und fügen Sie den folgenden Code ein, der die Informationen zu Titel und Inhalt enthält.

 $ custom_one = get_post_meta ($ current_post, 'vsip_custom_one', true); $ custom_two = get_post_meta ($ current_post, 'vsip_custom_two', true);

Nachdem wir nun die Informationen des benutzerdefinierten Post-Metas erhalten haben, geben wir die Werte in die Eingabefelder unseres Formulars ein. Der folgende Code ist die aktualisierte Version der zwei benutzerdefinierten Metafelder, die wir eingefügt haben:

 

Wie Sie aus dem gerade eingefügten Code erkennen können, sind die Werte für unsere beiden Eingaben die Variablen unseres benutzerdefinierten Metas, die wir in unserer WordPress-Schleife erstellt haben. Sie haben vielleicht bemerkt, dass sie unsere Felder ausgeben könnten, aber wenn wir Änderungen vornehmen, keine tatsächlichen Aktualisierungen werden vorgenommen. Dies liegt daran, dass wir den Code zum Aktualisieren des Beitrags nicht eingefügt haben, sobald der Benutzer auf Aktualisieren geklickt hat.

Genauso wie wir unser Post-Meta beim Einfügen neuer Posts hinzugefügt haben, tun wir dies innerhalb unserer Editiervorlage. Fügen Sie also folgenden Code hinzu:

 if ($ post_id) // Benutzerdefiniertes Meta aktualisieren update_post_meta ($ post_id, 'vsip_custom_one', esc_attr (strip_tags ($ _ POST ['customMetaOne']))); update_post_meta ($ post_id, 'vsip_custom_two', esc_attr (strip_tags ($ _ POST ['customMetaTwo')))); // Weiterleitung wp_redirect (home_url ()); Ausfahrt; 

Das ist es! Wir haben es getan! Wir können jetzt eine benutzerdefinierte Meta-Box erstellen, Meta mit dem Insert-Post über das Front-End einfügen und das Meta über das Front-End bearbeiten.


Fazit

Teil 3 ist fertig, du hast es geschafft! Gut gemacht, Sie können jetzt Beiträge einfügen, bearbeiten und Beiträge über das Front-End löschen sowie Ihre eigenen Meta bearbeiten.

Das ist das Ende dieser Serie über das Posting über das Frontend. Ich bin froh, dass Sie bei mir geblieben sind, während wir unsere Reise durchgemacht haben.

Ich möchte Ihnen ein RIESIGES Dankeschön sagen, dass Sie sich die Zeit genommen haben, um meine Tutorialserie zu lesen. Ich hoffe, es hat geholfen. Fühlen Sie sich frei, Kommentare zu hinterlassen und ich werde mein Bestes geben, um Ihnen zu helfen und sie zu beantworten. Sie können mich jederzeit direkt über meine Website kontaktieren: www.VinnySingh.co oder Twitter @VinnySinghUK.