Accentsconagua

Opprette dine egne widgets ved hjelp av ulike WordPress APIer Introduksjon

Kode
Share
Hva du skal skape

Widgets er en fin måte å gi nettstedseierne litt kontroll over utseendet (og noen ganger funksjonaliteten) av deres WordPress-nettsteder. I denne serien skal vi lage en håndfull WordPress-widgets ved å kombinere Widgets API med andre eksterne APIer.

Serien vil bestå av følgende opplæringsprogrammer:

  1. En introduksjon
  2. Relaterte innlegg Widget
  3. Logg inn Widget
  4. FAQ Widget
  5. Mest populære innlegg Widget med Google Analytics Integrasjon
  6. Fysisk Adress Widget med Google Maps Integrasjon
  7. Konklusjon

I denne opplæringen vil jeg introdusere deg til WordPress Widgets API ved å (re) lage en enkel tekst widget. Vi vil dissekere og undersøke de ulike funksjonene som utgjør widgeten for å forstå hvordan WordPress widgets fungerer generelt.

Denne widgeten vil også fungere som et grunnlag som vi skal bygge på når du lager andre widgets i de etterfølgende delene av denne serien.

WordPress Widgets

WordPress-widgets legger til innhold og funksjoner i sidebjergene dine eller widgetiserte områder av temaet ditt. Widgets er laget for å gi en enkel og brukervennlig måte å gi design og strukturell kontroll av WordPress-temaet til brukeren uten at de må vite hvordan de skal kode.

De fleste WordPress-widgets tilbyr tilpasning og alternativer som skjemaer for å fylle ut, valgfrie bilder og andre tilpasningsfunksjoner.

Undersøk Widget Class

Den enkleste måten å opprette en WordPress-widget på er å arve WP_Widget klasse. På denne måten kan du bruke de innebygde funksjonene til å oppdatere widgeten, vise widgeten og opprette et admingrensesnitt for widgeten.

For å fullt ut forstå hvordan widgets fungerer, vil vi opprette og undersøke en tom widget. Vi vil da definere hver funksjon som lager widgeten, så se hvordan de jobber sammen for å lage en fungerende widget.

Vår Widget Definisjon



Funksjonene i detalj
 
La oss se nærmere på hver funksjon:
 
__construct ()
 
Denne funksjonen registrerer widgeten med WordPress 
 
widget ()
 
Denne funksjonen er ansvarlig for frontend-visning av widgeten. Den utdataer innholdet i widgeten
 
Oppdater()
 
Behandler widget-alternativene på lagre. Bruk denne funksjonen til å oppdatere din widget (tilleggsutstyr). Denne funksjonen tar to parametere:
 
     
  1.  $ new_instance - Verdier som bare sendes for å bli lagret. Disse verdiene kommer fra skjemaet definert i form () -metoden
    2.  
  2.  $ old_instance - Tidligere lagrede verdier fra databasen
    3.  
 
Husk å sanitisere alle brukerens innsendte verdier her. Bruker-innsendte verdier må alltid sanitiseres før de sendes til databasen
 
form ()
 
De form () Metode / funksjon brukes til å definere back-end widget skjemaet - som du ser i widgets panelet i dashbordet Dette skjemaet gjør at en bruker kan sette opp tittelen og andre alternativer for widgeten.
 
Denne funksjonen tar følgende parameter (er):
 
  •  $ forekomst - Tidligere lagrede verdier fra databasen
Opprette vår widget
 
For å lage vår widget, følger vi følgende trinn:
 
     
  • Definer hva vi lager
    •  
  • Registrer vår widget med WordPress
    •  
  • Bygg back-end-skjemaet
    •  
  • Lagre verdier i databasen
    •  
  • Definer front-end-skjermen
    •  
  • Registrer widgeten
    •  
 
Hva skaper vi?
 
Som vi tidligere nevnte, oppretter vi en enkel tekst-widget som gjør at en bruker kan skrive inn en tittel og noen vilkårlig tekst som deretter vil bli sendt ut i fronten av nettstedet der widgeten er plassert.
 
Widget Constructor
 
