Maak een Basic Flickr Widget met behulp van de widget-API

In deze zelfstudie gebruiken we de WordPress widget-API en de Flickr API om een standaard Flickr-widget te maken. De widget zal een widget voor meervoudig gebruik zijn; het vraagt de gebruiker om een gebruikersnaam en een aantal afbeeldingen om weer te geven en gebruikt die informatie om Flickr-foto's weer te geven. Er zijn veel pre-built plug-ins die werken met Flickr, maar niets is beter dan het zelf maken als je nog een stap wilt zetten in je WordPress-opleiding!

Invoering

Flickr is een van de meest populaire sites voor het delen van foto's in de wereld - het bevat meer dan 5 miljard afbeeldingen - en door het maken van een Flickr-widget leert u zowel hoe u de Flickr API gebruikt en hoe u WordPress-widgets maakt die gemakkelijk kunnen worden aangepast aan uw eigen thema of website. Voordat u begint met het schrijven van een code, moet u zich voorbereiden op het project. Als u een widget binnen een thema wilt maken, moet u eerst een bestand hebben om de widgetcode in te voeren. Ik zal de standaard gebruiken Twintig elf thema dat bij WordPress hoort, je kunt natuurlijk elk thema naar keuze gebruiken. Voer deze stappen uit:

Maak een nieuwe map in het thema genaamd widgets.
Maak een blanco php bestand met de naam widget.php en sla het op in de map.
Download de uitstekende phpFlickr-bibliotheek vanaf hier en plak de bestanden erin widgets / phpFlickr
Meld u aan voor een API-sleutel van Flickr. U heeft een niet-commerciële sleutel nodig, tenzij u een commercieel product maakt.

Stap 1 Uw widgetcode gereed maken

Sinds WordPress 2.8 is er een handige widget-API die u kunt gebruiken om uw widgets te maken. Kopieer en plak deze skeletcode in uw widgets.php het dossier:

  'flickr_widget', 'description' => 'Toon je favoriete Flickr-foto's!' ); $ this-> WP_Widget ('flickr_widget', 'Flickr Posts', $ widget_ops);  functie ($ instantie)  functie update ($ new_instance, $ old_instance)  functie widget ($ args, $ instantie)  add_action ('widgets_init', 'rm_load_widgets'); functie rm_load_widgets () register_widget ('RM_Flickr'); ?>

Elk van deze functies hierboven heeft een specifiek doel:

RM_FLickr is zowel de naam van de klasse, als de naam van de eerste functie (de constructor). De constructor bevat de code om de widget in te stellen - het wordt Flickr Posts genoemd.
het formulier() genereert het formulier dat u ziet op de widgetbeheerpagina in WordPress.
bijwerken() werkt de opties bij die u in het formulier invoert wanneer de widgetconfiguratie is opgeslagen.
widget () toont de daadwerkelijke uitvoer van de widget op de hoofdsite.
Het laatste deel van de code sluit aan op de widget-initialisatie van WordPress en geeft de opdracht om uw widget te registreren

