Creați un widget Basic Flickr utilizând API-ul Widget

În acest tutorial, vom folosi API widget-ul WordPress și API-ul Flickr pentru a crea un widget Flickr de bază. Widgetul va fi un widget cu utilizare multiplă; solicită utilizatorului un nume de utilizator și numărul de imagini care să fie afișate și utilizează aceste informații pentru a afișa fotografiile Flickr. Există o mulțime de plug-in-uri pre-construite care funcționează cu Flickr, dar nimic nu se întâmplă să-l faci singur dacă vrei să faci un alt pas în educația ta WordPress!

Introducere

Flickr este unul dintre cele mai populare site-uri de partajare a fotografiilor din lume - găzduiește peste 5 miliarde de imagini - și prin crearea unui widget Flickr, veți învăța cum să utilizați API-ul Flickr și cum să creați widget-uri WordPress care pot fi ușor de utilizat adaptate propriei tematici sau site-uri web. Înainte de a începe să scrieți orice cod, trebuie să vă pregătiți pentru proiect. Pentru a crea un widget într-o temă, trebuie mai întâi să aveți un fișier pentru a introduce codul widget. Voi folosi implicit Douazeci unsprezece temă care vine cu WordPress, puteți folosi, desigur, orice temă aleasă de dvs. Realizați acești pași:

Creați un nou dosar în tema numită widget-uri.
Fă blanchetă php fișier numit widget.php și salvați-l în dosar.
Descărcați biblioteca excelentă phpFlickr de aici și lipiți fișierele widget-uri / phpFlickr
Înscrieți-vă pentru o cheie API de pe Flickr. Ar trebui să aveți nevoie de o cheie necomercială, cu excepția cazului în care creați un produs comercial.

Pasul 1 Obțineți codul widgetului pregătit

De la WordPress 2.8, a existat un API widget convenabil pe care îl puteți utiliza pentru a vă crea widget-urile. Copiați și inserați acest cod de schelet în dvs. widgets.php fişier:

  'flickr_widget', 'description' => 'Afișează fotografiile preferate de Flickr!' ); $ this-> WP_Widget ('flickr_widget', 'Flickr Posts', $ widget_ops);  funcția formular ($ instanță)  actualizarea funcției ($ new_instance, $ old_instance)  funcția widget ($ args, $ instanță)  add_action ('widgets_init', 'rm_load_widgets'); funcția rm_load_widgets () register_widget ('RM_Flickr'); ?>

Fiecare dintre aceste funcții de mai sus are un scop specific:

RM_FLickr este atât numele clasei, cât și numele primei funcții (constructorul). Constructorul conține codul pentru configurarea widgetului - se numește Mesaje Flickr.
formă() generează formularul pe care îl vedeți în pagina de gestionare a widgeturilor din WordPress.
Actualizați() actualizează opțiunile pe care le introduceți în formular atunci când configurația widgetului este salvată.
widget () afișează ieșirea reală a widget-ului în site-ul principal.
Ultima parte a codului se încadrează în inițializarea widgetului WordPress și îl instruiește să înregistreze widget-ul

