WordPress er et fantastisk innholdsstyringssystem med mange flotte funksjoner som widgeter. I denne opplæringen skal jeg forklare deg hvordan du lager dine egne widgeter i en liten plugin. Dette innlegget vil dekke noen ekstra poeng som du må forstå før du oppretter selve widgeten. Her går vi!


Trinn 1: Lag widget-plugin-modulen

Jeg opprettet nylig en plugin kalt “Freelancer Widgets Bundle”, og noen spurte meg hvordan jeg skulle lage en slik plugin, så jeg bestemte meg for å skrive dette innlegget. Første trinn er opprettelsen av plugin. Og som du vil se, det er ikke den vanskeligste delen. En plugin er ekstra kode lagt til WordPress når du aktiverer den. WordPress oppretter en løkke gjennom en mappe for å hente alle tilgjengelige plugins og lister dem opp på back office. For å opprette plugin-modulen, trenger du en redigerer som Coda (Mac) eller Dreamweaver (PC og Mac). Jeg anbefaler deg å opprette plugin-modulen din i en lokal installasjon av WordPress, noe som gjør det på en live-server kan forårsake noen problemer hvis du gjør en feil. Så vær så snill, vent med å teste pluginen vår før du legger den på.

Åpne nå mappen wp-content / plugins. Dette hvor du skal legge til plugin-en din. Lag en ny katalog og kall den “widget-plugin” (faktisk kan dette navnet være hva du vil). Selv om plugin-en bare har en enkelt fil, er det alltid bedre å bruke en mappe for hver plugin. I katalogen din, oppretter du en ny fil som heter “widget-plugin.php” (dette navnet kan også endres) og åpne det. Vi er nå i ferd med å legge til de første kodelinjene våre. Definisjonen av en plugin under WordPress følger noen regler som du kan lese her på kodeksen. Slik definerer WordPress en plugin:

Så vi må endre denne koden slik at den passer til våre behov:

Lagre filen. Ved bare å legge til kode i widgeten-plugin.php-filen, har vi opprettet en plugin! Vel, foreløpig gjør ikke plugin noe, men WordPress gjenkjenner det. For å forsikre deg om at det er tilfelle, gå til administrasjonen og gå under menyen Plugins. Hvis plugin-en din vises i programtilleggslisten, er du god, ellers må du forsikre deg om at du fulgte instruksjonene mine og prøv igjen. Du kan nå aktivere plugin-modulen.

Trinn 2: Lag widgeten

Vi skal nå lage selve widgeten. Denne widgeten vil være en PHP-klasse som utvider den grunnleggende WordPress-klassen WP_Widget. I utgangspunktet vil widgeten vår bli definert på denne måten:

// Widget-klassen
klasse My_Custom_Widget utvider WP_Widget {

// Hovedkonstruktør
offentlig funksjon __construct () {
/ * ... * /
}

// widgetskjemaet (for backend)
skjema for offentlig funksjon ($ instans) {
/ * ... * /
}

// Oppdater widgetinnstillinger
offentlig funksjonsoppdatering ($ new_instance, $ old_instance) {
/ * ... * /
}

// Vis widgeten
widget for offentlig funksjon ($ args, $ instans) {
/ * ... * /
}

}

// Registrer widgeten
funksjon my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Denne koden gir WordPress all informasjonen systemet trenger for å kunne bruke widgeten:

  1. De konstruktør, for å starte widgeten
  2. De form () -funksjon å opprette widgetskjema i administrasjonen
  3. De oppdater () -funksjon, for å lagre widgetdata under utgaven
  4. Og widget () -funksjon for å vise widgetinnholdet i front-end

1 - Konstruktøren

Konstruktøren er den delen av koden som definerer widgetnavnet og hovedargumentene, nedenfor er et eksempel på hvordan det kan se ut.

// Hovedkonstruktør
offentlig funksjon __construct () {
ordnede :: __ konstruksjon (
'My_custom_widget',
__ ('Min tilpassede widget', 'tekst_domene'),
array (
'customize_selective_refresh' => sant,
)
);
}

Ikke bruk __ () rundt widgetnavnet, denne funksjonen brukes av WordPress for oversettelse. Jeg anbefaler deg å bruke alltid disse funksjonene, for å gjøre temaet fullt oversettbart. Og bruk av parameteren ‘tilpasse_selektiv_refresh’ gjør at widgeten kan oppdateres under Utseende> Tilpass når du redigerer widgeten, så i stedet for å oppdatere hele siden, blir bare widgeten oppdatert når du gjør endringer.

2 - Form () -funksjonen

Denne funksjonen er den som oppretter widget-skjemainnstillingene i WordPress admin-området (enten under Utseende> Widgets eller Utseende> Tilpass> Widgets). Dette er hvis du oppgir dataene dine som skal vises på nettstedet. Så jeg skal forklare hvordan du kan legge til tekstfelt, tekstområder, merkebokser og avmerkingsbokser i widgetformularinnstillingene.

