Bruke Envato API med WordPress

I dag skal vi diskutere hvordan du bruker Envato API i WordPress og opprett en WordPress-kortkode som fremmer våre Envato Marketplace-elementer i vårt WordPress-nettsted. Vi kombinerer den kraftige Envato API, WordPress 'fleksibilitet og litt kreativitet, for å bygge et fantastisk plugin for nettstedet vårt.


La oss sette vårt mål

I denne opplæringen skal vi fokusere på:

  • Enkel grunnleggende kunnskap om Envato API
  • Slik bruker du API-resultatdata inne i WordPress
  • Bygg en WordPress Shortcode som fremmer Envato Marketplace-elementer i vårt WordPress-nettsted.

Så la oss komme inn i den første!


Trinn 1: Forstå Envato API

Envato gir en API som lar utviklere få litt informasjon om Envato Marketplace-produkter, brukerinformasjon, populære prosjekter og så videre. Alle mulige spørsmål er oppført i den offisielle dokumentasjonen. I denne artikkelen diskuterer vi bare den offentlige APIen.

Envato Public API har følgende struktur.

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

Ordet sett må erstattes med et alternativ som er oppført i den angitte kolonnen i API-dokumentasjonen. Så hvis vi ønsker all informasjon om en markedsplass, må vi erstatte sett med element: the_item_id. Den endelige forespørselsadressen vil være:

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

Du kan prøve å sette inn nettadressen ovenfor i nettleseren din og se de returnerte dataene.

Vi kan også sammenkoble mer enn en sett alternativet i en enkelt forespørsel for å få mer data. For eksempel ønsker vi elementdata og forfatterinformasjon. Så den forrige nettadressen blir:

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

Envato API returnerer JSON, så i neste avsnitt skal vi vise hvordan du administrerer det i WordPress.


Trinn 2: Slik bruker du API-resultater i WordPress

I denne opplæringen skal vi ikke diskutere hvordan du lager et WordPress-plugin, men vi skal fokusere på noen teknikker for å bruke API i WordPress:

  • Send API-forespørselen
  • Administrer resultatdataene (JSON-strengen)

Funksjonen nedenfor henter dataene fra Envato-serveren og returnerer et PHP-array som inneholder all informasjonen vi ønsker.

 / ** * @param String $ item_id - IDen til en Envato Marketplace-vare * @returns Array - Objektinformasjonen * / funksjonen WPTP_get_item_info ($ item_id) / * Angi API-nettadressen,% s vil bli erstattet med varen ID * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Hent data ved hjelp av WordPress-funksjonen wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Kontroller for feil, hvis det er noen feil returnerer falskt * / hvis (is_wp_error ($ response) eller (wp_remote_retrieve_response_code ($ response)! = 200)) return false;  / * Forvandle JSON-strengen til et PHP-array * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Sjekk for feil data * / hvis (! Is_array ($ item_data)) return false;  / * Returner element info array * / return $ item_data; 

Vi kan forbedre funksjonen ovenfor. For å unngå stress på Envato API-serveren kan vi cache elementdata og be om informasjonen igjen etter en timeout. WordPress tilbyr oss noen funksjoner for å implementere denne funksjonen. La oss legge til det.

 / ** * @param String $ item_id - IDen til en Envato Marketplace-vare * @returns Array - Objektinformasjonen * / funksjonen WPTP_get_item_info ($ item_id) / * Data cache timeout på sekunder - Det sender en ny forespørsel hver time i stedet på hver side oppdateres * / $ CACHE_EXPIRATION = 3600; / * Angi transient ID for caching * / $ transient_id = 'WPTP_envato_item_data'; / * Få de bufrete dataene * / $ cached_item = get_transient ($ transient_id); / * Sjekk om funksjonen må sende en ny API-forespørsel * / hvis (! $ Cached_item || ($ cached_item-> item_id! = $ Item_id)) / * Angi API-nettadressen,% s vil bli erstattet med elementet ID * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Hent data ved hjelp av WordPress-funksjonen wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Kontroller for feil, hvis det er noen feil returnerer falskt * / hvis (is_wp_error ($ response) eller (wp_remote_retrieve_response_code ($ response)! = 200)) return false;  / * Forvandle JSON-strengen til et PHP-array * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Sjekk for feil data * / hvis (! Is_array ($ item_data)) return false;  / * Forbered data for caching * / $ data_to_cache = new stdClass (); $ data_to_cache-> item_id = $ item_id; $ data_to_cache-> item_info = $ item_data; / * Angi data for transient-cache-elementet * / set_transient ($ transient_id, $ data_to_cache, $ CACHE_EXPIRATION); / * Returner element info array * / return $ item_data;  / * Hvis varen allerede er cached, returner den cached info * / return $ cached_item-> item_info; 

Nå er kjernefunksjonen til vår WordPress-plugin klar. Vi har brukt noen WordPress-funksjoner som hjelper oss å spare tid. All informasjon om dem er forklart i den offisielle WordPress Codex.

  • wp_remote_get () - Henter en URL ved hjelp av HTTP GET-metoden
  • wp_remote_retrieve_response_code () - Kontrollerer at det ikke er feil i det raske svaret
  • wp_remote_retrieve_body () - Henter kroppen til en allerede hentet HTTP-forespørsel.
  • set_transient () - Caches data
  • get_transient () - Får bufret data

