Share
In de volgende tutorial zullen we een plug-in maken om de populaire foto's van de hoofdfeed van Instagram te krijgen.
Onze plug-in zal werken met de [Instagradam] Korte code. U kunt het overal invoegen waar HTML-inhoud naartoe kan gaan, bijvoorbeeld. sjablooncode, editorcode, enz.
Als gevolg hiervan zullen ongeveer 10-15 miniatuurafbeeldingen worden getoond met aanklikbare koppelingen. De kern van de plug-in is gebaseerd op een feed op afstand, die we zullen ophalen met behulp van de Functie-API van WordPress.
De onbewerkte gegevenslijst ziet er functioneel uit:
/ * theluxurystyle --- http://distilleryimage8.s3.amazonaws.com/c4c876f4780a11e2a15422000a9f19a4_5.jpg loveobe --- http://distilleryimage3.s3.amazonaws.com/0c2d3b20781911e2b92122000a9e0727_5.jpg jaredleto --- http: // distilleerderijafbeelding8. s3.amazonaws.com/21d07bce781c11e2adc122000a1f9ace_5.jpg balloop --- http://distilleryimage11.s3.amazonaws.com/4fe04e66781411e2890222000a1fb0b2_5.jpg pinkshosho --- http://distilleryimage10.s3.amazonaws.com/abaef1b4781b11e2a2ce22000a1fa411_5.jpg * /
Deze stap is nodig voor elke nieuwe plug-in. Registreer het op Instagram om een klant identificatie en client_secret. De plugin-naam moet in mijn ervaring eenvoudige alfabetische tekens zijn (bijv. johnsplugin).
Dit is de plaats om de basisgegevens van uw plug-in te beschrijven, zoals plugin-naam, url, versienummer en auteur.
/ * Plugin Name: Instagradam Plugin URI: http://wp.tutsplus.com/ Beschrijving: Een eenvoudige en snelle plug-in voor Instagram-shortcodes. Gebruik [instagradam] om hoofdvoer te trekken! Versie: 1.0 Auteur: Adam Burucs Auteur URI: http://burucs.com/ * /
Dit definieert de [Instagradam] shortcode, die zal werken op basis van de instagradam_embed_shortcode functie.
Accentsconagua
// registreer shortcode add_shortcode ('instagradam', 'instagradam_embed_shortcode'); Dit zal de kernbewerking van onze plug-in beschrijven. De $ atts en $ inhoud moet worden gedefinieerd zoals we hier zien, maar we zullen ze in deze les niet gebruiken.
// definieer shortcode-functie instagradam_embed_shortcode ($ atts, $ content = null) // ...
We hebben een helpervariabele nodig voor het maken van een uitvoer voor onze functie en voor het ophalen van gegevens die de API van de Wordpress-functie gebruikt. Dat is $ str en $ result, respectievelijk.
// define main output $ str = ""; // ontvang externe gegevens $ result = wp_remote_get ("https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121"); De hoofdselectie verwerkt de feedfout (in sommige gevallen kunnen we SSL-fouten krijgen, maar er is een oplossing voor hetgeen verderop in dit artikel wordt beschreven).
Als er een fout is, herhalen we deze naar de pagina: Er is iets fout gegaan:… .
if (is_wp_error ($ result)) // foutafhandeling $ error_message = $ result-> get_error_message (); $ str = "Er is iets fout gegaan: $ error_message"; else // verder verwerken // ...
veranderlijk $ result bevat de belangrijkste gegevens, voor verwerking maken we een andere helper genoemd $ main_data. We hebben ook een teller nodig voor de iteratie.
// processing further $ result = json_decode ($ result ['body']); $ main_data = array (); $ n = 0;
Deze lus verzamelt alle gebruikersnamen en miniaturen die we nodig hebben. Eerder heb ik de hoofdfeed geanalyseerd (de structuur van de feed) om te ontdekken hoe ik de gegevens kan ophalen die ik wil. Dit is dus een belangrijke stap en laten we ook niet vergeten dat Instagram dit later kan veranderen
en we moeten mogelijk wijzigen $ D-> gebruikersvriendelijk> gebruikersnaam en $ D-> Afbeeldingen-> thumbnail-> url.
// krijg gebruikersnaam en actuele thumbnail voor elk ($ resultaat-> data als $ d) $ main_data [$ n] ['user'] = $ d-> user-> gebruikersnaam; $ main_data [$ n] ['thumbnail'] = $ d-> afbeeldingen-> thumbnail-> url; $ N ++;
In de volgende regels maken we de HTML-code die de afbeeldingen en links van de hoofdfeed van Instagram bevat. De links openen in een nieuw venster, gemaakt met target = "_ blank". Let op de spatie aan het einde van de hoofdreeks, dit is voor basisscheiding.
// hoofdreeks maken, afbeeldingen ingesloten in links voor elk ($ main_data als $ data) $ str. = '';
Deze (shortcode) standaardcode retourneert onze belangrijkste inhoud.
return $ str;
In sommige gevallen de wp_remote_get functie kan slecht werken, om dit op te lossen moeten we deze code gebruiken voor de hoofdcodegedeelten.
!['$ Data [ 'user'].' afbeeldingen](http://accentsconagua.com/img/'.$data['thumbnail'].')
'; // fix SSL request error add_action ('http_request_args', 'no_ssl_http_request_args', 10, 2); function no_ssl_http_request_args ($ args, $ url) $ args ['sslverify'] = false; $ args teruggeven; De voltooide code ziet er zo uit.
/ * Plugin Name: Instagradam Plugin URI: http://wp.tutsplus.com/ Beschrijving: Een eenvoudige en snelle plug-in voor Instagram-shortcodes. Gebruik [instagradam] om hoofdvoer te trekken! Versie: 1.0 Auteur: Adam Burucs Auteur URI: http://burucs.com/ * / // fix SSL request error add_action ('http_request_args', 'no_ssl_http_request_args', 10, 2); function no_ssl_http_request_args ($ args, $ url) $ args ['sslverify'] = false; $ args teruggeven; // registreer shortcode add_shortcode ('instagradam', 'instagradam_embed_shortcode'); // definieer shortcode-functie instagradam_embed_shortcode ($ atts, $ content = null) // definieer hoofduitvoer $ str = ""; // ontvang externe gegevens $ result = wp_remote_get ("https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121"); if (is_wp_error ($ result)) // foutafhandeling $ error_message = $ result-> get_error_message (); $ str = "Er is iets fout gegaan: $ error_message"; else // processing further $ result = json_decode ($ result ['body']); $ main_data = array (); $ n = 0; // krijg gebruikersnaam en actuele thumbnail voor elk ($ resultaat-> data als $ d) $ main_data [$ n] ['user'] = $ d-> user-> gebruikersnaam; $ main_data [$ n] ['thumbnail'] = $ d-> afbeeldingen-> thumbnail-> url; $ N ++; // hoofdreeks maken, afbeeldingen ingesloten in links foreach ($ main_data als $ data) $ str. = ' '; return $ str; Dit is een afbeelding die de plug-in in actie toont. Hiervoor is de shortcode in een artikel ingevoegd.