Există doar un singur lucru: fișierul dvs. widget există, dar din moment ce nu face nimic. Pentru ca aceasta să fie utilizată de WordPress, trebuie să includeți fișierul de la dvs. functions.php fişier. Deci, deschide-te functions.php și lipiți în această linie: (Am pus-o în TwentyEleven's twentyeleven_setup () metodă)

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

Dacă declanșați WordPress, ar trebui să vedeți widgetul care apare în pagina de gestionare a Widget:

Desigur, deoarece nu ați adăugat niciun alt cod, widgetul nu are opțiuni sau rezultate. Acum, vă vom asigura că widgetul are intrări de formă

Pasul 2 Crearea formularului

Înainte de a crea un formular pentru un widget, trebuie să dați seama ce fel de intrări aveți nevoie. Pentru acest widget special, avem nevoie de trei intrări pentru a fi folosite de utilizator: un titlu pentru widget, numele de utilizator FLickr și numărul de fotografii care trebuie afișate. Dacă veți arunca o privire la codul de schelet de mai sus, veți observa că există un parametru $ instanță în formă() funcţie. Aceasta conține, în principiu, valorile curente pentru toate intrările din formular (de exemplu, atunci când salvați formularul cu anumite valori). Așadar, trebuie să scoatem valorile curente ale widget-ului și să inserăm câmpurile de intrare a widget-urilor cu ele. Inserați această bucată de cod în funcție:

 $ title = esc_attr ($ instance ['title' = $ '$' $ $ = ]); $ flickr_id = $ instanță ['flickr_id']; $ number = absint ($ instance ['număr']);

În primul rând, folosim wp_parse_args () pentru a vă asigura că există anumite valori implicite în widget și apoi extrageți valorile în variabile, cum ar fi titlu $. Acum că avem valorile, trebuie să construim html-ul funcției:

Titlu:

Numele de utilizator Flickr:

Numărul de fotografii:

Aceasta arată ca o bucată mare de cod, dar este într-adevăr destul de simplă. Este doar crearea unui formular HTML obișnuit, cu câteva modificări. În primul rând, în loc să vă folosiți id lui și numele lui, trebuie să utilizați get_field_id (). Acest lucru se datorează faptului că, dacă există mai multe instanțe ale unui widget și un singur cod unic, evident vor exista erori. WordPress are grijă de asta dacă folosiți funcția respectivă. Celălalt lucru este că valoare din câmpurile de intrare este generată folosind PHP. Salvați fișierul și aruncați o privire în WordPress:

Veți observa că dacă încercați să modificați valorile și faceți clic pe Salvați, acestea nu vor fi salvate. Asta pentru că nu am scris încă Actualizați() funcţie. Să facem asta în continuare

Pasul 3: Actualizarea formularului

Pentru a vă asigura că actualizările formularului dvs. trebuie să vă configurați Actualizați() funcţie. Acest lucru este de fapt destul de simplu. Implicit, WordPress vă trimite doi parametri - instanța veche și noua instanță. De fapt, nu avem nevoie de vechea instanță, deoarece vechea instanță este utilizată numai dacă există valori care nu doriți să le schimbați. Lipiți acest cod în Actualizați() funcţie:

 $ Exemplu = $ old_instance; $ instanță ['title'] = strip_tags ($ new_instance ['title']); $ Exemplu [ 'flickr_id'] = $ new_instance [ 'flickr_id']; $ Exemplu [ 'număr'] = $ new_instance [ 'număr']; returnați $ instanță;

Destul de simplu - copiați noua instanță într-o variabilă $ instanță, efectuați modificările pe care le doriți (cum ar fi eliminarea oricăror etichete html) și întoarcere pentru a asigura actualizarea modificărilor. Acum, dacă mergeți la WordPress, modificările se vor salva!

Pasul 4 Activarea HTML-ului Widget

Acesta este pasul final și vă asigură că widget-ul afișează codul HTML pe front. Acum, după ce am introdus intrările utilizatorilor, putem folosi intrările pentru a interacționa cu API-ul Flickr și pentru a afișa imagini. Primul pas în widget () funcția este de a prelua valorile intrărilor utilizatorilor. Inserați în acest cod:

 extract (args $); $ title = apply_filters ('widget_title', $ instanță ['title']); dacă (gol ($ titlu)) $ title = false; $ flickr_id = $ instanță ['flickr_id']; $ număr = absint ($ instanță ['număr']);

Auto-explicativ - intrările sunt extrase și stocate în variabile. În continuare, trebuie să faceți asta necesita biblioteca phpFlickr și configurați-o utilizând cheia dvs. API:

 require_once (TEMPLATEPATH. "/widgets/phpFlickr/phpFlickr.php"); $ f = noul phpFlickr ("API KEY]„);

După ce aceasta este configurată, lipiți în acest cod:

 dacă (! gol ($ flickr_id)) echo $ before_widget; dacă ($ title) echo $ before_title; echo $ title; echo $ after_title;  $ person = $ f-> people_findByUsername ($ flickr_id); $ photos_url = $ f-> urls_getUserPhotos ($ persoană ['id']); $ photos = $ f-> people_getPublicPhotos ($ persoană ['id'], NULL, NULL, număr $); foreach ((array) $ photos ['fotografii'] ['foto'] ca $ foto) echo "
\ n "; echo" "; echo""; echo ""; ecou "
\ n "; echo $ after_widget;

Să trecem prin acest pas-cu-pas. În primul rând, trebuie să vedem dacă numele de utilizator Flickr a fost specificat. Dacă nu, nu putem afișa imagini. Variabilele $ before_widget, $ before_title & $ after_title, care sunt automat oferite de WordPress, trebuie apoi afișate. Apoi, folosim biblioteca phpFlickr pentru a obține fotografiile utilizatorului specificat. Numărul de fotografii este definit de variabila număr $. În cele din urmă, bifăm imaginile folosind o buclă foreach și construim codul HTML pentru a afișa fotografia și apoi afișăm conținutul după widget. Acum, în funcție de ce temă lucrați și de ce doriți ca imaginile să arate, puteți modifica codul HTML. Singura parte care trebuie să rămână constantă este legătura cu imaginea, care poate fi în mai multe dimensiuni, cum ar fi Square, small, medium, large etc. Acum, că acest lucru a fost făcut, puteți încerca să configurați widget-ul și să vedeți rezultatul. Am folosit un utilizator popular Flickr, Uitați-mă de fotografierea Knott ca nume de utilizator. Aruncati o privire:

Concluzie

Pentru oricine care se bucură de fotografia lor, un widget Flickr este o mare plus față de un site WordPress. Cu acest tutorial, este ușor să creați un widget personalizabil Flickr. Puteți să adăugați sau să eliminați opțiunile, să modificați dimensiunile imaginilor, să mâncați în jurul modului în care arată widgetul și multe altele. Acum știți cum să creați widget-uri WordPress cu ușurință!

Un widget personalizat Flickr ar putea arăta astfel!

Cod