Nel seguente tutorial creeremo un plugin per ottenere le immagini più popolari dal feed principale di Instagram.
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 * /
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
).
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/ * /
Questo definirà il [Instagradam]
shortcode, che funzionerà in base al instagradam_embed_shortcode
funzione.
// registra lo shortcode add_shortcode ('instagradam', 'instagradam_embed_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) // ...
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");
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 // ...
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;
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 ++;
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. = ' ';
Questo codice (shortcode) standard restituirà il nostro contenuto principale.
return $ str;
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;
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. = ' '; return $ str;
Questa è una foto che mostra il plugin in azione. Per questo, lo shortcode è stato inserito in un articolo.