Creazione di un semplice plugin Instagram

Nel seguente tutorial creeremo un plugin per ottenere le immagini più popolari dal feed principale di Instagram.


1. Il piano

Il nostro plugin funzionerà con [Instagradam] codice corto. Puoi inserirlo ovunque, dove il contenuto HTML può andare ad esempio. codice modello, codice editore, ecc.

Di conseguenza verranno visualizzate 10-15 miniature di immagini con collegamenti cliccabili. Il nucleo del plugin è basato su un feed remoto, che verrà recuperato utilizzando l'API Function di WordPress.

L'elenco di dati non elaborati funzionerà in questo modo:

 / * theluxurystyle --- http://distilleryimage8.s3.amazonaws.com/c4c876f4780a11e2a15422000a9f19a4_5.jpg loveobe --- http://distilleryimage3.s3.amazonaws.com/0c2d3b20781911e2b92122000a9e0727_5.jpg jaredleto --- http: // distilleryimage8. s3.amazonaws.com/21d07bce781c11e2adc122000a1f9ace_5.jpg balloop --- http://distilleryimage11.s3.amazonaws.com/4fe04e66781411e2890222000a1fb0b2_5.jpg pinkshosho --- http://distilleryimage10.s3.amazonaws.com/abaef1b4781b11e2a2ce22000a1fa411_5.jpg * /

Faremo delle foto

2. Ottenere l'identità e il segreto del cliente

Questo passaggio è necessario per ogni nuovo plug-in. Registralo su Instagram per ottenere un Identificativo cliente e client_secret. Il nome del plugin dovrebbe essere un semplice carattere alfabetico nella mia esperienza (es. johnsplugin).


3. Informazioni sul plugin

Questo è il posto dove descrivere i dati di base del tuo plugin come nome del plugin, url, numero di versione e autore.

 / * Nome plugin: URI Instagradam Plugin: http://wp.tutsplus.com/ Descrizione: Un plugin shortcode Instagram semplice e veloce. Si prega di usare [instagradam] per tirare l'alimentazione principale! Versione: 1.0 Autore: Adam Burucs Autore URI: http://burucs.com/ * /

4. Registrazione dello Shortcode

Questo definirà il [Instagradam] shortcode, che funzionerà in base al instagradam_embed_shortcode funzione.

 // registra lo shortcode add_shortcode ('instagradam', 'instagradam_embed_shortcode');

5. Definizione della funzione principale per lo shortcode

Questo descriverà l'operazione principale del nostro plugin. Il $ atts e $ content dovrebbe essere definito come vediamo qui, ma non li useremo in questa lezione.

 // define shortcode function instagradam_embed_shortcode ($ atts, $ content = null) // ...

6. Fare variabili

Abbiamo bisogno di una variabile helper per creare un output per la nostra funzione e un recupero dei dati che utilizza l'API della funzione Wordpress. Questo è $ str e $ result, rispettivamente.

 // define main output $ str = ""; // ottiene dati remoti $ result = wp_remote_get ("https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121");

7. Gestione degli errori di alimentazione

La selezione principale gestisce l'errore del feed (in alcuni casi possiamo ottenere errori SSL, ma c'è una soluzione per quella descritta più avanti in questo articolo).

Se c'è qualche errore lo facciamo eco alla pagina: Qualcosa è andato storto:… .

 if (is_wp_error ($ result)) // gestione errori $ error_message = $ result-> get_error_message (); $ str = "Qualcosa è andato storto: $ error_message";  else // elaborazione successiva // ...

8. Altre variabili

Variabile $ result conterrà i dati principali, per l'elaborazione facciamo un altro assistente chiamato $ main_data. Abbiamo anche bisogno di un contatore per l'iterazione.

 // processando ulteriormente $ result = json_decode ($ result ['body']); $ main_data = array (); $ n = 0;

9. Looping, prima parte

Questo ciclo raccoglierà tutti i nomi utente e le miniature di cui abbiamo bisogno. In precedenza ho analizzato il feed principale (la struttura del feed), per scoprire come ottenere i dati desiderati. Quindi questo è un passo importante e non dimentichiamo che Instagram può cambiarlo più tardi
e potremmo aver bisogno di modificare $ D-> user-> nome utente e $ D-> immagini-> thumbnail-> URL.

 // ottiene il nome utente e la miniatura effettiva foreach ($ result-> data as $ d) $ main_data [$ n] ['user'] = $ d-> user-> username; $ main_data [$ n] ['thumbnail'] = $ d-> images-> thumbnail-> url; $ N ++; 

10. Looping, seconda parte

Nelle righe seguenti, creiamo il codice HTML che conterrà le immagini e i link dal feed principale di Instagram. I collegamenti si apriranno in una nuova finestra, creata con target = "_ blank". Nota lo spazio alla fine della stringa principale, questo è per la separazione di base.

 // crea la stringa principale, le immagini incorporate nei collegamenti foreach ($ main_data come $ data) $ str. = ''$ dati [ 'user'].' immagini '; 

11. La parte facile

Questo codice (shortcode) standard restituirà il nostro contenuto principale.

 return $ str;

12. Problemi SSL

In alcuni casi il wp_remote_get la funzione può funzionare male, per risolvere questo abbiamo bisogno di utilizzare questo codice prima delle sezioni del codice principale.

 // correzione dell'errore di richiesta SSL add_action ('http_request_args', 'no_ssl_http_request_args', 10, 2); function no_ssl_http_request_args ($ args, $ url) $ args ['sslverify'] = false; restituire $ args; 

13. Codice completo

Il codice finito sembra così.

 / * Nome plugin: URI Instagradam Plugin: http://wp.tutsplus.com/ Descrizione: Un plugin shortcode Instagram semplice e veloce. Si prega di usare [instagradam] per tirare l'alimentazione principale! Versione: 1.0 Autore: URI di Adam Burucs Autore: http://burucs.com/ * / // correzione dell'errore di richiesta SSL add_action ('http_request_args', 'no_ssl_http_request_args', 10, 2); function no_ssl_http_request_args ($ args, $ url) $ args ['sslverify'] = false; restituire $ args;  // registra lo shortcode add_shortcode ('instagradam', 'instagradam_embed_shortcode'); // define shortcode function instagradam_embed_shortcode ($ atts, $ content = null) // define main output $ str = ""; // ottiene dati remoti $ result = wp_remote_get ("https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121"); if (is_wp_error ($ result)) // gestione errori $ error_message = $ result-> get_error_message (); $ str = "Qualcosa è andato storto: $ error_message";  else // processando ulteriormente $ result = json_decode ($ result ['body']); $ main_data = array (); $ n = 0; // ottiene il nome utente e la miniatura effettiva foreach ($ result-> data as $ d) $ main_data [$ n] ['user'] = $ d-> user-> username; $ main_data [$ n] ['thumbnail'] = $ d-> images-> thumbnail-> url; $ N ++;  // crea una stringa principale, immagini incorporate nei collegamenti foreach ($ main_data come $ data) $ str. = ''$ dati [ 'user'].' immagini ';  return $ str; 

Aspetto finito

Questa è una foto che mostra il plugin in azione. Per questo, lo shortcode è stato inserito in un articolo.


Come appare in un browser