Sådan opretter du et widget-plugin til WordPress

WordPress er et fantastisk Content Management System med mange gode funktioner såsom widgets. I denne tutorial vil jeg forklare dig, hvordan du opretter dine egne widgets i et lille plugin. Dette indlæg dækker nogle ekstra punkter, som du skal forstå, inden du opretter selve widget’en. Nu sker det!


Trin 1: Opret dit widgetplugin

Jeg oprettede for nylig et plugin kaldet “Freelancer Widgets Bundle”, og nogle mennesker spurgte mig hvordan man opretter et sådant plugin, så jeg besluttede at skrive dette indlæg. Første trin er oprettelsen af ​​plugin. Og som du ser, er det ikke den sværeste del. En plugin er ekstra kode tilføjet til WordPress, når du aktiverer det. WordPress opretter en løkke gennem en mappe for at hente alle tilgængelige plugins og liste dem på back office. For at oprette dit plugin har du brug for en editor som Coda (Mac) eller Dreamweaver (PC & Mac). Jeg anbefaler dig at oprette dit plugin i en lokal installation af WordPress, hvilket gør det på en live server kan forårsage nogle problemer, hvis du laver en fejl. Så vær venlig at vente med at teste vores plugin, inden du placerer det som din hosting.

Åbn nu mappen wp-content / plugins. Det er her du vil tilføje dit plugin. Opret et nyt bibliotek og kalder det “widget-plugin” (faktisk kan dette navn være, hvad du vil). Selv hvis vores plugin kun har en enkelt fil, er det altid bedre at bruge en mappe til hvert plugin. Opret en ny fil kaldet “widget-plugin.php” i dit bibliotek (dette navn kan også ændres) og åbn det. Vi er nu ved at tilføje vores første kodelinjer. Definitionen af ​​et plugin under WordPress følger nogle regler, som du kan læse her på kodeksen. Sådan definerer WordPress et plugin:

Så vi er nødt til at ændre denne kode, så den passer til vores behov:

Gem din fil. Ved kun at tilføje kode til vores widget-plugin.php-fil har vi oprettet et plugin! Nå, i øjeblikket gør plugin ikke noget, men WordPress genkender det. For at sikre dig, at det er tilfældet, skal du gå til din administration og gå under menuen "Plugins". Hvis dit plugin vises på listen over plugins, er du god, ellers skal du sørge for, at du fulgte mine instruktioner og prøv igen. Du kan nu aktivere plugin.

Trin 2: Opret widget'en

Vi skal nu oprette selve widgetten. Denne widget vil være en PHP-klasse, der udvider den centrale WordPress-klasse WP_Widget. Grundlæggende defineres vores widget på denne måde:

// Widget-klassen
klasse My_Custom_Widget udvider WP_Widget {

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

// widgetformularen (for backend)
formular til offentlig funktion ($ instans) {
/ * ... * /
}

// Opdater widgetindstillinger
offentlig funktionsopdatering ($ new_instance, $ old_instance) {
/ * ... * /
}

// Vis widget'en
widget til offentlig funktion ($ args, $ instans) {
/ * ... * /
}

}

// Registrer widgetten
funktion my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Denne kode giver WordPress alle de oplysninger, systemet har brug for for at kunne bruge widgeten:

  1. Det konstruktør, at starte widget'en
  2. Det form () -funktion at oprette widgetformularen i administrationen
  3. Det opdater () -funktion, at gemme widgetdata under udgaven
  4. Og widget () -funktion for at vise widgetindholdet i front-end

1 - Konstruktøren

Konstruktøren er den del af koden, der definerer widgetnavnet og de vigtigste argumenter, nedenfor er et eksempel på, hvordan det kan se ud.

// Hovedkonstruktør
offentlig funktion __construct () {
forælder :: __ konstruktion (
'My_custom_widget',
__ ('My Custom Widget', 'text_domain'),
array (
'customize_selective_refresh' => sandt,
)
);
}

Venligst ikke brug af __ () omkring widgetnavnet, denne funktion bruges af WordPress til oversættelse. Jeg anbefaler virkelig, at du altid bruger disse funktioner, for at gøre dit tema fuldt oversætteligt. Og brugen af ​​parameteren 'tilpas_selektiv_refresh' tillader, at widget'en kan opdateres under Udseende> Tilpas når du redigerer widgeten, så i stedet for at opdatere hele siden, opdateres kun widgetten, når der foretages ændringer.

2 - Funktionen form ()

