Buchung über das Frontend Einfügen

Heute beginnen wir mit der Mini-Serie, wie Pfosten über das Frontend eingefügt werden. In diesem Lernprogramm werden verschiedene Aspekte behandelt, beginnend mit der Formularvalidierung und dem Einfügen von Beiträgen. Also machen wir uns bereit und beginnen!


Einführung

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 im WordPress-Dashboard zu sein. Diese Methoden können entweder in einem Theme oder 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 Formular erstellen

Wir beginnen mit der Erstellung eines Formulars, mit dem der Benutzer die Details zum Erstellen eines Beitrags eingeben kann. Wenn wir dies in ein Design integrieren, beginnen wir mit dem Erstellen einer neuen Seitenvorlage und nennen wir sie template-insert-posts.php. Wir beginnen dann mit dem Erstellen unseres Formulars und fügen einige Beschriftungen und Eingabefelder für den Beitragstitel und den Textbereich für den Hauptteil ein:

 

Was wir gerade erstellt haben, ist ein sehr einfaches Formular, das eine Texteingabe für den Benutzer zur Eingabe des Titels und eine Textfläche für den Inhalt des Beitrags enthält.

Jetzt, da wir unsere Grundlagen festgelegt haben, müssen wir eine Formularvalidierung durchführen, um sicherzustellen, dass wir korrekte Inhalte erhalten und keine böswilligen Angriffe auf unsere Einsendungen haben.


Schritt 2 Formularvalidierung

Wir werden zwei verschiedene Validierungsformen verwenden. Wir werden das jQuery Validation Plugin zusammen mit der traditionellen PHP-Validierung verwenden. Beginnen wir mit der jQuery-Seite der Validierung und initialisieren Sie unser Validierungsskript. Wir werden sicherstellen, dass wir die Skripte in unserem registrieren und in die Warteschlange stellen Functions.php Datei. Zusammen mit diesem erstellen wir eine leere JavaScript-Datei, in der wir alle unsere benutzerdefinierten jQuery-Dateien bearbeiten. Denken Sie daran, diese Datei für die Initialisierung zu registrieren und einzugeben. Das sollte ungefähr so ​​aussehen:

 // custom jquery wp_register_script ('custom_js', get_template_directory_uri (). '/js/jquery.custom.js', array ('jquery'), '1.0', TRUE); wp_enqueue_script ('custom_js'); // validation wp_register_script ('validation', 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js', array ('jquery')); wp_enqueue_script ('validation');

Toll, wir haben alle notwendigen Skripte registriert und in die Warteschlange gestellt. Wir öffnen jetzt unsere benutzerdefinierte jQuery-Datei und beginnen mit der Initialisierung unseres jQuery-Validierungs-Plugins. Wir werden unsere leere JavaScript-Datei öffnen und die folgende Codezeile schreiben, um unsere jQuery-Validierung zu erstellen:

 jQuery (document) .ready (function () jQuery ("# ​​primaryPostForm"). validate (););

Alles, was wir hier gemacht haben, ist, die ID unseres Formulars zu erhalten und das Formular anzuwenden bestätigen Methode dazu. Nun, da wir dies haben, werden wir zu unserem zurückkehren template-insert-posts.php Datei und stellen Sie sicher, dass wir die erforderlich Klasse in die erforderlichen Eingabefelder.

Die jQuery-Validierung ist bereits vorhanden. Wir wollen nun zur PHP-Validierung übergehen.

Unsere Validierung sollte sicherstellen, dass wir einen Titel eingeben. Wenn die jQuery-Validierung fehlschlägt, wird auf die PHP-Validierung zurückgegriffen. Dazu erstellen wir zunächst eine PHP-Variable zum Speichern der Fehlermeldung und erstellen dann einige bedingte Tests.

Wir testen zunächst, ob der Benutzer das Formular gesendet hat, und testen dann, ob die PHP-Fehlernachrichtenvariable leer ist. Wir müssen den folgenden Code einfügen, der genau über unserem Code liegt :

 

Unsere PHP-Validierung ist vorhanden, wir werden sicherstellen, dass der von uns übergebene Wert derselbe Wert ist, den der Benutzer eingegeben hat, und wir tun dies, indem wir den folgenden Code in unseren einfügen postTitle Eingabefeld:

 value = ""

Wir müssen dasselbe für unseren Textbereich tun, aber es funktioniert etwas anders. Anstatt einen Wert festzulegen, fügen wir den folgenden Code in unser ein postContent Textfeld-Tags:

 

Schließlich müssen wir sicherstellen, dass wir unsere Fehlernachricht ausgeben. Dazu überprüfen wir, ob unsere Fehlermeldungsvariable leer ist. Wenn unsere Variable nicht leer ist, geben Sie die Nachricht aus, sonst geben Sie nichts aus. Der folgende Code erreicht dies:

   

Nun, da wir unser Formular mit Validierung eingerichtet haben, können wir den Inhalt in einen Beitrag einfügen. Lass uns weitermachen…


Schritt 3 Senden eines Beitrags

