Share
I den følgende opplæringen vil vi lage et plugin for å få de populære bildene fra Instagrams hovedfeed.
Vårt plugin vil fungere med [Instagradam] kort kode. Du kan sette den overalt hvor HTML-innhold kan gå f.eks. malkode, redaktørkode osv.
Som et resultat vil ca. 10-15 miniatyrbilder bli vist med klikkbare koblinger. Kjernen i pluginet er basert på en ekstern feed, som vi vil hente ved hjelp av Funksjon API for WordPress.
Rå data listen funksjonelt vil se slik ut:
/ * 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 * /
Dette trinnet er nødvendig for hver ny plugin. Registrer det på Instagram for å få en klient-ID og client_secret. Pluginnavnet skal være enkle alfabetiske tegn i min erfaring (f.eks. johnsplugin).
Dette er stedet for å beskrive pluginets basisdata som pluginnavn, URL, versjonsnummer og forfatter.
/ * Plugin Name: Instagradam Plugin URI: http://wp.tutsplus.com/ Beskrivelse: En enkel og rask Instagram shortcode plugin. Vennligst bruk [instagradam] for å trekke hovedstrømmen! Versjon: 1.0 Forfatter: Adam Burucs Forfatter URI: http://burucs.com/ * /
Dette vil definere [Instagradam] shortcode, som vil fungere basert på instagradam_embed_shortcode funksjon.
Accentsconagua
// registrere shortcode add_shortcode ('instagradam', 'instagradam_embed_shortcode'); Dette vil beskrive vår plugin kjernevirksomhet. De $ att og $ innhold bør defineres som vi ser her, men vi vil ikke bruke dem i denne leksjonen.
// definere shortcode-funksjonen instagradam_embed_shortcode ($ atts, $ content = null) // ...
Vi trenger en hjelpesvariabel for å lage en utdata for vår funksjon og en datainnhenting som bruker Wordpress-funksjonen API. Det er $ str og $ resultat, henholdsvis.
// definer hovedutgang $ str = ""; // få fjerndata $ result = wp_remote_get ("https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121"); Hovedvalget håndterer feilsøkingsfeilen (i noen tilfeller kan vi få SSL-feil, men det er en løsning for det som er beskrevet senere i denne artikkelen).
Hvis det er noen feil, ekko vi det til siden: Noe gikk galt:… .
hvis (is_wp_error ($ resultat)) // feilhåndtering $ error_message = $ result-> get_error_message (); $ str = "Noe gikk galt: $ error_message"; ellers // behandling videre // ...
variabel $ resultat vil inneholde hoveddataene, for behandling gjør vi en annen hjelper kalt $ main_data. Vi trenger også en teller for iterasjonen.
// behandling videre $ result = json_decode ($ resultat ['body']); $ main_data = array (); $ n = 0;
Denne sløyfen samler alle brukernavn og miniatyrbilder vi trenger. Tidligere analyserte jeg hovedmatningen (strukturen til feedet), for å finne ut hvordan jeg får de dataene jeg vil ha. Så dette er et viktig skritt, og vi må heller ikke glemme at Instagram kan endre dette senere
og vi må kanskje endre $ D-> bruker-> brukernavn og $ D-> bilder-> Thumbnail-> url.
// få brukernavn og faktisk miniatyrbilde ($ resultat-> data som $ d) $ main_data [$ n] ['user'] = $ d-> bruker-> brukernavn; $ main_data [$ n] ['thumbnail'] = $ d-> images-> thumbnail-> url; $ N ++;
I de følgende linjene oppretter vi HTML-koden som vil inneholde bildene og koblingene fra Instagram-hovedmaten. Lenkene åpnes i et nytt vindu, laget med target = "_ blank". Merk plassen på slutten av hovedstrengen, dette er for grunnleggende separasjon.
// lage hovedstrengen, bilder som er innebygd i linker foreach ($ main_data as $ data) $ str. = '';
Denne standardkoden (shortcode) returnerer vårt hovedinnhold.
returner $ str;
I noen tilfeller er wp_remote_get funksjonen kan fungere dårlig, for å løse dette må vi bruke denne koden før hovedkodeseksjonene.
!['$ data [ 'user'].' bilder](http://accentsconagua.com/img/'.$data['thumbnail'].')
'; // fikse SSL-forespørselfeil add_action ('http_request_args', 'no_ssl_http_request_args', 10, 2); funksjon no_ssl_http_request_args ($ args, $ url) $ args ['sslverify'] = false; returner $ args; Den ferdige koden ser slik ut.
/ * Plugin Name: Instagradam Plugin URI: http://wp.tutsplus.com/ Beskrivelse: En enkel og rask Instagram shortcode plugin. Vennligst bruk [instagradam] for å trekke hovedstrømmen! Versjon: 1.0 Forfatter: Adam Burucs Forfatter URI: http://burucs.com/ * / // fikse SSL forespørselfeil add_action ('http_request_args', 'no_ssl_http_request_args', 10, 2); funksjon no_ssl_http_request_args ($ args, $ url) $ args ['sslverify'] = false; returner $ args; // register shortcode add_shortcode ('instagradam', 'instagradam_embed_shortcode'); // definer shortcode-funksjon instagradam_embed_shortcode ($ atts, $ content = null) // definer hovedutgang $ str = ""; // få fjerndata $ result = wp_remote_get ("https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121"); hvis (is_wp_error ($ resultat)) // feilhåndtering $ error_message = $ result-> get_error_message (); $ str = "Noe gikk galt: $ error_message"; ellers // behandling videre $ result = json_decode ($ resultat ['body']); $ main_data = array (); $ n = 0; // få brukernavn og faktisk miniatyrbilde ($ resultat-> data som $ d) $ main_data [$ n] ['user'] = $ d-> bruker-> brukernavn; $ main_data [$ n] ['thumbnail'] = $ d-> images-> thumbnail-> url; $ N ++; // lage hovedstreng, bilder innebygd i linker foreach ($ main_data as $ data) $ str. = ' '; returnere $ str; Dette er et bilde som viser pluginet i handling. For dette ble kortkoden satt inn i en artikkel.
