Bygg Custom WordPress Widgets

Å bygge WordPress-widgets er akkurat som å bygge et plugin, men det er enklere og enklere. Alt du trenger å gjøre er å ha en enkelt fil der alle PHP går, og det er enklere å kode enn et plugin som kan ha mer enn én fil. Det er tre hovedfunksjoner av en widget som kan brytes ned i widget, Oppdater og skjema.

  • funksjons-widget ()
  • funksjon oppdatering ()
  • funksjonsskjema ()

Grunnleggende struktur

Den grunnleggende oversikten over vår widget er veldig enkel, og det er en rekke funksjoner du trenger å vite. Den bare benstrukturen til widgeten vår er noe som dette:

 add_action ('widgets_init', 'register_my_widget'); // funksjon for å laste min widget funksjon register_my_widget ()  // funksjon for å registrere min widget klasse My_Widget utvider WP_Widget ()  // Eksempel widget klassen funksjonen My_Widget ()  // Widget Settings funksjonen widget ()  // vise widgetfunksjonen oppdatering ()  // oppdater widget-funksjonen skjemaet ()  // og selvfølgelig skjemaet for widget-alternativene

Trinn 1

Før vi gjør alt som vi først vil laste inn vår widget når det er nødvendig med funksjonen "widget_init". Dette er en action hook og du kan finne mer om det i WordPress codex.

 add_action ('widgets_init', 'register_my_widget');

Neste ting vi skal gjøre er å registrere vår widget i WordPress slik at den er tilgjengelig under widgeten.

 funksjon register_my_widget () register_widget ('My_Widget'); 

Steg 2

Vi vil vedlegge vår widget i en klasse. Klassens navn er viktig! En ting som bør holdes i bakhodet er at navnet på klassen og navnet på funksjonen skal være det samme.

 klassen My_Widget utvider WP_Widget 

Nå skal vi passere noen innstillingsparametere til denne klassen. For eksempel kan vi passere dette bredden og høyden. Vi kan også gi vår widget en liten beskrivelse hvis vi vil, noe som er nyttig hvis du kombinerer denne widgeten med ditt kommersielle tema.

 funksjon My_Widget () funksjon My_Widget () $ widget_ops = array ('classname' => 'example', 'description' => __ ('En widget som viser forfatterens navn', 'eksempel')); $ control_ops = array ('width' => 300, 'height' => 350, 'id_base' => 'eksempel-widget'); $ this-> WP_Widget ('example-widget', __ ('Eksempel Widget', 'eksempel'), $ widget_ops, $ control_ops); 

Nå som vi har fullført grunnleggende krav til widgeten vår, vil vi være oppmerksom på de tre funksjonene som vi snakket om tidligere, som er de viktige funksjonene eller hovedblokkene til widgeten vår!


Trinn 3 Funksjons Widget ()

Den første funksjonen er relatert til visning av vår widget. Vi sender et par argumenter til vår widget-funksjon. Vi vil passere argumenter fra temaet, som kan være en tittel og andre spesifikke verdier. Deretter passerer vi instansvariabelen, som er relatert til klassen av vår funksjon.

 funksjon widget ($ args, $ forekomst)

Etter dette vil vi trekke verdiene fra argumentet fordi vi vil at verdiene skal være tilgjengelige lokalt. Hvis du ikke vet hva denne lokale variabelen handler om, bare ikke bekymre deg om det akkurat nå, og legg ganske enkelt til dette trinnet!

 ekstrakt ($ args);

Neste oppsett vil vi sette tittelen og andre verdier for vår widget, som kan redigeres av brukeren under widgets-menyen. Vi inkluderer også de spesielle variablene som $ before_widget, $ after_widget. Disse verdiene håndteres av temaet.

 $ title = apply_filters ('widget_title', $ instance ['title']); $ name = $ instance ['name']; $ show_info = isset ($ instance ['show_info'])? $ instance ['show_info']: false; ekko $ before_widget; // Vis widgettittelen hvis ($ title) echo $ before_title. $ tittel. $ After_title; // Vis navnet hvis ($ navn) printf ('

'. __ ('Hei deres sjømann! Mitt navn er% 1 $ s.', 'Eksempel'). '

', $ navn); hvis ($ show_info) printf ($ navn); ekko $ after_widget;

Trinn 4 Oppdateringsfunksjon ()

Neste opp er oppdateringsfunksjonen. Denne funksjonen tar brukerinnstillingene og lagrer dem. Det vil bare oppdatere innstillingene i henhold til brukerens smak.

 funksjon oppdatering ($ new_instance, $ old_instance) $ instance = $ old_instance; // Strip-tagger fra tittel og navn for å fjerne HTML $ instance ['title'] = strip_tags ($ new_instance ['title']); $ instance ['name'] = strip_tags ($ new_instance ['name']); $ instance ['show_info'] = $ new_instance ['show_info']; returner $ instance; 

En ting å merke seg her er at vi fjerner verdiene slik at enhver XHTML kan fjernes fra teksten, som i enkle ord kan påvirke bruken av widgeten vår.


Trinn 5 Form Funksjon ()

Det neste trinnet vil skissere opprette skjemaet som vil fungere som inntastingsboks. Dette vil ta inn de brukerdefinerte innstillingene og verdiene. Skjemafunksjonen kan inkludere avmerkingsbokser, tekstbokser osv.

Før vi lager disse inntastingsfeltene, må vi bestemme hva som skal vises når brukeren ikke velger noe fra widgeten. For å gjøre dette vil vi passere noen standardverdier til den som tittel, beskrivelse osv.

 // Sett opp noen standard widgetinnstillinger. $ defaults = array ('title' => __ ('Eksempel', 'eksempel'), 'navn' => __ ('Bilal Shaheen', 'eksempel'), 'show_info' => true); $ instance = wp_parse_args ((array) $ forekomst, $ standardverdier); ?>

Nå skal vi opprette tekstboksen. Vi vil vedlegge disse alternativene i avsnittet om vedlegget.

 // Widget Tittel: Tekstinngang 

// Tekstinngang

// Avkrysningsboks

name ="get_field_name ('show_info'); ?> "/>

Konklusjon

Og det er det. Du har laget deg selv en veldig fin og enkel widget som viser navnet på forfatteren av bloggen. Videre gir brukeren muligheten til å vise det offentligheten for publikum eller ikke. Lagre koden i en PHP-fil og last den opp til temakatalogen din. Ring det i din functions.php. Deretter går du til widgets panelet ditt og du vil se den nylig opprettede widgeten.

All koden er inkludert i nedlastingsfilen, slik at det blir lettere å kopiere og lime inn. Ha det gøy!