// widgetskjemaet (for backend)
skjema for offentlig funksjon ($ instans) {

// Angi standardinnstillinger for widget
$ standard = matrise (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// Analyser gjeldende innstillinger med standardverdier
trekke ut (wp_parse_args ((matrise) $ instans, $ standard)); ?>


/>

Denne koden er ganske enkelt å legge til 5 felt til widgeten (Tittel, tekst, tekstområde, velg og avkrysningsrute). Så først definerer du standardverdiene for widgeten din, deretter analyserer neste funksjon de gjeldende innstillingene som er definert / lagret for widgeten din med standardverdiene (så innstillinger som ikke eksisterer, vil gå tilbake til standardinnstillingen, som når du først legger til en widget til sidefeltet). Og sist er html for hvert felt. Legg merke til bruken av esc_attr () når du legger til skjemafeltene, dette gjøres av sikkerhetsmessige årsaker. Når du gjengir en brukerdefinert variabel på nettstedet ditt, bør du sørge for at den først blir sanert.

3 - Oppdateringsfunksjonen

Oppdateringsfunksjonen () er virkelig enkel. Da WordPress-kjerneutviklere la til et virkelig kraftig widgets API, trenger vi bare å legge til denne koden for å oppdatere hvert felt:

// Oppdater widgetinnstillinger
offentlig funksjonsoppdatering ($ new_instance, $ old_instance) {
$ instans = $ old_instance;
$ instans ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instans ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instans ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instans ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: falsk;
$ instans ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['select']): '';
returner $ instans;
}

Som du kan se alt vi trenger å gjøre er å se etter hver innstilling, og hvis den ikke er tom, lagrer du den i databasen. Legg merke til bruken av wp_strip_all_tags () og wp_kses_post () -funksjonene, disse brukes til å desinfisere dataene før de legges til databasen. Hver gang du setter inn noe brukerinnsendt innhold i en database, må du forsikre deg om at det ikke har noen ondsinnet kode. Den første funksjonen wp_strip_all_tags fjerner alt bortsett fra grunnleggende tekst, slik at du kan bruke den for alle felt der sluttverdien er en streng, og den andre funksjonen wp_kses_post () er den samme funksjonen som brukes for innleggets innhold, og den fjerner alle koder foruten grunnleggende html-lignende lenker , spenn, div, bilder osv.

4 - Widget-funksjonen

Widget-funksjonen er den som vil gi ut innholdet på nettstedet. Det er hva de besøkende vil se. Denne funksjonen kan tilpasses for å inkludere CSS-klasser og spesifikke koder som passer perfekt til temavisningen. Her er koden (vær ikke oppmerksom på at denne koden lett kan endres for å passe dine behov):

// Vis widgeten
widget for offentlig funksjon ($ args, $ instans) {

ekstrakt ($ args);

// Sjekk widgetalternativene
$ title = isset ($ instans ['title'])? Apply_filters ('widget_title', $ instans ['title']): '';
$ text = isset ($ instans ['tekst'])? $ instans ['text']: '';
$ textarea = isset ($ instans ['textarea'])? $ instans ['textarea']: '';
$ select = isset ($ instans ['select'])? $ instans ['select']: '';
$ avkrysningsrute =! tom ($ instans ['avkrysningsrute'])? $ instans ['avkrysningsrute']: falsk;

// WordPress core før_widget hook (inkluderer alltid)
ekko $ before_widget;

// Vis widgeten
ekko '
'; // Vis widgettittel hvis definert if ($ title) { ekko $ før_tittelen. $ tittel. $ After_title; } // Vis tekstfelt if ($ tekst) { ekko '

'. $ tekst. '

'; } // Vis tekstfeltfelt if ($ textarea) { ekko '

'. $ textarea. '

'; } // Vis valgfelt if ($ velg) { ekko '

'. $ velg. '

'; } // Vis noe hvis avkrysningsruten er sann if ($ avkrysningsrute) { ekko '

Noe kjempebra

'; } ekko '
'; // WordPress core after_widget hook (inkluderer alltid) ekko $ after_widget; }

Denne koden er ikke kompleks, alt du trenger å huske er å sjekke om en variabel er angitt, hvis du ikke gjør det og hvis du vil skrive ut den, får du en feilmelding.

Den komplette widget-plugin-koden

Hvis du nå har fulgt riktig, skal plugin-en nå være i funksjon, og du kan tilpasse den til dine behov. Hvis du ikke har fulgt guiden eller vil dobbeltsjekke koden, kan du gå til Github-siden for å se hele koden.

Vis full kode på Github

Konklusjon

Vi så at det er veldig interessant å lage en widget i en plugin, nå må du vite hvordan du lager en enkel plugin som inneholder en widget med forskjellige felttyper, og du lærte hvordan du kan gå litt lenger ved å bruke avanserte teknikker for å tilpasse widgeten. Gratulerer, du gjorde en fantastisk jobb!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me