Er rest slechts één ding: uw widgetbestand bestaat, maar tot nu toe doet het eigenlijk niets. Om te worden gebruikt door WordPress, moet u het bestand opnemen van uw functions.php het dossier. Dus open functions.php en plak in deze regel: (Ik stop het in TwentyEleven's twentyeleven_setup () methode)

 require_once (TEMPLATEPATH. "/widgets/flickr.php");

Als u WordPress start, ziet u de widget op de widgetbeheerpagina verschijnen:

Omdat er geen andere code is toegevoegd, heeft de widget natuurlijk geen opties of uitvoer. Nu zullen we ervoor zorgen dat de widget formulierinvoer heeft

Stap 2 Het formulier maken

Voordat u het formulier voor een widget maakt, moet u weten wat voor soort invoer u nodig hebt. Voor deze specifieke widget hebben we drie ingangen nodig die door de gebruiker kunnen worden gebruikt: een titel voor de widget, de gebruikersnaam van FLICKR en het aantal weer te geven foto's. Als je de bovenstaande skeletcode bekijkt, zul je merken dat er een parameter is $ instantie in de het formulier() functie. Dit bevat in principe de huidige waarden voor alle ingangen in het formulier (bijvoorbeeld wanneer u het formulier opslaat met bepaalde waarden). We moeten dus de huidige waarden van de widget verwijderen en thw widgetinvoervelden ermee vullen. Plak dit stuk code in de functie:

 $ instance = wp_parse_args ((array) $ instantie, array ('title' => 'Flickr Photos', 'number' => 5, 'flickr_id' => ")); $ title = esc_attr ($ instance ['title' ]); $ flickr_id = $ instance ['flickr_id']; $ number = absint ($ instance ['number']);

Eerst gebruiken we de wp_parse_args () functie om ervoor te zorgen dat er bepaalde standaardwaarden in de widget zijn en vervolgens extraheren we de waarden in variabelen zoals $ title. Nu we de waarden hebben, moeten we de html van de functie bouwen:

Titel:

Flickr-gebruikersnaam:

Aantal foto's:

Dit lijkt een behoorlijk stuk code, maar het is echt vrij eenvoudig. Het is gewoon een normaal HTML-formulier aan het maken, met een paar wijzigingen. Ten eerste, in plaats van je id's en de naam van, je moet gebruiken get_field_id (). Dit komt omdat als er meerdere exemplaren van een widget en slechts één enkele ID zijn, er uiteraard fouten zullen zijn. WordPress zorgt ervoor voor u als u de genoemde functie gebruikt. Het andere ding is dat de waarde van de invoervelden wordt gegenereerd met behulp van PHP. Sla het bestand op en neem een kijkje in WordPress:

U zult merken dat als u de waarden probeert te wijzigen en op Opslaan klikt, deze niet worden opgeslagen. Dat komt omdat we de. Nog niet hebben geschreven bijwerken() functie. Laten we dat als volgende doen

Stap 3 Zorg ervoor dat uw formulierupdates zeker zijn

Om ervoor te zorgen dat uw formulierupdates zijn, moet u uw bijwerken() functie. Dit is eigenlijk vrij eenvoudig. Standaard verzendt WordPress u twee parameters: het oude exemplaar en het nieuwe exemplaar. We hebben het oude exemplaar eigenlijk niet echt nodig, omdat het oude exemplaar alleen wordt gebruikt als er waarden zijn die u misschien niet wilt wijzigen. Plak in deze code in de bijwerken() functie:

 $ Bijvoorbeeld = $ old_instance; $ instance ['title'] = strip_tags ($ new_instance ['title']); $ Bijvoorbeeld [ 'flickr_id'] = $ new_instance [ 'flickr_id']; $ Bijvoorbeeld [ 'number'] = $ new_instance [ 'number']; return $ instantie;

Heel eenvoudig - kopieer de nieuwe instantie naar een variabele $ instantie, breng eventueel gewenste wijzigingen aan (zoals het verwijderen van html-tags) en terugkeer de variabele om ervoor te zorgen dat de wijzigingen worden bijgewerkt. Als u nu naar WordPress gaat, worden uw wijzigingen opgeslagen!

Stap 4 De widget-HTML inschakelen

Dit is de laatste stap en het zorgt ervoor dat je widget HTML weergeeft aan de voorkant. Nu we de gebruikersinvoer hebben ingesteld, kunnen we de ingangen gebruiken om te communiceren met de Flickr API en afbeeldingen weer te geven. De eerste stap in de widget () functie is om de waarden van de gebruikersinvoer op te halen. Plak in deze code:

 extract ($ args); $ title = apply_filters ('widget_title', $ instance ['title']); if (empty ($ title)) $ title = false; $ flickr_id = $ instance ['flickr_id']; $ number = absint ($ instance ['number']);

Spreekt voor zich - de ingangen worden opgehaald en opgeslagen in variabelen. Vervolgens moet je vereisen de phpFlickr-bibliotheek en stel het in met uw API-sleutel:

 require_once (TEMPLATEPATH. "/widgets/phpFlickr/phpFlickr.php"); $ f = nieuwe phpFlickr ("[API SLEUTEL]");

Nadat dit is ingesteld, plakt u deze code in:

 if (! empty ($ flickr_id)) echo $ before_widget; if ($ title) echo $ before_title; echo $ titel; echo $ after_title;  $ person = $ f-> people_findByUsername ($ flickr_id); $ photos_url = $ f-> urls_getUserPhotos ($ person ['id']); $ photos = $ f-> people_getPublicPhotos ($ person ['id'], NULL, NULL, $ number); foreach ((array) $ foto's ['photos'] ['photo'] als $ photo) echo "
\ n "; echo" "; echo""; echo ""; echo "
\ n "; echo $ after_widget;

Laten we dit stap voor stap doornemen. Eerst moeten we kijken of de Flickr-gebruikersnaam is opgegeven. Als dit niet het geval is, kunnen we niet echt afbeeldingen weergeven. De variabelen $ before_widget, $ before_title & $ after_title, die ons automatisch door WordPress worden gegeven, moet dan worden weergegeven. Vervolgens gebruiken we de phpFlickr-bibliotheek om de foto's van de opgegeven gebruiker te krijgen. Het aantal foto's wordt bepaald door de variabele $ number. Ten slotte lussen we de afbeeldingen door met een foreach-lus en bouwen we de HTML om de foto weer te geven en vervolgens de inhoud van de na-widget weer te geven. Afhankelijk van het thema waarmee u werkt en hoe u de afbeeldingen eruit wilt laten zien, kunt u de HTML aanpassen. Het enige onderdeel dat constant moet blijven, is de link naar de afbeelding, die in verschillende formaten kan zijn, zoals Vierkant, klein, gemiddeld, groot, enzovoort. Nu dit is gebeurd, kunt u proberen de widget in te stellen en de uitvoer te bekijken. Ik heb een populaire Flickr-gebruiker gebruikt, Forget Me Knott Photography als de gebruikersnaam. Kijk eens:

Conclusie

Voor iedereen die van fotografie houdt, is een Flickr-widget een geweldige aanvulling op een WordPress-website. Met deze zelfstudie is het eenvoudig om een aanpasbare Flickr-widget te maken. U kunt opties toevoegen of verwijderen, de afbeeldingsformaten wijzigen, rotzooien met hoe de widget eruit ziet en nog veel meer. U weet nu hoe u gemakkelijk WordPress-widgets kunt maken!

Een aangepaste Flickr-widget zou er zo uit kunnen zien!

Code