Posten via de frontend geavanceerde verzending

Vandaag gaan we door met onze mini-serie over het invoegen van berichten via de voorkant, maar in dit deel zullen we exclusief kijken naar hoe we aangepaste metavelden kunnen beheren die we binnen ons berichttype kunnen hebben. Laten we ons dus voorbereiden en beginnen!


Invoering

We zitten nu in deel 3 van onze miniserie en als je de andere twee delen niet hebt gelezen, adviseer ik dat omdat we zullen oppikken van waar we zijn gebleven. Ons doel na het voltooien van deze mini-serie moet de gebruiker in staat stellen om berichten in te dienen via de front-end, samen met het bewerken en verzenden van de post naar prullenbak; alles zonder op het WordPress-dashboard te staan. Deze methoden kunnen zowel in een thema of in een plug-in worden gebruikt en kunnen zeer flexibel worden aangepast 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!


Stap 1 Aangepaste metabox invoegen

Laten we beginnen met het maken van een map met de naam omvatten, in deze map maken we een bestand met de naam post-meta.php. We zullen onze aangepaste metabox maken in dit bestand. Ik zal dit vrij snel doornemen, maar als je wilt lezen over alle wonderen die je kunt bereiken met aangepaste metaboxen, schreef Tammy Hart een geweldige tutorialserie genaamd Reusable Custom Meta Boxes.

Binnen in onze post-meta.php, we zullen een voorvoegsel maken om ervoor te zorgen dat we een unieke ID voor al onze velden hebben, ook zullen we beginnen met het creëren van een array om al onze informatie te bevatten om een ​​aangepaste metabox te maken. De volgende code is voor het maken van een ID voor de aangepaste metabox, het instellen van een titel, waar de metabox zal verschijnen (welk berichttype) en de velden die het zal hebben:

 // Field Array $ prefix = 'vsip_'; $ vsip_post_meta_box = array ('id' => 'vsip-post-meta-box', 'title' => __ ('Custom Meta', 'framework'), 'page' => 'post', 'context' = > 'normaal', 'priority' => 'high', 'fields' => array (array ('name' => __ ('Custom Input One:', 'framework'), 'desc' => __ (' Voer je aangepaste meta 1 ',' framework 'in),' id '=> $ prefix.'custom_one', 'type' => 'text'), array ('name' => __ ('Custom Input Two:', 'framework'), 'desc' => __ ('Voer je aangepaste meta 2', 'framework' in), 'id' => $ prefix.'custom_two ',' type '=>' text '),));

Vervolgens zullen we onze metabox maken en dit doen we door een functie te creëren. Binnen deze functie zullen we de WordPress-functie gebruiken: add_meta_box.

De volgende code geeft weer hoe we onze metabox hebben gemaakt, samen met de actieknop add_meta_boxes:

 // Custom Meta Box add_action ('add_meta_boxes', 'vsip_project_add_meta'); function 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 ['priority']);  // END OF Function: vsip_project_add_meta

Nu we onze metabox hebben gemaakt en alle velden hebben ingesteld met de informatie die we willen opslaan, moeten we onze metabox weergeven. We doen dit door een nieuwe functie te maken met dezelfde naam als onze derde parameter in onze add_meta_box functie. In ons geval creëren we een functie genaamd: vsip_display_post_meta.

De volgende code krijgt elk veld in onze array dat al onze informatie bevat en controleert het type veld dat het is en voert het juiste veldtype uit:

 function vsip_display_post_meta () global $ vsip_post_meta_box, $ post; // Gebruik nonce voor verificatie echo ''; echo ''; foreach ($ vsip_post_meta_box ['fields'] als $ field) // verkrijg huidige post-metadata $ meta = get_post_meta ($ post-> ID, $ field ['id'], true); switch ($ field ['type']) // If Text case 'text': echo '','','
'; echo ''; breken; echo '
'; // END Of Function: vsip_display_post_meta

We hebben onze aangepaste metabox gemaakt en de inhoud ervan weergegeven. Het enige dat we nog hoeven te doen, is de gegevens opslaan zodra de gebruiker inhoud voor de velden heeft ingevoegd. We doen dit door een laatste functie te creëren die onze gegevens correct zal bewaren. De code is als volgt:

 // Sla Meta Data add_action op ('save_post', 'vsip_post_save_data'); function vsip_post_save_data ($ post_id) global $ vsip_post_meta_box; // verifieer nonce als (! isset ($ _ POST ['vsip_meta_box_nonce']) ||! wp_verify_nonce ($ _ POST ['vsip_meta_box_nonce'], basename (__ FILE__))) return $ post_id;  // schakel automatisch opslaan in als (defined ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id;  // controleer machtigingen als ('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 ($ nieuw && $ nieuw! = $ oud) update_post_meta ($ post_id, $ field ['id'], $ new);  elseif ("== $ nieuw && $ oud) delete_post_meta ($ post_id, $ field ['id'], $ old); // END Of Function: vsip_post_save_data

