Heute werden wir über die Verwendung der Envato-API in WordPress diskutieren und einen WordPress-Shortcode erstellen, der unsere Envato Marketplace-Artikel in unserer WordPress-Site bewirbt. Wir werden die leistungsstarke Envato-API, die Flexibilität von WordPress und ein wenig Kreativität kombinieren, um ein erstaunliches Plugin für unsere Website zu erstellen.
In diesem Tutorial konzentrieren wir uns auf:
Kommen wir zum ersten!
Envato bietet eine API, mit der Entwickler Informationen zu Envato Marketplace-Elementen, Benutzerinformationen, beliebte Projekte usw. abrufen können. Alle möglichen Fragen sind in der offiziellen Dokumentation aufgeführt. In diesem Artikel behandeln wir nur die öffentliche API.
Die Envato Public API hat die folgende Struktur.
http://marketplace.envato.com/api/edge/set.json
Das Wort einstellen muss durch eine Option ersetzt werden, die in der Spalte set der API-Dokumentation aufgeführt ist. Wenn wir also alle Informationen über einen Marktplatzartikel erhalten möchten, müssen wir diese ersetzen einstellen mit item: the_item_id. Die endgültige Anforderungs-URL lautet:
http://marketplace.envato.com/api/edge/item:1263846.json
Sie können versuchen, die oben angegebene URL in Ihren Webbrowser einzufügen und die zurückgegebenen Daten anzuzeigen.
Wir können auch mehrere verketten Option setzen in einer einzigen Anfrage, um mehr Daten zu erhalten. Zum Beispiel möchten wir die Artikeldaten und ihre Autorinformationen. Die vorherige URL wird also zu:
http://marketplace.envato.com/api/edge/item:1263846+user:evoG.json
Die Envato-API gibt JSON zurück. Im nächsten Abschnitt wird gezeigt, wie sie in WordPress verwaltet wird.
In diesem Tutorial werden wir nicht besprechen, wie man ein WordPress-Plugin erstellt, aber wir werden uns auf einige Techniken konzentrieren, um die API in WordPress zu verwenden:
Die folgende Funktion ruft die Daten vom Envato-Server ab und gibt ein PHP-Array zurück, das alle gewünschten Informationen enthält.
/ ** * @param String $ item_id - Die ID eines Envato Marketplace-Elements * @returns Array - Die Elementinformationen * / Funktion WPTP_get_item_info ($ item_id) / * Setzen Sie die API-URL.% s wird durch die Element-ID ersetzt * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Abrufen von Daten mithilfe der WordPress-Funktion wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Auf Fehler prüfen, wenn Fehler aufgetreten sind, zurück false * / if (is_wp_error ($ response) oder (wp_remote_retrieve_response_code ($ response)! = 200)) return false; / * Wandle den JSON-String in ein PHP-Array um * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Auf falsche Daten überprüfen * / if (! Is_array ($ item_data)) return false; / * Element-Info-Array zurückgeben * / return $ item_data;
Wir können die Funktion oben verbessern. Um den Envato API-Server nicht zu belasten, können wir Artikeldaten zwischenspeichern und die Informationen nach einem Timeout erneut anfordern. WordPress bietet einige Funktionen zur Implementierung dieser Funktion. Lass es uns hinzufügen.
/ ** * @param String $ item_id - Die ID eines Envato Marketplace-Elements * @returns Array - Die Elementinformationen * / function WPTP_get_item_info ($ item_id) / * Zeitüberschreitung des Daten-Cache in Sekunden - Stattdessen wird jede Stunde eine neue Anforderung gesendet von jeder Seitenaktualisierung * / $ CACHE_EXPIRATION = 3600; / * Legt die Transient-ID für das Caching fest * / $ transient_id = 'WPTP_envato_item_data'; / * Hole die zwischengespeicherten Daten * / $ cached_item = get_transient ($ transient_id); / * Prüfen Sie, ob die Funktion eine neue API-Anforderung senden muss. * / If (! $ Cached_item || ($ cached_item-> item_id! = $ Item_id)) / * Setzen Sie die API-URL.% S wird durch das Element ersetzt ID * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Abrufen von Daten mithilfe der WordPress-Funktion wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Auf Fehler prüfen, wenn Fehler aufgetreten sind, zurück false * / if (is_wp_error ($ response) oder (wp_remote_retrieve_response_code ($ response)! = 200)) return false; / * Wandle den JSON-String in ein PHP-Array um * / $ item_data = json_decode (wp_remote_retrieve_body ($ response), true); / * Auf falsche Daten überprüfen * / if (! Is_array ($ item_data)) return false; / * Vorbereiten der Daten für das Caching * / $ data_to_cache = new stdClass (); $ data_to_cache-> item_id = $ item_id; $ data_to_cache-> item_info = $ item_data; / * Setze die Transient-Cache-Elementdaten * / set_transient ($ transient_id, $ data_to_cache, $ CACHE_EXPIRATION); / * Element-Info-Array zurückgeben * / return $ item_data; / * Wenn das Element bereits zwischengespeichert ist, geben Sie die zwischengespeicherten Informationen zurück. * / Return $ cached_item-> item_info;
Nun ist die Kernfunktion unseres WordPress-Plugins fertig. Wir haben einige WordPress-Funktionen verwendet, die uns helfen, Zeit zu sparen. Alle Informationen dazu werden im offiziellen WordPress-Codex erläutert.
In den nächsten Schritten werden wir ein nützliches WordPress-Plugin codieren, mit dem wir einige Informationen zu einem Envato Marketplace-Artikel anzeigen können. Der gesamte Code ist gut kommentiert, sodass Sie jede Zeile leicht verstehen können. Weitere Informationen zum Schreiben eines WordPress-Plugins und zur WordPress Shortcode-API finden Sie in der Online-Dokumentation des WordPress-Codex.
Schreiben wir die Header-Informationen für unser Plugin
Fügen Sie den WordPress-Kurzcode hinzu
Jetzt schreiben wir den Code, um den Shortcode und seine Funktionen hinzuzufügen.
"), $ atts); extrahieren ($ atts); / * Validation * / if (empty ($ item_id)) return"Bitte geben Sie eine Envato Marketplace-Artikel-ID ein.
"; / * Daten von der API abrufen * / $ item = WPTP_get_item_info ($ item_id); / * Überprüfung - Prüfen, ob etwas schiefgelaufen ist * / if ($ item === false) return"Ups! Irgendwas lief schief. Bitte überprüfen Sie die Artikel-ID und versuchen Sie es erneut.
"; / * Formatieren des $ item-Arrays * / $ item = $ item ['item']; extract ($ item); / * Vorbereiten des Plugins HTML * / $ html ="; $ html. = ''; return $ html;'. $ item.'bewertung'. WPTP_get_stars ($ rating). ''. $ Umsatz.' Der Umsatz$'.round ($ cost).' nurSternbewertungen funktionieren
Das WPTP_add_shortcode () Funktion oben hat die WPTP_get_stars () Prozedur, die die Bewertungszahl in HTML-Sterne umwandelt. Lass es uns implementieren.
Noch nicht bewertet
Wenn die Shortcode-Funktionen abgeschlossen sind, müssen wir die style.css Datei, die unser Plugin formatiert.
Schritt 4: Schreiben Sie CSS-Regeln
Das style.css Die Datei befindet sich im selben Verzeichnis wie die Haupt-Plugin-Datei und enthält alle CSS-Regeln.
/ * WordPress Tutsplus Envato Artikelinfo - CSS-Regeln * / / * Hauptlayout und Typografie * / .wptp_envato_item font-family: "Helvetiva Neue", Arial, serifenlos; Marge: 20px 0; .wptp_wrap width: 210px; .wptp_text display: block; .wptp_num display: block; Schriftgröße: 24px; Schriftgewicht: 300; Marge: 0; Polsterung: 0; Zeilenhöhe: 24px; Farbe: # 66696d; .wptp_num span font-size: 14px; vertikal ausrichten: super; .wptp_desc display: block; Schriftgröße: 12px; Schriftgewicht: 300; Marge: 0; Polsterung: 0; Zeilenhöhe: 12px; Farbe: # 96999d; .wptp_not_rating color: # 66696d; Schriftgröße: 13px; Schriftdicke: fett; .wptp_title font-size: 14px; Schriftgewicht: 300; Farbe: # 66696d; Rand unten: 10px; / * Bewertung der Sterne * / .wptp_rating width: 82px; Text ausrichten: Mitte; Marge: 0 auto 10px auto; .wptp_stars margin: 0; Polsterung: 0; Listenstil: keine; .wptp_stars li margin-left: 2px; Anzeige: Inline-Block; vertikal ausrichten: Mitte; Breite: 13px; Höhe: 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; / * Verkaufs- und Preisabschnitte * / .wptp_sales, .wptp_thumb, .wptp_price display: inline-block; vertikal ausrichten: Mitte; .wptp_sales text-align: right; Rand rechts: 10px; .wptp_sales .wptp_text width: 52px; .wptp_img_sales background: url (icons-sprite.png) 0px 0px; Breite: 32px; Höhe: 32px; Bildschirmsperre; Marge: 0 0 12px 20px; .wptp_img_price background: url (icons-sprite.png) 0px -32px; Breite: 32px; Höhe: 32px; Bildschirmsperre; Rand unten: 7px; .wptp_price text-align: left; Rand links: 10px; .wptp_price .wptp_text width: 34px; / * Kaufschaltflächenabschnitt * / .wptp_bottom a display: block; Breite: 78px; Höhe: 33px; Hintergrund: URL (Icons-Sprite.png) -32px 0px; Marge: 10px auto 0 auto;
Fazit
Jetzt können wir das Plugin auf unsere Worpdress-Site hochladen und mithilfe der Kurzfunktionen von WordPress einige Informationen zu Envato Marketplace-Elementen anzeigen. Weitere Informationen zum Schreiben eines WordPress-Plugins und zur WordPress Shortcode-API finden Sie in der Online-Dokumentation zum WordPress-Codex.
Ich bin Michele Ivani und hoffe, dass dieses Tutorial für Ihre WordPress-Entwicklung hilfreich war. Vielen Dank fürs Lesen.