Trinn 3: Bygg WordPress Shortcode

I de neste trinnene skal vi kode en nyttig WordPress-plugin som lar oss vise noen opplysninger om et Envato Marketplace-element. All kode nedenfor er godt kommentert, slik at du enkelt kan forstå hver linje. For mer informasjon om Skriving av en WordPress-plugin og WordPress Shortcode API sjekk ut online dokumentasjonen i WordPress Codex.

La oss begynne

La oss skrive topptekstinformasjonen for pluginet vårt

  

Legg til WordPress shortcode

Nå skriver vi koden for å legge til kortkoden og dens funksjonaliteter.

 "), $ atts), ekstrakt ($ atts); / * Validering * / hvis (tomt ($ item_id)) return"

Vennligst sett inn en Envato Marketplace-varenummer.

"; / * Få data fra API * / $ item = WPTP_get_item_info ($ item_id); / * Validation - Sjekk om noe gikk galt * / hvis ($ item === false) return"

Oops! Noe gikk galt. Vennligst sjekk ut elementet ID og prøv igjen.

"; / * Formater $ elementet array * / $ item = $ item ['item']; ekstrakt ($ item); / * Forbered Plugin HTML * / $ html ="; $ html. = '
'. $ Element.
vurdering'. WPTP_get_stars ($ rating). '
'. $ Salg. salg
'. $ Element.
$'.Round ($ kostnad). bare
'; returner $ html;

Stjernevurdering fungerer

De WPTP_add_shortcode () funksjonen ovenfor har WPTP_get_stars () prosedyre som dekker ratingnummeret til HTML-stjerner. La oss implementere det.

 Ikke vurder ennå
'; / * Ellers hvis vurdering er> = 1, konverterer funksjonen til HTML-stjerner og returnerer dem som en streng * / $ return = '
    '; $ I = 1; mens ((- $ rating)> = 0) $ return. = ''; $ I ++; hvis ($ rating == -0.5) $ return. = ''; $ I ++; mens ($ i <= 5 ) $return .= ''; $ I ++; $ return. = '
'; returnere $ return;

Inkluder CSS

Når kortnummerfunksjonene er fullført, må vi inkludere style.css fil som stiler vårt plugin.

  

Trinn 4: Skriv CSS-regler

De style.css filen er inne i samme katalog som hoved plugin-filen, og den inneholder alle CSS-reglene.

 / * WordPress Tutsplus Envato Artikkel - CSS Regler * / / * Hovedoppsett og typografi * / .wptp_envato_item font-family: "Helvetiva Neue", Arial, sans-serif; margin: 20px 0;  .wptp_wrap bredde: 210px;  .wptp_text display: block;  .wptp_num display: block; skriftstørrelse: 24px; font-weight: 300; margin: 0; polstring: 0; linjehøyde: 24px; farge: # 66696d;  .wptp_num span font-size: 14px; vertikaljustering: super;  .wptp_desc display: block; skriftstørrelse: 12px; font-weight: 300; margin: 0; polstring: 0; linjehøyde: 12px; farge: # 96999d;  .wptp_not_rating color: # 66696d; skriftstørrelse: 13px; font-weight: bold;  .wptp_title font-size: 14px; font-weight: 300; farge: # 66696d; margin-bunn: 10px;  / * Stjerner vurdering delen * / .wptp_rating width: 82px; tekst-align: center; margin: 0 auto 10px auto;  .wptp_stars margin: 0; polstring: 0; listestil: none;  .wptp_stars li margin-left: 2px; display: inline-block; vertikaljustering: midt; bredde: 13px; høyde: 13px;  .wptp_stars li.wptp_full_star bakgrunn: url (icons-sprite.png) 0px -64px;  .wptp_stars li.wptp_empty_star bakgrunn: url (icons-sprite.png) -14px -64px;  / * Salgs- og prisavsnitt * / .wptp_sales, .wptp_thumb, .wptp_price display: inline-block; vertikaljustering: midt;  .wptp_sales text-align: right; margin-høyre: 10px;  .wptp_sales .wptp_text width: 52px;  .wptp_img_sales bakgrunn: url (icons-sprite.png) 0px 0px; bredde: 32px; høyde: 32px; skjerm: blokk; margin: 0 0 12px 20px;  .wptp_img_price bakgrunn: url (icons-sprite.png) 0px -32px; bredde: 32px; høyde: 32px; skjerm: blokk; margin-bunn: 7px;  .wptp_price text-align: left; margin-venstre: 10px;  .wptp_price .wptp_text width: 34px;  / * Kjøpsknappseksjonen * / .wptp_bottom a display: block; bredde: 78px; høyde: 33px; bakgrunn: url (icons-sprite.png) -32px 0px; margin: 10px auto 0 auto; 

Konklusjon

Det er det, nå kan vi laste opp pluginet til vårt Worpdress-nettsted og bruke kraften til WordPress-kortkoder for å vise litt info om Envato Marketplace-elementer. For mer informasjon om Skriving av en WordPress-plugin og WordPress Shortcode API sjekk ut online dokumentasjonen på WordPress Codex.

Jeg er Michele Ivani, og jeg håper denne opplæringen var nyttig for din WordPress-utvikling. Takk så mye for å lese.