Konstruktøren gjør det mulig for oss å initialisere vår widget ved å overskrive foreldreklassen (standard WP_Widget klasse).

 'tutsplustext_widget', 'description' => __ ('En grunnleggende tekst widget for å demo Tutsplus-serien om å lage dine egne widgets.', 'tutsplustextdomain'))); load_plugin_textdomain ('tutsplustextdomain', false, basename (dirname (__FILE__)). '/ languages');  

I koden ovenfor kaller vi den opprinnelige WP_Widget-klassens konstruksjonsfunksjon og sender den til de forstyrrende argumentene:
     
  • Base ID - En unik identifikator for widgeten. Må være i små bokstaver. Hvis tomt er tom, vil en del av widgetens klassenavn bli brukt.
    •  
  • Navn - Dette er navnet på widgeten som vises på konfigurasjonssiden (i dashboradet).
    •  
  • Og en (valgfri) matrise som inneholder et klassenavn og en beskrivelse. Beskrivelsen vises på konfigurasjonssiden (i WordPress dashbord).
    •  
Å bygge back-end-skjemaet
 
Tilbakestillingsskjemaet vil bestå av to felt - et tittelfelt og et tekstfeltfelt. Her er et skjermbilde av skjemaet som det vil se i Widgets panelet:


For å generere ovennevnte skjema, ville vi starte med ren HTML og deretter erstatte noen attributtverdier med noen PHP-variabler og uttrykk. Følgende er HTML-koden for å lage de to feltene:

   
 
   

For å flytte fra dette til vår endelige kode for formularen () -funksjonen, må vi gjøre noen av attributter over dynamiske - nemlig navn, id og etikett for attributt (som må matche ID-en for HTML-en som etiketten er for). Vi erstatter også verdien av tekstfeltet og innholdet i textarea-feltet med dynamiske verdier fra databasen hvis de allerede er lagret.
 
Her er koden vi ender opp med:

 
   
 
   
 
Koden ovenfor åpner og tilordner tidligere lagrede verdier fra databasen til to variabler - $ title og $ melding. Vi bruker deretter esc_attr () å kode inn de returnerte verdiene og for å unngå å bryte vår kode. Vi ekko deretter $ tittelattributtet i verdierattributtet til tekstfeltet og ekko $ melding som innholdet i tekstområdet.
 
I koden ovenfor vil du legge merke til to metoder som er sannsynligvis nye for deg - get_field_id () og get_field_name ().
 
     
  •  get_field_id () - Tar feltnavn som et argument og konstruerer id-attributter for bruk i form () -feltene. Det sikrer at det returnerte feltet id er unikt
    •  
  •  get_field_name () - Tar feltnavn som et argument og konstruerer navnegenskaper for bruk i form () -feltene. Det sikrer at det returnerte feltnavnet er unikt.
    •  
 
Etikettetikettene ' til Attributtet er kodet for å ekko ID-verdien til elementene de merker.
 
De widefat klassen brukes til å sikre at widgetens felter har samme utseende som andre felt i hele WordPress-dashbordet.

Oppdaterer vår widget (alternativer)
 
For å oppdatere vår widget, vil vi skrive riktig kode i oppdateringsmetoden. Her er vår kode:

Ovennevnte funksjon tar to parametere - $ new_instance og $ old_instance
 
     
  •  $ new_instance er en matrise som inneholder de nye innstillingene (av denne forekomsten av widgeten) som nettopp er skrevet av brukeren via backend-skjemaet som vi definerer i formularfunksjonen ().
    •  
  •  $ old_settings er en matrise som inneholder gamle innstillinger. Dette er verdiene som er lagret i databasen.
    •  
 
Oppdateringen () -funksjonen returnerer en rekke innstillinger for å lagre eller falle for å avbryte lagring.
 
I ovennevnte kode tilordner vi $ old_instance til $ instance-variabelen og erstatter tittel- og meldtastene med verdier fra $ new_instance. Ved å returnere den nye og oppdaterte serien oppdaterer vi effektivt våre widgetinnstillinger.
 
