Använda Envato API med WordPress

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.


Låt oss sätta vårt mål

I denna handledning kommer vi att fokusera på:

  • Några grundläggande kunskaper om Envato API
  • Hur man använder API-resultatdata inom WordPress
  • Bygg en WordPress Shortcode som marknadsför Envato Marketplace-objekt på vår WordPress-webbplats.

Så låt oss komma in i den första!


Steg 1: Förstå Envato API

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.


Steg 2: Så här använder du API-resultat 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:

  • Skicka API-förfrågan
  • Hantera resultatdata (JSON-strängen)

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.

  • wp_remote_get () - Hämtar en URL med hjälp av HTTP GET-metoden
  • wp_remote_retrieve_response_code () - Kontrollerar att det inte finns några fel i det raka svaret
  • wp_remote_retrieve_body () - Hämtar kroppen av en redan hämtad HTTP-begäran.
  • set_transient () - Caches data
  • get_transient () - Får cachad data

Steg 3: Bygg WordPress Shortcode

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 börja

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. = '
'$ Post.'
betyg'. WPTP_get_stars ($ rating). '
'$ Försäljning.' försäljning
'$ Post.'
$'.Round ($ kostnad).' endast
'; returnera $ html;

Stjä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
'; / * Annars om rating är> = 1 funktionen konverterar den till HTML-stjärnor och returnerar dem som en sträng * / $ return = '
    '; $ I = 1; medan ((- $ rating)> = 0) $ return. = ''; $ I ++; om ($ rating == -0.5) $ return. = ''; $ I ++; medan ($ i <= 5 ) $return .= ''; $ I ++; $ return. = '
'; returnera $ return

Inkludera CSS

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.