Share
Vandaag beginnen we aan de minireeks over het invoegen van berichten via de voorkant. In deze zelfstudie behandelen we verschillende aspecten, te beginnen met formuliervalidatie en het invoegen van berichten. Laten we ons dus voorbereiden en beginnen!
Ons doel na het voltooien van deze miniserie zou de gebruiker in staat moeten stellen om berichten in te dienen via de voorkant, samen met het bewerken en verzenden van het bericht naar de prullenbak; alles zonder in het WordPress-dashboard te staan. Deze methoden kunnen worden gebruikt in een thema of plug-in en kunnen zeer flexibel worden gebruikt om zeer geavanceerde en complexe submissies te bereiken.
De demo en de downloadbestanden zijn een uitgekleed thema dat is gemaakt voor alleen de doeleinden van deze zelfstudie.
Dus open je favoriete teksteditor en laten we beginnen!
We beginnen met het maken van een formulier waarmee de gebruiker de details kan invoeren met betrekking tot het maken van een bericht. Laten we beginnen met het maken van een nieuwe paginasjabloon en laten we dit noemen terwijl we dit in een thema bouwen template-insert-posts.php. We zullen dan beginnen met het bouwen van ons formulier en het invoegen van enkele labels en invoervelden voor de berichttitel en het tekstgebied voor het hoofdgedeelte:
Wat we zojuist hebben aangemaakt, is een heel eenvoudige vorm met een tekstinvoer voor de gebruiker om de titel in te voeren en een tekstvak voor de inhoud van het bericht.
Nu we onze basisprincipes hebben ingesteld, moeten we een vormverificatie uitvoeren om ervoor te zorgen dat we de juiste inhoud krijgen en geen schadelijke aanvallen hebben op onze inzendingen.
We zullen twee verschillende vormen van validatie gebruiken. We zullen de plug-in jQuery-validatie gebruiken, samen met de traditionele PHP-validatie. Laten we eerst beginnen met de jQuery-kant van de validatie en ons validatiescript initialiseren. We zullen ervoor zorgen dat we de scripts registreren en in ons bijhouden functions.php het dossier. Daarnaast maken we een leeg JavaScript-bestand waarin we al onze eigen jQuery kunnen verwerken; Vergeet niet om dit bestand te registreren en in te checken voor initialisatie. Dit zou er ongeveer zo uit moeten zien:
Accentsconagua
// aangepaste jQuery wp_register_script ('custom_js', get_template_directory_uri (). '/js/jquery.custom.js', array ('jquery'), '1.0', TRUE); wp_enqueue_script ('custom_js'); // validatie wp_register_script ('validation', 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js', array ('jQuery')); wp_enqueue_script ('validatie'); Geweldig, we hebben al onze noodzakelijke scripts geregistreerd en in de wachtrij geplaatst. We zullen nu ons aangepaste jQuery-bestand openen en beginnen met het initialiseren van onze plug-in voor jQuery-validatie; we zullen ons lege JavaScript-bestand openen en de volgende regel code schrijven om onze jQuery-validatie te maken:
jQuery (document) .ready (function () jQuery ("# primaryPostForm"). validate ();); Het enige dat we hier hebben gedaan, is het ID van ons formulier opvragen en het bevestigen methode om dit te doen. Nu we dit op zijn plaats hebben, gaan we terug naar onze template-insert-posts.php bestand en zorg ervoor dat we de verplicht klasse in de invoervelden die vereist zijn.
Alle jQuery-validatie is aanwezig, laten we verdergaan met de PHP-validatie.
Onze validatie moet ervoor zorgen dat we een titel invoeren, en als de validatie van jQuery mislukt, zal het terugvallen op de PHP-validatie. We doen dit door eerst een PHP-variabele te maken om het foutbericht op te slaan en vervolgens een aantal voorwaardelijke tests te maken.
We testen in eerste instantie of de gebruiker het formulier heeft ingediend en we testen of onze PHP-foutberichtvariabele leeg is. We moeten de volgende code invoegen die dit net boven de onze doet :
Onze PHP-validatie is aanwezig, we gaan ervoor zorgen dat de waarde die we indienen dezelfde waarde is die de gebruiker heeft ingevoerd, en dit doen we door de volgende code in onze postTitle invoer veld:
value =""
We moeten ook hetzelfde doen voor ons tekstgebied, maar het werkt iets anders; in plaats van een waarde in te stellen, voegen we de volgende code in onze postContent tekstbericht tags:
Ten slotte moeten we ervoor zorgen dat we onze foutmelding uitvoeren en dit doen we door te controleren of onze variabele voor foutberichten leeg is. Als onze variabele niet leeg is, voer dan het bericht else uit en voer niets uit. De volgende code bereikt dit:
Nu we ons formulier met validatie hebben ingesteld, kunnen we verder gaan met het invoegen van de inhoud in een bericht. Laten we verder gaan…
We zullen onze formuliergegevens nu in een echte post indienen. We doen dit met behulp van de WordPress-functie wp_insert_post. Met deze functie kunnen we berichten invoegen, dus we zullen dit in ons voordeel gebruiken.
We beginnen met het eerst een variabele te maken die al onze verschillende elementen bevat. U kunt een hele reeks verschillende elementen definiëren en waarover u meer leest in de WordPress Codex. Voeg de volgende code toe, net onder uw formuliervalidatiecode:
$ post_information = array ('post_title' => wp_strip_all_tags ($ _POST ['postTitle']), 'post_content' => $ _POST ['postContent'], 'post_type' => 'post', 'post_status' => 'in behandeling '); wp_insert_post ($ post_information); De code die we zojuist hebben ingevoegd, maakt een array en wijst waarden toe aan de verschillende elementen. Voor de POST_TITLE element, we POST our postTitle waarde, en we POST onze postContent naar onze POST_CONTENT element.
We hebben ook ons berichttype ingesteld op post, omdat we het standaard berichttype zullen indienen, maar u kunt elk aangepast berichttype aan dit veld doorgeven. Ten slotte stellen we de status van de post in behandeling, zodat de beheerder de post kan bevestigen voordat deze wordt gepubliceerd.
Vervolgens voeren we de functie uit wp_insert_post en passeren onze array met al onze elementen en de gegevens die aan hen zijn toegewezen.
Dat is het! We kunnen nu via de voorkant berichten toevoegen, maar we zijn nog niet klaar. We hebben een aantal beveiligingsproblemen die we moeten compenseren. We beginnen met het invoegen van een wp_nonce_field. Als u niet weet wat een nonce-veld is, legt de WordPress Codex het perfect uit:
Het veld nonce wordt gebruikt om te valideren dat de inhoud van het formulier afkomstig is van de locatie op de huidige site en niet van een andere locatie.
Dit helpt ons tegen beveiligingsproblemen en het voorkomen van kwaadwillende aanvallen. Het enige wat we moeten doen is de volgende code invoegen net voor onze verzendknop:
Daarnaast zullen we onze formuliervalidatie bewerken om ervoor te zorgen dat we alleen content indienen nadat het nonce-veld is bevestigd dat we de inhoud van de website indienen, dit doen we door onze voorwaardelijke verklaring voor validatie te vervangen. Uw definitieve code met validatie en het indienen van de gegevens moet als volgt zijn:
if (isset ($ _POST ['submitted']) && isset ($ _POST ['post_nonce_field']) && wp_verify_nonce ($ _POST ['post_nonce_field'], 'post_nonce')) if (trim ($ _POST ['postTitle' ]) === ") $ postTitleError = 'Vul een titel in.'; $ hasError = true; $ post_information = array ('post_title' => wp_strip_all_tags ($ _POST ['postTitle']), 'post_content' = > $ _POST ['postContent'], 'post_type' => 'post', 'post_status' => 'in behandeling'); wp_insert_post ($ post_information); Tot slot, alleen voor een extra zullen we een redirect instellen zodra de gebruiker de informatie heeft ingediend, zodat gebruikers niet meerdere keren op submit kunnen drukken en dezelfde gegevens blijven invoeren in onze berichten. We zullen dit op een heel basaal niveau doen.
Zoals wp_insert_post geeft een ID terug, we gebruiken dit in ons voordeel en geven de ID terug aan een variabele die we zullen gebruiken om ervoor te zorgen dat we niet doorverwijzen als er geen bericht is aangemaakt.
We doen dit door onze wp_insert_post functie als een variabele, als volgt:
$ post_id = wp_insert_post ($ post_information);
We zullen dan een voorwaardelijke verklaring uitvoeren om alleen om te leiden als we een bericht-ID hebben en vervolgens de WordPress gebruiken redirect functie en geef de HOME_URL hieraan. De code die u invoegt is als volgt:
if ($ post_id) wp_redirect (home_url ()); Uitgang;
Helemaal klaar…
Dat is de basis en basisinformatie over het invoegen van berichten via de voorkant. We hebben veel besproken, door eerst een formulier te maken, formuliervalidatie uit te voeren en onze gegevens in te dienen in een wachtende post!
In het volgende deel zullen we wat dieper ingaan op het bewerken en verwijderen van berichten via de voorkant, wat een beetje lastiger wordt, maar het kan erg nuttig zijn!
Ik wil graag een ENORM bedanken dat je de tijd hebt genomen om mijn tutorial te lezen, ik hoop dat dit heeft geholpen. Aarzel niet om commentaar achter te laten en ik zal mijn best doen om hen te helpen en te beantwoorden, anders kan je altijd rechtstreeks contact met me opnemen via mijn website: www.VinnySingh.co of Twitter @VinnySinghUK
Blijf op de hoogte voor deel 2!
