Utstationering via frontänden Infoga

Idag börjar vi miniserien om hur man sätter in inlägg via fronten. Vi kommer att täcka en mängd olika aspekter i denna handledning, som börjar med formvalidering och inläggning av inlägg. Så, gör oss redo och börja!


Introduktion

Vårt mål efter att ha avslutat denna mini-serie borde tillåta användaren att skicka inlägg via frontänden, tillsammans med att redigera och skicka posten till papperskorgen. allt utan att vara i WordPress Dashboard. Dessa metoder kan användas i antingen ett tema eller plugin och vara mycket anpassningsbara för att uppnå mycket avancerade och komplexa inlägg.

Demo och nedladdningsfilerna är ett avskalat tema som har skapats för bara syftet med denna handledning.

Så öppna din favorit textredigerare och låt oss börja!


Steg 1 Skapa en blankett

Vi börjar med att skapa en blankett som gör det möjligt för användaren att ange detaljerna när det gäller att skapa ett inlägg. När vi bygger detta till ett tema, låt oss börja med att skapa en ny sidmall och låt oss kalla det mall-skär posts.php. Vi börjar då konstruera vår form och infoga några etiketter och inmatningsfält för postens titel och textarea för kroppen:

 

Det vi just har skapat är en mycket enkel form som har en textinmatning för användaren att skriva in titeln och en textarea för innehållet i posten.

Nu när vi har fastställt våra grundläggande krav måste vi utföra någon formvalidering för att säkerställa att vi får rätt innehåll och inte har skadliga attacker mot våra inlägg.


Steg 2 Form validering

Vi använder två olika former av validering. Vi kommer att använda jQuery Validation Plugin, tillsammans med traditionell PHP validering. Låt oss börja med jQuery-sidan av validering först och initiera vårt valideringsskript. Vi kommer att se till att vi registrerar och bifogar skript inom vår functions.php fil. Tillsammans med detta kommer vi att skapa en tom JavaScript-fil där vi hanterar alla våra anpassade jQuery; kom ihåg att registrera och skriva in den här filen för initialisering. Det här borde se ut så här:

 // 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'); // validering wp_register_script ('validering', 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js', array ('jquery')); wp_enqueue_script ('validering');

Bra, vi har registrerat och skriven alla våra nödvändiga skript. Vi öppnar nu vår anpassade jQuery-fil och börjar initialisera vår jQuery Validation Plugin; vi öppnar vår tomma JavaScript-fil och skriver följande kodlinje för att skapa vår jQuery-validering:

 jQuery (dokument) .ready (function () jQuery ("# ​​primaryPostForm"). validera (););

Allt vi har gjort här är att få vårt formulärs ID och tillämpa bekräfta metod för detta. Nu när vi har det på plats, går vi tillbaka till vårt mall-skär posts.php fil och se till att vi har satt nödvändig klass i inmatningsfälten som krävs.

Alla jQuery Validation är på plats, låt oss gå vidare till PHP Validation.

Vår validering bör se till att vi anger en titel, och om jQuery Validation misslyckas, kommer den att falla tillbaka till PHP Validation. Vi gör detta genom att först skapa en PHP-variabel för att lagra felmeddelandet och sedan skapa några villkorliga tester.

Vi testar först om användaren har skickat formuläret och sedan testar vi om vår PHP-felmeddelandevariabel är tom. Vi måste infoga följande kod som gör det precis ovanför vårt :

 

Vår PHP-validering är på plats, vi ska säkerställa att värdet vi skickar är samma värde som användaren har angivit, och vi gör det genom att infoga följande kod i vår Post titel Inmatningsområde:

 value =""

Vi behöver också göra detsamma för vårt textområde men det fungerar lite annorlunda. istället för att ange ett värde, lägger vi in ​​följande kod i vår postContent textarea tags:

 

Slutligen måste vi se till att vi skriver ut vårt felmeddelande, och vi gör det genom att kontrollera om vår felmeddelandevariabel är tom. Om vår variabel inte är tom så matar ut meddelandet annars ingenting. Följande kod uppnår detta:

   

Nu när vi har ställt in vår formulär med validering kan vi flytta in på innehållet i ett inlägg. Låt oss gå vidare…


Steg 3 Skicka in en post

