Utilisation de l'API Envato avec WordPress

Aujourd'hui, nous allons discuter de la manière d'utiliser l'API Envato dans WordPress et de créer un shortcode WordPress faisant la promotion de nos éléments de marché Envato dans notre site WordPress. Nous allons combiner la puissante API Envato, la flexibilité de WordPress et un peu de créativité pour créer un plugin incroyable pour notre site..


Fixons notre objectif

Dans ce tutoriel, nous allons nous concentrer sur:

  • Quelques connaissances de base sur l'API Envato
  • Comment utiliser les données de résultat de l'API dans WordPress
  • Construire un Shortcode WordPress faisant la promotion des articles Envato Marketplace dans notre site WordPress.

Alors entrons dans le premier!


Étape 1: Comprendre l'API Envato

Envato fournit une API qui permet aux développeurs d'obtenir des informations sur les éléments d'Envato Marketplace, les informations des utilisateurs, les projets les plus populaires, etc. Toutes les requêtes possibles sont répertoriées dans la documentation officielle. Dans cet article, nous ne parlons que de l'API publique.

L'API publique Envato a la structure suivante.

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

Le mot ensemble doit être remplacé par une option répertoriée dans la colonne ensemble de la documentation de l'API. Donc, si nous voulons toutes les informations sur un article du marché, nous devons remplacer ensemble avec élément: the_item_id. L'URL de la demande finale sera:

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

Vous pouvez essayer d'insérer l'URL ci-dessus dans votre navigateur Web et voir les données retournées.

Nous pouvons également concaténer plus d’un définir l'option en une seule demande pour obtenir plus de données. Par exemple, nous voulons les données d'élément et leurs informations d'auteur. Donc l'URL précédente deviendra:

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

L'API Envato renvoie le code JSON. Dans le paragraphe suivant, nous allons montrer comment le gérer dans WordPress..


Étape 2: Comment utiliser les résultats de l'API dans WordPress

Dans ce tutoriel, nous n'allons pas discuter de la création d'un plugin WordPress, mais nous allons nous concentrer sur certaines techniques d'utilisation de l'API dans WordPress:

  • Envoyer la demande d'API
  • Gérer les données de résultat (la chaîne JSON)

La fonction ci-dessous récupère les données du serveur Envato et renvoie un tableau PHP contenant toutes les informations souhaitées..

 / ** * @param String $ item_id - ID d'un élément du marché Envato * * @returns Array - Informations sur l'élément * / function WPTP_get_item_info ($ item_id) / * Définir l'URL de l'API,% s sera remplacé par l'ID de l'élément * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Récupération de données à l'aide de la fonction WordPress wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Vérifie les erreurs, s'il y en a, retourne false * / if (is_wp_error ($ response) ou (wp_remote_retrieve_response_code ($ response)! = =)) Return false;  / * Transforme la chaîne JSON en un tableau PHP * / $ item_data = json_decode (wp_remote_retrieve_body ($ réponse), true); / * Vérifie les données incorrectes * / if (! Is_array ($ item_data)) return false;  / * Retourne un tableau d'informations sur les objets * / return $ item_data; 

Nous pouvons améliorer la fonction ci-dessus. Pour éviter le stress sur le serveur API Envato, nous pouvons mettre en cache les données d'élément et demander à nouveau les informations après un délai d'attente. WordPress nous offre quelques fonctions pour implémenter cette fonctionnalité. Ajoutons-le.

 / ** * @param String $ item_id - ID d'un élément du marché Envato * @returns Array - Informations sur l'élément * / function WPTP_get_item_info ($ item_id) / * Délai d'expiration du cache de données en secondes - Il envoie une nouvelle demande chaque heure à la place. de chaque rafraîchissement de page * / $ CACHE_EXPIRATION = 3600; / * Définir l'ID transitoire pour la mise en cache * / $ transient_id = 'WPTP_envato_item_data'; / * Récupère les données en cache * / $ cached_item = get_transient ($ transient_id); / * Vérifie si la fonction doit envoyer une nouvelle demande d'API * / if (! $ Cached_item || ($ cached_item-> item_id! = $ Item_id)) / * Définit l'URL de l'API,% s sera remplacé par l'élément ID * / $ api_url = "http://marketplace.envato.com/api/edge/item:%s.json"; / * Récupération de données à l'aide de la fonction WordPress wp_remote_get () * / $ response = wp_remote_get (sprintf ($ api_url, $ item_id)); / * Vérifie les erreurs, s'il y en a, retourne false * / if (is_wp_error ($ response) ou (wp_remote_retrieve_response_code ($ response)! = =)) Return false;  / * Transforme la chaîne JSON en un tableau PHP * / $ item_data = json_decode (wp_remote_retrieve_body ($ réponse), true); / * Vérifie les données incorrectes * / if (! Is_array ($ item_data)) return false;  / * Préparer les données pour la mise en cache * / $ data_to_cache = new stdClass (); $ data_to_cache-> item_id = $ item_id; $ data_to_cache-> item_info = $ item_data; / * Définit les données d'élément de cache transitoires * / set_transient ($ transient_id, $ data_to_cache, $ CACHE_EXPIRATION); / * Retourne un tableau d'informations sur les objets * / return $ item_data;  / * Si l'élément est déjà mis en cache, retournez les informations mises en cache * / return $ cached_item-> item_info; 

