Créer un simple plugin Instagram

Dans le tutoriel suivant, nous allons créer un plugin pour obtenir les images populaires du flux principal d'Instagram..


1. Le plan

Notre plugin fonctionnera avec le [instagradam] petit code. Vous pouvez l'insérer partout où le contenu HTML peut aller, par exemple. code de modèle, code d'éditeur, etc..

En conséquence, environ 10-15 images miniatures seront affichées avec des liens cliquables. Le noyau du plugin est basé sur un flux à distance, que nous allons récupérer à l'aide de l'API Function de WordPress..

La liste des données brutes fonctionnellement ressemblera à ceci:

 / * theluxurystyle --- http://distilleryimage8.s3.amazonaws.com/c4c876f4780a11e2a15422000a9f19a4_5.jpg loveobe --- http://distilleryimage3.s3.amazonaws.com/0c2d3b20781911e2b92122727 s3.amazonaws.com/21d07b

Nous allons tirer quelques photos

2. Obtention de l'ID client et du secret

Cette étape est nécessaire pour chaque nouveau plugin. Enregistrez-le sur Instagram pour obtenir un identité du client et client_secret. Le nom du plugin doit être composé de simples caractères alphabétiques.. johnsplugin).


3. Informations sur le plugin

C'est l'endroit où décrire les données de base de votre plugin, telles que le nom du plugin, l'URL, le numéro de version et l'auteur..

 / * Nom du plugin: Instagradam URI du plugin: http://wp.tutsplus.com/ Description: Un plugin shortcode Instagram simple et rapide. S'il vous plaît utilisez [instagradam] pour tirer l'alimentation principale! Version: 1.0 Auteur: Adam Burucs Auteur URI de l'auteur: http://burucs.com/ * /

4. Enregistrement du Shortcode

Cela définira le [instagradam] shortcode, qui fonctionnera en fonction du instagradam_embed_shortcode une fonction.

 // enregistre un shortcode add_shortcode ('instagradam', 'instagradam_embed_shortcode');

5. Définition de la fonction principale pour le shortcode

Ceci décrira le fonctionnement de base de notre plugin. le $ atts et $ contenu devrait être défini comme nous le voyons ici, mais nous ne les utiliserons pas dans cette leçon.

 // définition de la fonction shortcode instagradam_embed_shortcode ($ atts, $ content = null) //…

6. Faire des variables

Nous avons besoin d'une variable d'assistance pour créer une sortie pour notre fonction et d'une récupération de données utilisant l'API de fonction Wordpress. C'est $ str et $ résultat, respectivement.

 // définit la sortie principale $ str = ""; // récupère les données distantes $ result = wp_remote_get ("https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121");

7. Traitement des erreurs de flux

La sélection principale gère l'erreur de flux (dans certains cas, nous pouvons obtenir des erreurs SSL, mais il existe un correctif pour celui décrit plus loin dans cet article)..

S'il y a une erreur, nous renvoyons cela à la page: Quelque chose a mal tourné:… .

 if (is_wp_error ($ result)) // gestion d'erreur $ error_message = $ result-> get_error_message (); $ str = "Une erreur s'est produite: $ error_message";  else // traitement ultérieur //…

8. Plus de variables

Variable $ résultat contiendra les données principales; pour le traitement, nous fabriquons un autre assistant appelé $ main_data. Nous avons également besoin d'un compteur pour l'itération.

 // traitement ultérieur $ result = json_decode ($ result ['body']); $ main_data = array (); $ n = 0;

9. Boucle, première partie

Cette boucle collectera tous les noms d'utilisateur et les vignettes dont nous avons besoin. Auparavant, j'analysais le flux principal (la structure du flux) pour découvrir comment obtenir les données que je souhaitais. C'est donc une étape importante et n'oublions pas qu'Instagram peut changer cela plus tard
et nous pourrions avoir besoin de modifier $ d-> utilisateur-> nom d'utilisateur et $ d-> images-> vignette-> url.

 // récupère le nom d'utilisateur et la miniature réelle poureach ($ résultat-> données sous forme de $ d) $ principal_données [$ n] ['utilisateur'] = $ d-> utilisateur-> nom d'utilisateur; $ main_data [$ n] ['thumbnail'] = $ d-> images-> thumbnail-> url; $ n ++; 

10. Boucle, deuxième partie

Dans les lignes suivantes, nous créons le code HTML qui contiendra les images et les liens du flux principal Instagram. Les liens s'ouvriront dans une nouvelle fenêtre, faite avec target = "_ blank". Notez l'espace à la fin de la chaîne principale, c'est pour la séparation de base.

 // crée la chaîne principale, les images incorporées dans les liens foreach ($ main_data as $ data) $ str. = ''. $ data [' utilisateur '].' des photos '; 

11. La partie facile

Ce code standard (shortcode) renverra notre contenu principal.

 return $ str;

12. Problèmes SSL

Dans certains cas, le wp_remote_get fonction peut mal fonctionner, pour résoudre ce problème, nous devons utiliser ce code avant les sections de code principales.

 // correction d'une erreur de requête SSL add_action ('http_request_args', 'no_ssl_http_request_args', 10, 2); fonction no_ssl_http_request_args ($ args, $ url) $ args ['sslverify'] = false; return $ args; 

13. Code complet

Le code fini ressemble à ceci.

 / * Nom du plugin: Instagradam URI du plugin: http://wp.tutsplus.com/ Description: Un plugin shortcode Instagram simple et rapide. S'il vous plaît utilisez [instagradam] pour tirer l'alimentation principale! Version: 1.0 Auteur: Adam Burucs URI de l'auteur: http://burucs.com/ * / // Correction d'une erreur de requête SSL add_action ('http_request_args', 'no_ssl_http_request_args', 10, 2); fonction no_ssl_http_request_args ($ args, $ url) $ args ['sslverify'] = false; return $ args;  // enregistrer le code court add_shortcode ('instagradam', 'instagradam_embed_shortcode'); // définition de la fonction shortcode instagradam_embed_shortcode ($ atts, $ content = null) // définit la sortie principale $ str = ""; // récupère les données distantes $ result = wp_remote_get ("https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121"); if (is_wp_error ($ result)) // gestion d'erreur $ error_message = $ result-> get_error_message (); $ str = "Une erreur s'est produite: $ error_message";  else // traitant plus loin $ result = json_decode ($ result ['body']); $ main_data = array (); $ n = 0; // récupère le nom d'utilisateur et la miniature réelle poureach ($ résultat-> données sous forme de $ d) $ principal_données [$ n] ['utilisateur'] = $ d-> utilisateur-> nom d'utilisateur; $ main_data [$ n] ['thumbnail'] = $ d-> images-> thumbnail-> url; $ n ++;  // crée la chaîne principale, les images incorporées dans les liens foreach ($ main_data as $ data) $ str. = ''. $ data [' utilisateur '].' des photos ';  return $ str; 

Look fini

Ceci est une image montrant le plugin en action. Pour cela, le shortcode a été inséré dans un article.


A quoi ça ressemble dans un navigateur