Utstationering via frontänden Avancerad inlämning

Idag fortsätter vi med vår mini-serie om att infoga inlägg via frontänden, men i den här delen kommer vi att se uteslutande hur man hanterar anpassade metafält som vi kan ha inom vår posttyp. Så, gör oss redo och börja!


Introduktion

Vi är nu i del 3 i min mini-serie, och om du inte har läst de andra två delarna rekommenderar jag dig därför att vi kommer att plocka upp från var vi slutade. 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 på WordPress Dashboard. Dessa metoder kan användas både i 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 Infoga anpassad Meta Box

Låt oss börja med att först skapa en mapp som heter inkludera, I den här mappen skapar vi en fil som heter post-meta.php. Vi kommer att skapa vår anpassade metakassa inuti den här filen. Jag kommer att gå igenom det ganska snabbt, men om du vill läsa om alla de underverk som du kan uppnå med anpassade metakassor, skrev Tammy Hart en fantastisk tutorial-serie som heter Reusable Custom Meta Boxes.

Inuti vårt post-meta.php, Vi kommer att skapa ett prefix för att säkerställa att vi har en unik identifierare för alla våra fält. Vi börjar också med att skapa en matris för att hålla all vår information för att skapa en anpassad meta-låda. Följande kod är för att skapa ett ID för den anpassade metakassen, ange en titel, där metaboxen kommer att visas (vilken posttyp) och de fält som den kommer att ha:

 // Field Array $ prefix = 'vsip_'; $ vsip_post_meta_box = array ('id' => 'vsip-post-meta-box', 'title' => __ ('Anpassad meta', 'ram'), 'sida' => 'inlägg' > 'normal', 'prioritet' => 'hög', 'fält' => array (array ('name' => __ ('Anpassad Inmatning En:', 'Ramverk'), 'desc' => __ Ange din anpassade meta 1 ',' ram '),' id '=> $ prefix.'custom_one', 'typ' => 'text'), array ('name' => __ ('Custom Input Two:', 'ram'), 'desc' => __ ('Ange din anpassade meta 2', 'ram'), 'id' => $ prefix.'custom_two ',' typ '=>' text ')));

Därefter skapar vi vår metabox och vi gör det genom att skapa en funktion. Inuti denna funktion använder vi WordPress-funktionen: add_meta_box.

Följande kod visar hur vi skapade vår meta box, tillsammans med att använda åtgärdskroken add_meta_boxes:

 // Anpassad 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 ['sida'], $ vsip_post_meta_box ['context'], $ vsip_post_meta_box ['priority']);  // Slut Funktion: vsip_project_add_meta

Nu när vi har skapat vår meta box, tillsammans med att alla fält har den information vi vill lagra, måste vi visa vår meta box. Vi gör det genom att skapa en annan funktion med samma namn som vår tredje parameter i vår add_meta_box fungera. I vårt fall skapar vi en funktion som heter: vsip_display_post_meta.

Följande kod får varje fält inuti vår array som håller all vår information och kontrollerar typ av fält den är och matar ut rätt fälttyp:

 funktion vsip_display_post_meta () global $ vsip_post_meta_box, $ post; // Använd nonce för verifieringseko'; eko "'; foreach ($ vsip_post_meta_box ['fields'] som $ fält) // få aktuell post metadata $ meta = get_post_meta ($ post-> ID, $ field ['id'], true); växla ($ fält ['typ']) // Om textfall 'text': echo '','','
'; eko "'; ha sönder; echo "
'; // Slut av funktion: vsip_display_post_meta

Vi har skapat vår anpassade metakassa och visat innehållet. Allt vi har kvar är att spara data när användaren har lagt in innehåll för fälten. Vi gör detta genom att skapa en slutlig funktion som sparar våra data korrekt. Koden är som följer:

 // Spara Metadata add_action ('save_post', 'vsip_post_save_data'); funktion vsip_post_save_data ($ post_id) global $ vsip_post_meta_box; // verifiera nonce om (! isset ($ _ POST ['vsip_meta_box_nonce']) ||! wp_verify_nonce ($ _ POST ['vsip_meta_box_nonce'], basnamn (__ FILE__))) return $ post_id;  // Kontrollera autosave om (definierad ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id;  // kontrollera behörigheter om ('sida' == $ _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'] som $ fält) $ old = get_post_meta ($ post_id, $ field ['id'], true); $ new = $ _POST [$ fält ['id']]; om ($ new && $ new! = $ old) update_post_meta ($ post_id, $ fält ['id'], $ nytt);  elseif ("== $ nytt && $ gammalt) delete_post_meta ($ post_id, $ field ['id'], $ gammalt); // Avslutningsfunktion: vsip_post_save_data

