Idag kommer vi att diskutera hur man använder Envato API i WordPress och skapa en WordPress shortcode som marknadsför våra Envato Marketplace-objekt inom vår WordPress-webbplats. Vi kommer att kombinera det kraftfulla Envato API, WordPress 'flexibilitet och lite kreativitet, för att skapa ett fantastiskt plugin för vår webbplats.
I denna handledning kommer vi att fokusera på:
Så låt oss komma in i den första!
Envato tillhandahåller ett API som tillåter utvecklare att få lite information om Envato Marketplace-produkter, användarinformation, populära projekt och så vidare. Alla möjliga frågor finns listade i den officiella dokumentationen. I den här artikeln diskuteras endast det offentliga API: n.
Envato Public API har följande struktur.
http://marketplace.envato.com/api/edge/set.json
Ordet uppsättning måste ersättas med ett alternativ som anges i den inställda kolumnen i API-dokumentationen. Så om vi vill ha all information om en marknadspost måste vi ersätta uppsättning med post: the_item_id. Den slutliga begäran URL kommer att vara:
http://marketplace.envato.com/api/edge/item:1263846.json
Du kan försöka infoga webbadressen ovan i din webbläsare och se den returnerade data.
Vi kan också sammanfoga mer än en inställningsalternativ i en enda begäran för att få mer data. Till exempel vill vi ha objektdata och dess författarinformation. Så den tidigare webbadressen blir:
http://marketplace.envato.com/api/edge/item:1263846+user:evoG.json
Envato API returnerar JSON, så i nästa stycke ska vi visa hur man hanterar det i WordPress.
I denna handledning kommer vi inte att diskutera hur man skapar ett WordPress-plugin, men vi kommer att fokusera på några tekniker för att använda API: n i WordPress:
Funktionen nedan hämtar data från Envato-servern och returnerar en PHP-array som innehåller all information vi vill ha.
/ ** * @param String $ item_id - ID för ett Envato Marketplace-objekt * @returns Array - Objektinformationen * / funktionen WPTP_get_item_info ($ item_id) / * Ange API-URL,% s kommer att ersättas med artikel-ID * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Hämta data med WordPress-funktionen wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Kontrollera om fel, om det finns några fel returnera false * / if (is_wp_error ($ response) eller (wp_remote_retrieve_response_code ($ response)! = 200)) return false; / * Omforma JSON-strängen till en PHP-array * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Kontrollera om felaktiga data * / if (! Is_array ($ item_data)) return false; / * Returnera artikelinfo array * / returnera $ item_data;
Vi kan förbättra funktionen ovan. För att förhindra stress på Envato API-servern kan vi cache objektdata och begära informationen igen efter en timeout. WordPress erbjuder oss några funktioner för att genomföra denna funktion. Låt oss lägga till det.
/ ** * @param String $ item_id - ID för en Envato Marketplace-post * @returns Array - Objektinformationen * / funktionen WPTP_get_item_info ($ item_id) / * Data cache timeout på sekunder - Det skickar en ny förfrågan varje timme istället av varje sida uppdateras * / $ CACHE_EXPIRATION = 3600; / * Ange det övergående ID för caching * / $ transient_id = 'WPTP_envato_item_data'; / * Hämta den cachade dataen * / $ cached_item = get_transient ($ transient_id); / * Kontrollera om funktionen måste skicka en ny API-förfrågan * / om (! $ Cached_item || ($ cached_item-> item_id! = $ Item_id)) / * Ange API-webbadressen,% s kommer att ersättas med objektet ID * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Hämta data med WordPress-funktionen wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Kontrollera om fel, om det finns några fel returnera false * / if (is_wp_error ($ response) eller (wp_remote_retrieve_response_code ($ response)! = 200)) return false; / * Omforma JSON-strängen till en PHP-array * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Kontrollera om felaktiga data * / if (! Is_array ($ item_data)) return false; / * Förbered data för caching * / $ data_to_cache = new stdClass (); $ data_to_cache-> item_id = $ item_id; $ data_to_cache-> item_info = $ item_data; / * Ange data för transient-cache-objektet * / set_transient ($ transient_id, $ data_to_cache, $ CACHE_EXPIRATION); / * Returnera artikelinfo array * / returnera $ item_data; / * Om objektet redan har cachet returnera den cachade informationen * / returnera $ cached_item-> item_info;
Nu är kärnfunktionen i vårt WordPress-plugin redo. Vi har använt vissa WordPress-funktioner som hjälper oss att spara tid. All information om dem förklaras i den officiella WordPress Codex.
I nästa steg kommer vi att koda ett användbart WordPress-plugin som gör det möjligt för oss att visa information om ett Envato Marketplace-objekt. All kod nedan är väl kommenterad så att du enkelt kan förstå varje rad. För mer information om Skriva ett WordPress-plugin och WordPress Shortcode API kolla in dokumentationen online i WordPress Codex.
Låt oss skriva rubrikinformationen för vårt plugin
Lägg till WordPress shortcode
Nu skriver vi koden för att lägga till kortkoden och dess funktioner.
"), $ atts), extrakt ($ atts); / * Validering * / om (tomt ($ item_id)) return"Vänligen sätt in ett Envato Marketplace-artikel-ID.
"; / * Hämta data från API * / $ item = WPTP_get_item_info ($ item_id); / * Validation - Kontrollera om något gick fel * / if ($ item === false) return"Hoppsan! Något gick fel. Kolla in artikel-id och försök igen.
"; / * Formatera $ item array * / $ item = $ item ['item']; extrakt ($ item); / * Förbered plugin HTML * / $ html ="; $ html. = ''; returnera $ html;'$ Post.'betyg'. WPTP_get_stars ($ rating). ''$ Försäljning.' försäljning$'.Round ($ kostnad).' endastStjärnklassificeringar fungerar
De WPTP_add_shortcode () funktionen ovan har WPTP_get_stars () procedur som täcker betygsnumret till HTML-stjärnor. Låt oss genomföra det.
Inte betygsätt än
När kortnummerfunktionerna är färdiga måste vi inkludera style.css fil som utformar vårt plugin.
Steg 4: Skriv CSS-regler
De style.css filen finns i samma katalog som huvud pluginfilen och den innehåller alla CSS-reglerna.
/ * WordPress Tutsplus Envato Art Info - CSS Regler * / / * Huvudlayout och typografi * / .wptp_envato_item font-family: "Helvetiva Neue", Arial, sans-serif; marginal: 20px 0; .wptp_wrap bredd: 210px; .wptp_text display: block; .wptp_num display: block; typsnittstorlek: 24px; typsnitt: 300; marginal: 0; vaddering: 0; linjehöjd: 24px; färg: # 66696d; .wptp_num span font-size: 14px; vertikaljustering: super; .wptp_desc display: block; fontstorlek: 12px; typsnitt: 300; marginal: 0; vaddering: 0; linjehöjd: 12px; färg: # 96999d; .wptp_not_rating färg: # 66696d; typsnittstorlek: 13px; font-weight: bold; .wptp_title font-size: 14px; typsnitt: 300; färg: # 66696d; marginal-botten: 10px; / * Stjärnor rating avsnitt * / .wptp_rating width: 82px; text-align: center; marginal: 0 auto 10px auto; .wptp_stars margin: 0; vaddering: 0; listestil: none; .wptp_stars li margin-left: 2px; display: inline-block; vertikaljustering: mitt; bredd: 13px; höjd: 13px; .wptp_stars li.wptp_full_star bakgrund: url (icons-sprite.png) 0px -64px; .wptp_stars li.wptp_empty_star bakgrund: url (icons-sprite.png) -14px -64px; / * Försäljnings- och prisavsnitt * / .wptp_sales, .wptp_thumb, .wptp_price display: inline-block; vertikaljustering: mitt; .wptp_sales text-align: right; marginal-höger: 10px; .wptp_sales .wptp_text width: 52px; .wptp_img_sales background: url (icons-sprite.png) 0px 0px; bredd: 32px; höjd: 32px; display: block; marginal: 0 0 12px 20px; .wptp_img_price background: url (icons-sprite.png) 0px -32px; bredd: 32px; höjd: 32px; display: block; marginalbotten: 7px; .wptp_price text-align: left; marginal-vänster: 10px; .wptp_price .wptp_text width: 34px; / * Köpknappsektion * / .wptp_bottom a display: block; bredd: 78px; höjd: 33px; bakgrund: url (icons-sprite.png) -32px 0px; marginal: 10px auto 0 auto;
Slutsats
Det är det, nu kan vi ladda upp plugin till vår Worpdress-webbplats och använda kraften i WordPress-kortkoder för att visa lite information om Envato Marketplace-objekt. För mer information om Skriva ett WordPress-plugin och WordPress Shortcode API kolla in dokumentationen online på WordPress Codex.
Jag är Michele Ivani och jag hoppas att denna handledning var till hjälp för din WordPress-utveckling. Tack så mycket för att läsa.