De strip_tags () funksjonen fjerner HTML og PHP-koder fra en streng som er sendt til den. Vi inkluderer denne funksjonen for å unngå en situasjon der brukerne av ditt tema ikke lukker merker som er angitt via back-end-skjemaet, noe som resulterer i at nettstedet ditt bryter (ikke gjengir riktig).
Definere Front-End 
De widget () funksjonen er ansvarlig for fron-end-visning av widgeten. Det tar to parametere - $ args og $ forekomst. 
$ args er en matrise passert til register_sidebar () -funksjonen når du definerer sidebar / widget-området der widgeten er plassert. Dette er funnet i din functions.php fil. Nedenfor er et eksempel på a register_sidebar () erklæring:
Oppsettet inneholder definisjoner av åpnings- og lukkekoder for widgeten selv og for widgetens tittel.
 
$ forekomst er en matrise som inneholder innstillingene for den spesielle forekomsten av widgeten. Disse innstillingene vil bli hentet fra databasen.
 
Vi benytter oss av kodene nevnt ovenfor i den siste widgetskoden nedenfor:

I den ovennevnte koden kommer vi endelig til å kode på forsiden av widgeten vår. Vår widget utsender bare en tittel og noen vilkårlig melding (tekst). Koden gjør akkurat det og bryter selve widgeten og widgetens tittel inne i åpnings- og lukkekoder definert i functions.php for det bestemte widgetområdet (sidebar) der widgeten er plassert.
 
Vi introduserer ekstrakt() funksjon som noen kanskje ikke er kjent med. Denne funksjonen tar en assosiativ array og returnerer nøklene som variabler. Det gjør at vi kan ekko ut $ before_widget i stedet for $ args ['before_widget'], og dermed forenkle koden vår litt.
 
Den endelige utgangen på en faktisk nettside vil se ut som noe slikt:
Registrering av widgeten
 
Widgeten må registreres med WordPress etter at den er definert slik at den blir tilgjengelig i widgetpanelet på vårt WordPress dashboard.
Den endelige koden 
For å holde ting enkelt for sluttbrukerne av våre widgets, skal vi pakke inn vår widgetskode i et WordPress-plugin slik at det er enkelt å installere.
 
Dette vil også gjøre det mulig for oss å beholde all koden vi skal skape gjennom hele serien i en enkelt fil.
 
Her er den endelige koden:

 'tutsplustext_widget', 'description' => __ ('En grunnleggende tekst widget for å demo Tutsplus-serien om å lage dine egne widgets.', 'tutsplustextdomain'))); load_plugin_textdomain ('tutsplustextdomain', false, basename (dirname (__FILE__)). '/ languages');  / ** * Front-end-visning av widgeten. * * @see WP_Widget :: widget () * * @param array $ args Widget argumenter. * @param array $ instance Lagrede verdier fra database. * / offentlig funksjon widget ($ args, $ forekomst) ekstrakt ($ args); $ title = apply_filters ('widget_title', $ instance ['title']); $ message = $ instance ['message']; ekko $ before_widget; hvis ($ title) echo $ before_title. $ tittel. $ After_title;  ekko $ melding; ekko $ after_widget;  / ** * Sanitize widget skjema verdier som de er lagret. * * @see WP_Widget :: oppdatering () * * @param array $ new_instance Verdier bare sendt for å bli lagret. * @param array $ old_instance Tidligere lagrede verdier fra database. * * @return array Oppdaterte sikre verdier som skal lagres. * / offentlig funksjon oppdatering ($ new_instance, $ old_instance) $ instance = $ old_instance; $ instance ['title'] = strip_tags ($ new_instance ['title']); $ instance ['message'] = strip_tags ($ new_instance ['message']); returner $ instance;  / ** * Back-end widget skjema. * * @see WP_Widget :: skjema () * * @param array $ forekomst Tidligere lagrede verdier fra database. * / offentlig funksjon skjema ($ forekomst) $ title = esc_attr ($ instance ['title']); $ message = esc_attr ($ instance ['message']); ?> 
   
 
   
 
Konklusjon
 
I denne opplæringen introduserte vi serien - Opprett dine egne WordPress-widgets ved hjelp av ulike APIer. Vi tok en dypere titt på hva de er, hvordan de jobber og hvordan man lager en.
 
Formålet med denne opplæringen var å gi en grundig introduksjon til Widgets API og å oppgi en base-widget hvorfra de andre widgets i denne serien kan opprettes.
 
I neste del av serien skal vi opprette en relatert innleggs widget. I mellomtiden er du velkommen til å legge igjen noen spørsmål eller kommentarer i skjemaet under.






	
	
			
	   
	







Kode
×