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..
In deze tutorial gaan we ons concentreren op:
Dus laten we naar de eerste gaan!
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.
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:
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.
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 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. = ''; return $ html;'$ Post.'beoordeling'. WPTP_get_stars ($ rating). ''$ Omzet.' verkoop$'.Round ($ kosten).' enkel en alleenSterwaarderingsfunctie
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
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.