La fonction principale de notre plugin WordPress est maintenant prête. Nous avons utilisé certaines fonctions WordPress qui nous aident à gagner du temps. Toutes les informations à leur sujet sont expliquées dans le WordPress Codex officiel.

  • wp_remote_get () - Récupère une URL en utilisant la méthode HTTP GET
  • wp_remote_retrieve_response_code () - Vérifie qu'il n'y a pas d'erreur dans la réponse brute
  • wp_remote_retrieve_body () - Récupère le corps d'une requête HTTP déjà récupérée.
  • set_transient () - Données de caches
  • get_transient () - Obtient les données en cache

Étape 3: Construire WordPress Shortcode

Dans les étapes suivantes, nous allons coder un plugin WordPress utile qui nous permet d’afficher des informations sur un élément du marché Envato. Tout le code ci-dessous est bien commenté afin que vous puissiez facilement comprendre chaque ligne. Pour plus de détails sur l'écriture d'un plugin WordPress et l'API WordPress Shortcode, consultez la documentation en ligne dans le codex WordPress..

Commençons

Ecrivons les informations d'en-tête de notre plugin

  

Ajouter le shortcode WordPress

Maintenant nous écrivons le code pour ajouter le shortcode et ses fonctionnalités.

 "), $ atts); extract ($ atts); / * Validation * / if (vide ($ item_id)) return"

Veuillez insérer un numéro d'article du marché Envato.

"; / * Obtenir des données de l'API * / $ item = WPTP_get_item_info ($ item_id); / * Validation - Vérifie si une erreur s'est produite * / if ($ item === false) return"

Oups… Quelque chose s'est mal passé. Veuillez vérifier l'ID d'article et réessayer..

"; / * Formatez le tableau $ item * / $ item = $ item ['item']; extract ($ item); / * Préparez le plugin HTML * / $ html ="; $ html. = '
'. $ item.'
évaluation'. WPTP_get_stars ($ rating). '
". $ ventes." Ventes
'. $ item.'
$'.round ($ cost).' seulement
'; return $ html;

Fonction de classement par étoiles

le WPTP_add_shortcode () fonction ci-dessus a la WPTP_get_stars () procédure qui couvre le numéro d’évaluation en étoiles HTML. Mettons en œuvre.

 Pas encore d'évaluation
'; / * Sinon si rating est> = 1, la fonction la convertit en étoiles HTML et les renvoie sous forme de chaîne * / $ return = '
    '; $ i = 1; while ((- $ rating)> = 0) $ return. = ''; $ i ++; if ($ rating == -0.5) $ return. = ''; $ i ++; tant que ($ i <= 5 ) $return .= ''; $ i ++; $ return. = '
'; return $ return;

Inclure les CSS

Lorsque les fonctions de shortcode sont terminées, nous devons inclure le style.css fichier qui style notre plugin.

  

Étape 4: Écrire des règles CSS

le style.css le fichier se trouve dans le même répertoire que le fichier de plugin principal et contient toutes les règles CSS.

 / * WordPress Tutsplus Envato Informations sur l'élément - Règles CSS * / / * Disposition principale et typographie * / .wptp_envato_item font-family: "Helvetiva Neue", Arial, sans-serif; marge: 20px 0;  .wptp_wrap width: 210px;  .wptp_text display: block;  .wptp_num display: block; taille de police: 24px; poids de la police: 300; marge: 0; rembourrage: 0; hauteur de ligne: 24px; couleur: # 66696d;  .wptp_num span taille de la police: 14px; alignement vertical: super;  .wptp_desc display: block; taille de police: 12px; poids de la police: 300; marge: 0; rembourrage: 0; hauteur de ligne: 12px; couleur: # 96999d;  .wptp_not_rating color: # 66696d; taille de police: 13px; poids de police: gras;  .wptp_title taille de la police: 14px; poids de la police: 300; couleur: # 66696d; marge inférieure: 10px;  / * Section de classement des étoiles * / .wptp_rating width: 82px; text-align: center; marge: 0 auto 10px auto;  .wptp_stars margin: 0; rembourrage: 0; style de liste: aucun;  .wptp_stars li marge gauche: 2px; affichage: inline-block; alignement vertical: milieu; largeur: 13px; hauteur: 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;  / * Sections Ventes et Prix * / .wptp_sales, .wptp_thumb, .wptp_price display: inline-block; alignement vertical: milieu;  .wptp_sales text-align: right; marge droite: 10px;  .wptp_sales .wptp_text width: 52px;  .wptp_img_sales background: url (icons-sprite.png) 0px 0px; largeur: 32px; hauteur: 32px; bloc de visualisation; marge: 0 0 12px 20px;  .wptp_img_price background: url (icons-sprite.png) 0px -32px; largeur: 32px; hauteur: 32px; bloc de visualisation; marge inférieure: 7px;  .wptp_price text-align: left; marge gauche: 10px;  .wptp_price .wptp_text width: 34px;  / * Section du bouton d'achat * / .wptp_bottom a display: block; largeur: 78px; hauteur: 33px; fond: url (icons-sprite.png) -32px 0px; marge: 10px auto 0 auto; 

Conclusion

Voilà, nous pouvons maintenant télécharger le plugin sur notre site Worpdress et utiliser la puissance des codes courts de WordPress pour afficher des informations sur les éléments du marché Envato. Pour plus de détails sur l'écriture d'un plugin WordPress et l'API WordPress Shortcode, consultez la documentation en ligne sur le codex WordPress..

Je m'appelle Michele Ivani et j'espère que ce tutoriel vous a été utile pour votre développement WordPress. Merci beaucoup d'avoir lu.