Okej, jag vet att vi gick igenom det väldigt snabbt, men fokusen på denna handledning är hur man hanterar anpassad meta via fronten. Nu när det är allt ur vägen och vi har vår anpassade meta-box uppställd i våra inlägg fortsätter vi hur man sätter in fälten i vårt inläggspost och för att redigera de anpassade metafälten.


Steg 2 Redigering av våra infoga inlägg

Vi kommer att redigera vår sida för infoga inlägg för att kompensera för våra nyinstallerade anpassade fält. Låt oss gå och öppna vår mall-skär posts.php och sätt in några extra fält. Eftersom våra anpassade metafält är textfält lägger vi in ​​två extra textinmatningsfält i vår form, enligt följande:

 

Vi måste ha det så när användaren klickar på "Skicka" kommer den att infoga den anpassade meta-informationen i lämpliga fält. För att göra detta måste vi använda WordPress-funktionen: update_post_meta, Vad den här funktionen gör är att vi kan uppdatera posten meta, och vi kan bara uppdatera posten meta när vi har skapat ett inlägg och har ett ID.

Så vi ska gå där vi använder funktionen: wp_insert_post och strax ovanför vår omdirigeringslänk är vi där vi ska infoga vår anpassade meta.

Följande kod gör vårt test för att kontrollera om vi har skapat ett inlägg, och då använder vi update_post_meta funktion och passera post_id till den här funktionen, tillsammans med fältets ID, vi vill uppdatera, och slutligen värdet från vår form som vi skickar till metaboxen:

 om ($ post_id) // Uppdatera anpassad Meta 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']))); // Omdirigera wp_redirect (home_url ()); utgång; 

Det är allt! Vi har skapat en anpassad meta-låda och vi har uppdaterat vårt inläggsformulär för att se till att vi riktar in dessa fält och de blir sparade korrekt. Därefter kommer vi att flytta på hur man redigerar vår anpassade meta.


Steg 3 Redigering Vår Custom Meta

Nu måste vi kunna redigera den anpassade metan via fronten, så vi börjar med att öppna vår mall-edit-posts.php och sätter in våra två nya inmatningsfält som vi lagt till i vårt inläggsformulär:

 

Därefter måste vi hämta vår anpassade postmeta för det specifika inlägget, vi gör det genom att använda WordPress-funktionen: get_post_meta inuti vårt WordPress Loop. Bläddra upp till där vi har vårt WordPress Loop och sätt in följande kod precis nedanför där vi fick informationen för vår titel och innehåll.

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

Nu när vi har informationen i anpassad postmeta, kommer vi nu att mata ut värdena till detta i våra inmatningsfält i vår form. Följande kod är den uppdaterade versionen av de två anpassade metafält som vi lade in:

 

Som du kan se från koden som vi just har lagt in, är värdena för båda våra ingångar variablerna i vår anpassade meta som vi skapade i vår WordPress Loop, du kanske har märkt att den kunde mata ut våra fält men när vi gör ändringar inte faktiska uppdateringar görs. Detta beror på att vi inte har infogat koden för att uppdatera inlägget när användaren klickat på uppdateringen.

Precis på samma sätt som vi lagt till vårt inlägg, när vi lägger in nya inlägg, kommer vi att göra det här inuti redigeringsmallen, så lägg till följande kod:

 om ($ post_id) // Uppdatera anpassad Meta 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']))); // Omdirigera wp_redirect (home_url ()); utgång; 

Det är allt! Vi har gjort det! Vi kan nu skapa en anpassad metakassa, sätt in meta med inläggsposten via frontänden tillsammans med att redigera metan via frontänden.


Slutsats

Det är del 3 komplett, du har gjort det! Bra gjort, du är nu kapabel att infoga inlägg, redigera och ta bort inlägg via frontänden, tillsammans med hantering av någon anpassad meta du har.

Det här är slutet på den här serien om utstationering via frontänden, och jag är glad att du stannat med mig medan vi gick igenom vår resa.

Jag skulle vilja säga ett stort tack för att du spenderade tid att läsa min handledning serie, 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 och svara på dem. Du kan alltid kontakta mig direkt via min hemsida: www.VinnySingh.co eller Twitter @VinnySinghUK.