Wir werden jetzt unsere Formulardaten in einem Post senden. Wir machen dies mit der WordPress-Funktion wp_insert_post. Mit dieser Funktion können wir Beiträge einfügen, so dass wir dies zu unserem Vorteil nutzen.

Wir beginnen mit dem Erstellen einer Variablen, die alle unsere verschiedenen Elemente enthält. Sie können eine ganze Reihe verschiedener Elemente definieren und im WordPress-Codex nachlesen. Fügen Sie den folgenden Code direkt unter Ihrem Formularvalidierungscode ein:

 $ post_information = array ('post_title' => wp_strip_all_tags ($ _POST ['postTitle']), 'post_content' => $ _POST ['postContent'], 'post_type' => 'post', 'post_status' => 'ausstehend '); wp_insert_post ($ post_information);

Der soeben eingefügte Code erstellt ein Array und weist den verschiedenen Elementen Werte zu. Für die post_title Element, wir POST unser postTitle Wert und wir POST unser postContent zu unserer post_content Element.

Wir setzen auch unseren Posttyp auf Post, Da wir den Standard-Beitragstyp übermitteln, können Sie jeden benutzerdefinierten Beitragstyp an dieses Feld übergeben. Zum Schluss setzen wir den Status des Beitrags als ausstehend, sodass der Administrator den Beitrag vor der Veröffentlichung bestätigen kann.

Wir führen dann die Funktion aus wp_insert_post und übergeben Sie unser Array mit all unseren Elementen und den ihnen zugewiesenen Daten.

Das ist es! Wir können jetzt Beiträge über das Frontend hinzufügen, sind aber noch nicht fertig. Wir haben einige Sicherheitsprobleme, die wir kompensieren müssen. Wir beginnen mit dem Einfügen eines wp_nonce_field. Wenn Sie nicht wissen, was ein Nonce-Feld ist, erklärt es der WordPress-Codex perfekt:

Das Nonce-Feld wird verwendet, um zu überprüfen, ob der Inhalt des Formulars von der Position auf der aktuellen Site stammt und nicht an einem anderen Ort.

Dies hilft uns bei der Abwehr von Sicherheitsproblemen und verhindert böswillige Angriffe. Alles, was wir tun müssen, ist, den folgenden Code kurz vor dem Absenden-Button einzufügen:

 

Parallel dazu bearbeiten wir die Validierung des Formulars, um sicherzustellen, dass wir nur dann Inhalte übermitteln, wenn das Feld "nonce" bestätigt wurde, dass wir den Inhalt von der Website übermitteln. Dies geschieht durch Ersetzen unserer bedingten Gültigkeitserklärung. Ihr endgültiger Code mit Validierung und Übermittlung der Daten sollte wie folgt lauten:

 if (isset ($ _POST ['mitted ']) && isset ($ _POST [' post_nonce_field ']) && wp_verify_nonce ($ _POST [' post_nonce_field ']),' post_nonce '))' if (trim ($ _POST ['postTitle') ' ]) === ") $ postTitleError = 'Bitte geben Sie einen Titel ein.'; $ hasError = true; $ post_information = array ('post_title' => wp_strip_all_tags ($ _POST ['postTitle']), 'post_content' = > $ _POST ['postContent'], 'post_type' => 'post', 'post_status' => 'pending'); wp_insert_post ($ post_information);

Schließlich wird nur für eine zusätzliche Option eine Weiterleitung festgelegt, sobald der Benutzer die Informationen übermittelt hat, sodass Benutzer nicht mehrmals auf "Senden" klicken und dieselben Daten in unsere Posts eingeben müssen. Wir werden dies auf einer sehr grundlegenden Ebene tun.

Wie wp_insert_post Gibt eine ID zurück, verwenden wir diese zu unserem Vorteil und geben die ID an eine Variable zurück, mit der wir sicherstellen, dass keine Weiterleitung erfolgt, wenn kein Beitrag erstellt wurde.

Wir werden dies tun, indem wir unseren zuweisen wp_insert_post Funktion wie folgt auf eine Variable:

 $ post_id = wp_insert_post ($ post_information);

Wir werden dann eine Bedingungsanweisung ausführen, um nur umzuleiten, wenn wir eine Beitrags-ID haben, und dann WordPress zu verwenden umleiten Funktion und übergeben Sie die home_url zu diesem. Der Code, den Sie einfügen, lautet wie folgt:

 if ($ post_id) wp_redirect (home_url ()); Ausfahrt; 

Alles erledigt…


Fazit

Das sind die Grundlagen und Grundlagen für das Einfügen von Posts über das Frontend. Wir haben eine Menge abgedeckt, indem wir zuerst ein Formular erstellt haben, eine Formularprüfung durchführen und unsere Daten in einen ausstehenden Post einreichen!

Im nächsten Teil werden wir ein wenig tiefer in die Bearbeitung und das Löschen von Beiträgen über das Frontend einsteigen, was ein wenig komplizierter wird, aber es kann sehr nützlich sein!

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

Bleiben Sie dran für Teil 2!