Oké, ik weet dat we dat heel snel hebben doorstaan, maar de focus van deze tutorial is hoe je de aangepaste meta via de voorkant kunt beheren. Nu het allemaal uit de weg is en we onze aangepaste metabox hebben ingesteld in onze berichten, zullen we doorgaan met het invoegen van de velden in onze invoegpost en de aangepaste metavelden bewerken.


Stap 2 Het bewerken van onze invoegposten

We zullen onze pagina met invoegpunten bewerken om te compenseren voor onze nieuw toegevoegde aangepaste velden. Laten we onze open gaan template-insert-posts.php en voeg wat extra velden in. Omdat onze aangepaste metavelden tekstvelden zijn, voegen we als volgt twee extra tekstinvoervelden in ons formulier in:

 

We moeten het hebben wanneer de gebruiker op 'Verzenden' klikt. Het zal de aangepaste meta-informatie invoegen in de juiste velden. Om dit te doen, moeten we de WordPress-functie gebruiken: update_post_meta, Wat deze functie doet, is ons in staat stellen de meta van de post bij te werken en we kunnen de meta van de post alleen bijwerken nadat we een bericht hebben gemaakt en een ID hebben.

Dus we gaan waar we de functie gebruiken: wp_insert_post en net boven onze omleidingslink plaatsen we onze aangepaste meta.

De volgende code voert onze test uit om te controleren of we een bericht hebben gemaakt en vervolgens gebruiken we de update_post_meta functie en geef de post_id naar deze functie, samen met de ID van het veld dat we willen bijwerken en ten slotte de waarde van ons formulier die we naar de metabox zullen posten:

 if ($ post_id) // Update Custom 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']))); // Doorverwijzing wp_redirect (home_url ()); Uitgang; 

Dat is het! We hebben een aangepaste metabox gemaakt en we hebben ons invoegingsformulier bijgewerkt om ervoor te zorgen dat we deze velden targeten en ze correct worden opgeslagen. Vervolgens gaan we verder met het bewerken van onze aangepaste meta.


Stap 3 Onze aangepaste meta bewerken

Nu moeten we de aangepaste meta via de voorkant kunnen bewerken, dus we beginnen met het openen van onze template bewerken-posts.php en het invoegen van onze twee nieuwe invoervelden die we hebben toegevoegd aan ons invoegingsformulier:

 

Vervolgens moeten we onze aangepaste post-meta van het specifieke bericht ophalen, dit doen we met behulp van de WordPress-functie: get_post_meta binnenkant van onze WordPress Loop. Blader omhoog naar waar we onze WordPress Loop hebben en voeg de volgende code toe net onder waar we de informatie voor onze titel en inhoud hebben.

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

Nu we de informatie van de aangepaste post-meta hebben, zullen we de waarden hiervan nu uitvoeren naar onze invoervelden van ons formulier. De volgende code is de bijgewerkte versie van de twee aangepaste metavelden die we hebben ingevoegd:

 

Zoals je kunt zien aan de hand van de code die we zojuist hebben ingevoegd, zijn de waarden voor onze beide ingangen de variabelen van onze aangepaste meta die we in onze WordPress Loop hebben aangemaakt, je hebt misschien gemerkt dat het onze velden kon uitvoeren, maar wanneer we wijzigingen aanbrengen, geen echte updates worden gemaakt. Dit komt omdat we de code niet hebben ingevoegd om de post bij te werken zodra de gebruiker op update heeft geklikt.

Op dezelfde manier waarop we onze post-meta hebben toegevoegd bij het invoegen van nieuwe berichten, doen we dit binnen onze bewerkingssjabloon, dus voeg de volgende code toe:

 if ($ post_id) // Update Custom 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']))); // Doorverwijzing wp_redirect (home_url ()); Uitgang; 

Dat is het! We hebben het gedaan! We kunnen nu een aangepaste metabox maken, meta invoegen met de invoegpost via de voorkant en de meta bewerken via de voorkant.


Conclusie

Dat is deel 3 compleet, je hebt het gedaan! Goed gedaan, je bent nu in staat om berichten in te voegen, berichten te bewerken en te verwijderen via de frontend, samen met het verwerken van elke aangepaste meta die je hebt.

Dat is het einde van deze serie over Posting via de Front End, en ik ben blij dat je bij mij bent gebleven terwijl we onze reis hebben doorgemaakt.

Ik wil graag een ENORM bedanken voor het feit dat ik de tijd heb genomen om mijn lessenreeks te lezen, ik hoop dat het geholpen heeft. Aarzel niet om commentaar achter te laten en ik zal mijn best doen om hen te helpen en te beantwoorden. U kunt altijd rechtstreeks contact met mij opnemen via mijn website: www.VinnySingh.co of Twitter @VinnySinghUK.