De Envato API gebruiken met WordPress

Vandaag bespreken we hoe de Envato-API in WordPress te gebruiken en een WordPress shortcode te maken die onze Envato Marketplace-items binnen onze WordPress-site promoot. We zullen de krachtige Envato API, WordPress 'flexibiliteit en een beetje creativiteit combineren om een ​​geweldige plug-in voor onze site te bouwen..


Laten we ons doel stellen

In deze tutorial gaan we ons concentreren op:

  • Enkele basiskennis over de Envato API
  • Hoe API-resultaatgegevens in WordPress te gebruiken
  • Bouw een WordPress Shortcode die Envato Marketplace-items promoot op onze WordPress-site.

Dus laten we naar de eerste gaan!


Stap 1: De Envato API begrijpen

Envato biedt een API waarmee ontwikkelaars informatie kunnen krijgen over Envato Marketplace-items, gebruikersinformatie, populaire projecten, enzovoort. Alle mogelijke vragen worden vermeld in de officiële documentatie. In dit artikel bespreken we alleen de openbare API.

De Envato Public API heeft de volgende structuur.

 http://marketplace.envato.com/api/edge/set.json

Het woord reeks moet worden vervangen door een optie die wordt vermeld in de kolom set van de API-documentatie. Dus als we alle informatie willen over een marktplaatsitem dat we moeten vervangen reeks met artikel: the_item_id. De uiteindelijke aanvraag-URL is:

 http://marketplace.envato.com/api/edge/item:1263846.json

U kunt proberen de bovenstaande URL in uw webbrowser in te voegen en de geretourneerde gegevens te bekijken.

We kunnen er ook meer dan één samenvoegen stel optie in in een enkel verzoek om meer gegevens te ontvangen. We willen bijvoorbeeld de artikelgegevens en de auteursinformatie. Dus de vorige URL wordt:

 http://marketplace.envato.com/api/edge/item:1263846+user:evoG.json

De Envato-API retourneert JSON, dus in de volgende alinea laten we zien hoe u deze in WordPress kunt beheren.


Stap 2: API-resultaten gebruiken in WordPress

In deze zelfstudie bespreken we niet hoe we een WordPress-plug-in kunnen maken, maar we gaan ons concentreren op enkele technieken om de API in WordPress te gebruiken:

  • Stuur de API-aanvraag
  • Beheer de resultaatgegevens (de JSON-reeks)

De onderstaande functie haalt de gegevens op van de Envato-server en retourneert een PHP-array die alle gewenste informatie bevat.

 / ** * @param String $ item_id - Het ID van een Envato Marketplace-artikel * @returns Array - De artikelinformatie * / functie WPTP_get_item_info ($ item_id) / * Stel de API-URL in,% s wordt vervangen door het item-ID * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Gegevens ophalen met behulp van de WordPress-functie wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Controleer op fouten, als er fouten zijn, retourneer dan false * / if (is_wp_error ($ response) of (wp_remote_retrieve_response_code ($ response)! = 200)) return false;  / * Transformeer de JSON-reeks in een PHP-array * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Controleer op onjuiste gegevens * / if (! Is_array ($ item_data)) return false;  / * Return item info array * / return $ item_data; 

We kunnen de bovenstaande functie verbeteren. Om stress op de Envato API-server te voorkomen, kunnen we artikelgegevens in de cache opslaan en de info na een time-out opnieuw aanvragen. WordPress biedt ons enkele functies om deze functie te implementeren. Laten we het toevoegen.

 / ** * @param String $ item_id - De ID van een Envato Marketplace-artikel * @returns Array - De artikelinformatie * / functie WPTP_get_item_info ($ item_id) / * Data-cache-time-out in seconden - Het verzendt elk uur een nieuw verzoek in plaats van van elke pagina verversen * / $ CACHE_EXPIRATION = 3600; / * Stel de tijdelijke ID in voor caching * / $ transient_id = 'WPTP_envato_item_data'; / * Verkrijg de gecachte gegevens * / $ cached_item = get_transient ($ transient_id); / * Controleer of de functie een nieuwe API-aanvraag moet verzenden * / if (! $ Cached_item || ($ cached_item-> item_id! = $ Item_id)) / * Stel de API-URL in,% s wordt vervangen door het item ID * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Gegevens ophalen met behulp van de WordPress-functie wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Controleer op fouten, als er fouten zijn, retourneer dan false * / if (is_wp_error ($ response) of (wp_remote_retrieve_response_code ($ response)! = 200)) return false;  / * Transformeer de JSON-reeks in een PHP-array * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Controleer op onjuiste gegevens * / if (! Is_array ($ item_data)) return false;  / * Gegevens voorbereiden voor caching * / $ data_to_cache = nieuwe stdClass (); $ data_to_cache-> item_id = $ item_id; $ data_to_cache-> item_info = $ item_data; / * Stel de transient - cache-itemgegevens * / set_transient in ($ transient_id, $ data_to_cache, $ CACHE_EXPIRATION); / * Return item info array * / return $ item_data;  / * Als het item al in de cache staat, stuur dan de cache info * terug / return $ cached_item-> item_info; 

Nu is de kernfunctie van onze WordPress-plug-in klaar. We hebben enkele WordPress-functies gebruikt die ons helpen tijd te besparen. Alle informatie over hen wordt uitgelegd in de officiële WordPress Codex.

  • wp_remote_get () - Haalt een URL op met behulp van de HTTP GET-methode
  • wp_remote_retrieve_response_code () - Controleert of er geen fouten in de onbewerkte reactie voorkomen
  • wp_remote_retrieve_body () - Haalt de hoofdtekst van een reeds opgehaald HTTP-verzoek op.
  • set_transient () - Gegevens in cache
  • get_transient () - Krijgt gegevens in de cache

