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.
I denne opplæringen skal vi fokusere på:
Så la oss komme inn i den første!
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.
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:
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.
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 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. = ''; returner $ html;'. $ Element.vurdering'. WPTP_get_stars ($ rating). ''. $ Salg. salg$'.Round ($ kostnad). bareStjernevurdering 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å
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.