Vi skickar nu in formulärdata till en faktisk post. Det gör vi genom att använda WordPress-funktionen wp_insert_post. Med den här funktionen kan vi lägga in inlägg, så vi kommer att använda det till vår fördel.

Vi börjar med att först skapa en variabel för att hålla alla våra olika element. Du kan definiera en hel massa olika element och du kan läsa om i WordPress Codex. Sätt in följande kod, precis nedanför din formulärvalideringskod:

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

Koden som vi just har lagt in skapar en array och tilldelar värden till de olika elementen. För Post titel element, vi postar vår Post titel värde, och vi postar vår postContent till vår POST_CONTENT element.

Vi ställde också in vår posttyp till posta, eftersom vi kommer att skicka in den vanliga posttypen men du kan skicka någon anpassad posttyp till det här fältet. Slutligen ställer vi status för posten som väntar så admin kan bekräfta posten innan den publiceras.

Vi kör sedan funktionen wp_insert_post och skicka vår matris med alla våra element och de uppgifter som tilldelats dem.

Det är allt! Vi kan nu lägga in inlägg via frontänden, men vi är inte färdiga än. Vi har några säkerhetsproblem som vi behöver kompensera. Vi börjar med att sätta in en wp_nonce_field. Om du inte vet vad ett nonce-fält är, förklarar WordPress Codex det perfekt:

Nonce-fältet används för att validera att innehållet i formuläret kom från platsen på den aktuella webbplatsen och inte någon annanstans.

Detta hjälper oss mot eventuella säkerhetsproblem och förhindrar eventuella skadliga attacker. Allt vi behöver göra är att infoga följande kod strax före vår inlämningsknapp:

 

Tillsammans med detta kommer vi att redigera vår formulärvalidering för att säkerställa att vi bara skickar in innehåll när nonce-fältet har bekräftats att vi skickar innehållet från webbplatsen, vi gör det genom att ersätta vårt valideringsvillkor. Din sista kod med validering och inlämning av data ska vara enligt följande:

 if isset ($ _POST ['submitted']) && isset ($ _POST ['post_nonce_field']) && wp_verify_nonce ($ _POST ['post_nonce_field'], 'post_nonce')) if (trim ($ _POST ['postTitle' ]) === ") $ postTitleError = 'Vänligen ange en titel.'; $ hasError = true; post_information = array ('post_title' => wp_strip_all_tags ($ _POST ['postTitle']), 'post_content' = > $ _POST ['postContent'], 'post_type' => 'post', 'post_status' => 'väntar'); wp_insert_post ($ post_information);

Slutligen, bara för en extra, ställer vi om en omdirigering när användaren har lämnat in informationen, så att användarna inte kan skriva in flera gånger och fortsätt att ange samma data i våra inlägg. Vi kommer att göra detta på en mycket grundläggande nivå.

Som wp_insert_post returnerar ett ID som vi kommer att använda detta till vår fördel och returnera ID till en variabel som vi ska använda för att se till att vi inte omdirigeras om inget inlägg skapades.

Vi gör det genom att tilldela vår wp_insert_post funktion till en variabel, enligt följande:

 $ post_id = wp_insert_post ($ post_information);

Då kör vi ett villkorligt uttalande för att bara omdirigera om vi har ett post-ID, använd sedan WordPress dirigera om funktion och passera HOME_URL till detta. Koden du ska infoga är som följer:

 om ($ post_id) wp_redirect (home_url ()); utgång; 

Klart…


Slutsats

Det är grunden och grunden för hur man sätter in inlägg via fronten. Vi har täckt mycket, genom att först skapa en form, formulärvalidering och skicka in vår data till ett pågående inlägg!

Inom nästa del kommer vi att gräva lite djupare i redigering och radering av inlägg via frontänden, vilket blir lite svårare men det kan vara mycket användbart!

Jag skulle vilja säga ett stort tack för att du spenderade tid att läsa min handledning, jag hoppas det hjälpte. Vänligen gärna lämna kommentarer och jag kommer att försöka mitt bästa för att hjälpa till och svara på dem, om inte kan du alltid kontakta mig direkt via min hemsida: www.VinnySingh.co eller Twitter @VinnySinghUK

Håll tyst på del 2!