Stap 3: Bouw WordPress Shortcode

In de volgende stappen gaan we een nuttige WordPress-plug-in coderen waarmee we informatie over een Envato Marketplace-item kunnen weergeven. Alle onderstaande code is goed becommentarieerd, zodat u elke regel gemakkelijk kunt begrijpen. Voor meer informatie over het schrijven van een WordPress-plug-in en de WordPress Shortcode API bekijk de online documentatie in de WordPress Codex.

Laten we beginnen

Laten we de koptekstinformatie voor onze plug-in schrijven

  

Voeg de WordPress shortcode toe

Nu schrijven we de code om de shortcode en de functionaliteiten ervan toe te voegen.

 "), $ atts); extract ($ atts); / * Validation * / if (empty ($ item_id)) retourneer"

Voer een Envato Marketplace-item-ID in.

"; / * Verkrijg data van de API * / $ item = WPTP_get_item_info ($ item_id); / * Validatie - Controleer of er iets fout is gegaan * / if ($ item === false) terug"

Oeps! Er is iets misgegaan. Bekijk de item-ID en probeer het opnieuw.

"; / * Formaat $ item array * / $ item = $ item ['item']; extract ($ item); / * De HTML-invoegtoepassing voorbereiden * / $ html ="; $ html. = '
'$ Post.'
beoordeling'. WPTP_get_stars ($ rating). '
'$ Omzet.' verkoop
'$ Post.'
$'.Round ($ kosten).' enkel en alleen
'; return $ html;

Sterwaarderingsfunctie

De WPTP_add_shortcode () functie hierboven heeft de WPTP_get_stars () procedure die het ratingnummer naar HTML-sterren omspant. Laten we het implementeren.

 Nog geen beoordeling
'; / * Anders als rating> = 1 is, converteert de functie deze naar HTML-sterren en retourneert deze als een tekenreeks * / $ return = '
    '; $ I = 1; while ((- $ rating)> = 0) $ return. = ''; $ I ++; if ($ rating == -0.5) $ return. = ''; $ I ++; while ($ i <= 5 ) $return .= ''; $ I ++; $ return. = '
'; return $ return;

CSS opnemen

Wanneer de shortcode-functies zijn voltooid, moeten we de style.css bestand dat onze plugin stijlen.

  

Stap 4: schrijf CSS-regels

De style.css bestand bevindt zich in dezelfde map als het hoofdinvoegbestand en bevat alle CSS-regels.

 / * WordPress Tutsplus Envato Onderdeel Info - CSS-regels * / / * Hoofdlay-out en typografie * / .wptp_envato_item font-family: "Helvetiva Neue", Arial, sans-serif; marge: 20 px 0;  .wptp_wrap width: 210px;  .wptp_text display: block;  .wptp_num display: block; tekengrootte: 24 px; font-gewicht: 300; marge: 0; opvulling: 0; regelhoogte: 24 px; kleur: # 66696d;  .wptp_num span font-size: 14px; vertical-align: super;  .wptp_desc display: block; lettergrootte: 12px; font-gewicht: 300; marge: 0; opvulling: 0; regelhoogte: 12px; kleur: # 96999d;  .wptp_not_rating color: # 66696d; lettergrootte: 13px; lettertype: vet;  .wptp_title font-size: 14px; font-gewicht: 300; kleur: # 66696d; margin-bottom: 10px;  / * Sterren rating sectie * / .wptp_rating width: 82px; text-align: center; marge: 0 auto 10px auto;  .wptp_stars marge: 0; opvulling: 0; lijststijl: geen;  .wptp_stars li margin-left: 2px; weergave: inline-block; vertical-align: middle; breedte: 13px; hoogte: 13px;  .wptp_stars li.wptp_full_star background: url (icons-sprite.png) 0px -64px;  .wptp_stars li.wptp_empty_star background: url (icons-sprite.png) -14px -64px;  / * Verkoop- en prijssecties * / .wptp_sales, .wptp_thumb, .wptp_price display: inline-block; vertical-align: middle;  .wptp_sales text-align: right; margin-right: 10px;  .wptp_sales. wptp_text width: 52px;  .wptp_img_sales background: url (icons-sprite.png) 0px 0px; breedte: 32px; hoogte: 32 px; weergave: blok; marge: 0 0 12px 20px;  .wptp_img_price background: url (icons-sprite.png) 0px -32px; breedte: 32px; hoogte: 32 px; weergave: blok; margin-bottom: 7px;  .wptp_price text-align: left; marge links: 10 px;  .wptp_price .wptp_text width: 34px;  / * Aankoopknopgedeelte * / .wptp_bottom a display: block; breedte: 78 px; hoogte: 33 px; achtergrond: url (icons-sprite.png) -32px 0px; marge: 10px auto 0 auto; 

Conclusie

Dat is alles, nu kunnen we de plug-in uploaden naar onze Worpdress-site en de kracht van WordPress-shortcodes gebruiken om wat info weer te geven over Envato Marketplace-items. Voor meer informatie over het schrijven van een WordPress-plug-in en de WordPress Shortcode API bekijk de online documentatie over de WordPress Codex.

Ik ben Michele Ivani en ik hoop dat deze tutorial nuttig was voor je WordPress-ontwikkeling. Heel erg bedankt voor het lezen.