Denne funktion er den, der opretter widgetformularindstillingerne i WordPress-admin-området (enten under Udseende> Widgets eller Udseende> Tilpas> Widgets). Dette er, hvis du indtaster dine data, der skal vises på webstedet. Så jeg vil forklare, hvordan du kan tilføje tekstfelter, tekstområder, markeringsbokse og afkrydsningsfelter til dine widgetformularindstillinger.

// widgetformularen (for backend)
formular til offentlig funktion ($ instans) {

// Angiv standardindstillinger for widget
$ standard = array (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// Analyser aktuelle indstillinger med standardindstillinger
ekstrakt (wp_parse_args ((array) $ instans, $ standard)); ?>


/>

Denne kode tilføjer blot 5 felter til widgetten (Titel, tekst, tekstområde, markering og afkrydsningsfelt). Så først definerer du standardindstillingerne for din widget, derefter analyserer den næste funktion de aktuelle indstillinger, der er defineret / gemt for din widget med standardindstillingerne (så alle indstillinger, der ikke findes, vil vende tilbage til standarden, som når du først tilføjer en widget til din sidebjælke). Og sidst er html for hvert felt. Bemærk brugen af ​​esc_attr () når du tilføjer formularfelterne, dette gøres af sikkerhedsmæssige årsager. Hver gang du gentager en brugerdefineret variabel på dit websted, skal du sørge for, at den først renses.

3 - Funktionen opdatering ()

Opdateringsfunktionen () er virkelig enkel. Da WordPress-kerneudviklere tilføjede et virkelig kraftfuldt widgets API, behøver vi kun at tilføje denne kode for at opdatere hvert felt:

// Opdater widgetindstillinger
offentlig funktionsopdatering ($ 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']): '';
returnere $ instans;
}

Som du kan se, alt hvad vi skal gøre, er at tjekke for hver indstilling, og hvis den ikke er tom, skal du gemme den i databasen. Bemærk brugen af ​​funktionerne wp_strip_all_tags () og wp_kses_post (), disse bruges til at desinficere dataene, før de føjes til databasen. Hver gang du indsætter NOGT brugerindgivet indhold i en database, skal du sikre dig, at det ikke har nogen ondsindet kode. Den første funktion wp_strip_all_tags fjerner alt undtagen basistekst, så du kan bruge det til alle felter, hvor slutværdien er en streng, og den anden funktion wp_kses_post () er den samme funktion, der bruges til indholdet af indlæg, og det fjerner alle tags ud over basale html-lignende links , spænder, divs, billeder osv.

4 - widget () -funktionen

Widget () -funktionen er den, der vil sende indholdet på webstedet. Det er, hvad dine besøgende vil se. Denne funktion kan tilpasses til at omfatte CSS-klasser og specifikke tags, der passer perfekt til din temadisplay. Her er koden (vær opmærksom på ikke, at denne kode let kan ændres, så den passer til dine behov):

// Vis widget'en
widget til offentlig funktion ($ args, $ instans) {

ekstrakt ($ args);

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

// WordPress core før_widget hook (inkluder altid)
ekko $ før_widget;

// Vis widget'en
ekko '
'; // Vis widget-titel, hvis defineret if ($ title) { ekko $ før_title. $ titel. $ After_title; } // Vis tekstfelt if ($ tekst) { ekko '

'. $ tekst. '

'; } // Vis tekstarea-felt if ($ textarea) { ekko '

'. $ tekstarea. '

'; } // Vis markeringsfelt if ($ vælg) { ekko '

'. $ vælg. '

'; } // Vis noget, hvis afkrydsningsfeltet er sandt if ($ afkrydsningsfelt) { ekko '

Noget fantastisk

'; } ekko '
'; // WordPress core after_widget hook (inkluder altid) ekko $ after_widget; }

Denne kode er ikke kompleks, alt hvad du skal huske er at kontrollere, om en variabel er indstillet, hvis du ikke gør det, og hvis du vil udskrive den, får du en fejlmeddelelse.

Den komplette widget-plugin-kode

Hvis du nu har fulgt korrekt, skal dit plugin nu være fuldt funktionsdygtigt, og du kan tilpasse det til dine behov. Hvis du ikke har fulgt guiden eller vil tjekke koden dobbelt, kan du besøge Github-siden for at se den fulde kode.

Se fuld kode på Github

Konklusion

Vi så, at det er meget interessant at oprette en widget inde i et plugin, nu skal du vide, hvordan man opretter et simpelt plugin, der indeholder en widget med forskellige felttyper, og du lærte at gå lidt videre ved hjælp af avancerede teknikker til at tilpasse widgetten. Tillykke, du gjorde et fantastisk stykke arbejde!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map