Kako ustvariti vtičnik za widget za WordPress

WordPress je neverjeten sistem za upravljanje vsebine z veliko odličnimi funkcijami, kot so gradniki. V tej vadnici vam bom razložil, kako lahko ustvarite svoje pripomočke v majhnem vtičniku. Ta objava bo zajemala nekaj dodatnih točk, ki jih morate razumeti, preden ustvarite pripomoček. Tukaj gremo!


1. korak: Ustvarite svoj vtičnik za gradnike

Pred kratkim sem ustvaril vtičnik z imenom “Freelancer Widgets Bundle” in nekateri so me vprašali, kako ustvariti tak vtičnik, zato sem se odločil, da napišem to objavo. Prvi korak je ustvarjanje vtičnika. In kot boste videli, to ni najtežji del. Vtičnik je dodatna koda dodana v WordPress, ko jo aktivirate. WordPress ustvari zanko skozi mapo, da prikliče vse dostopne vtičnike in jih seznami v zaledni pisarni. Če želite ustvariti svoj vtičnik, boste potrebovali urejevalnik, na primer Coda (Mac) ali Dreamweaver (PC in Mac). Priporočam vam, da svoj vtičnik ustvarite v lokalni namestitvi WordPress-a, saj lahko na napačnem strežniku povzroči nekaj težav, če naredite napako. Prosim, počakajte, da preizkusite naš vtičnik, preden nanj postavite svoje gostovanje.

Odprite zdaj mapo wp-content / plugins. Tu boste dodali svoj vtičnik. Ustvarite nov imenik in ga poimenite “widget-plugin” (pravzaprav je to ime lahko karkoli želite). Tudi če bo naš vtičnik imel samo eno datoteko, je vedno bolje uporabiti mapo za vsak vtičnik. V svojem imeniku ustvarite novo datoteko imenovano “widget-plugin.php” (to ime lahko spremenite tudi) in jo odprite. Zdaj bomo dodali svoje prve vrstice kode. Opredelitev vtičnika v programu WordPress sledi nekaterim pravilom, ki jih lahko preberete tukaj na kodeksu. Takole WordPress definira vtičnik:

Torej moramo to kodo spremeniti tako, da bo ustrezala našim potrebam:

Shranite datoteko. Z dodajanjem kode v našo datoteko widget-plugin.php smo ustvarili vtičnik! No, vtičnik za zdaj ne naredi ničesar, a WordPress to prepozna. Če želite preveriti, ali je tako, pojdite na upravo in pojdite v meni »Vtičniki«. Če se vaš vtičnik pojavi na seznamu vtičnikov, ste dober, sicer se prepričajte, da ste upoštevali moja navodila in poskusite znova. Zdaj lahko vtičnik vklopite.

2. korak: Ustvarite gradnik

Zdaj bomo ustvarili pripomoček sam. Ta gradnik bo razred PHP, ki bo razširil jedro razreda WordPress WP_Widget. V bistvu bo naš pripomoček opredeljen na ta način:

// Razred gradnikov
razred My_Custom_Widget razširi WP_Widget {

// Glavni konstruktor
javna funkcija __construct () {
/ * ... * /
}

// Obrazec pripomočkov (za zaledje)
obrazec javne funkcije ($ primerek) {
/ * ... * /
}

// Posodobi nastavitve pripomočkov
posodobitev javne funkcije ($ new_instance, $ old_instance) {
/ * ... * /
}

// Prikažite pripomoček
widget za javno funkcijo ($ args, $ instance) {
/ * ... * /
}

}

// Registrirajte gradnik
funkcija my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
dodajanje ('widgets_init', 'my_register_custom_widget');

Ta koda daje WordPressu vse informacije, ki jih sistem potrebuje za uporabo pripomočka:

  1. The konstruktor, za začetek gradnika
  2. The oblika () funkcija ustvariti obliko pripomočka v administraciji
  3. The update () funkcija, za shranjevanje podatkov gradnikov med izdajo
  4. In funkcija widget () za prikaz vsebine pripomočkov na sprednjem delu

1 - Konstruktor

Konstruktor je del kode, ki določa ime gradnika in glavne argumente, spodaj je primer, kako lahko izgleda.

// Glavni konstruktor
javna funkcija __construct () {
nadrejeni :: __ konstruct (
'my_custom_widget',
__ („Moj pripomoček po meri“, „text_domain“),
matrika (
'customize_selective_refresh' => res,
)
);
}

Prosimo, ne uporabljajte __ () okoli imena pripomočka, to funkcijo uporablja WordPress za prevod. Resnično vam priporočam, da vedno uporabljate te funkcije, da bo vaša tema v celoti prevedljiva. Uporaba parametra „customize_selective_refresh“ omogoča, da se pripomoček osveži pod Videz> Prilagodi ko urejate gradnik, tako da namesto osveževanja celotne strani, se pri spreminjanju osveži samo pripomoček.

2 - Funkcija forme ()

Ta funkcija je tista, ki ustvari nastavitve obrazca pripomočkov v upravnem območju WordPress (bodisi pod Videz> Widgeti ali Videz> Prilagodi> Widgets). Tu boste vnesli svoje podatke, ki bodo prikazani na spletnem mestu. Zato bom razložil, kako lahko v nastavitve obrazca pripomočkov dodate besedilna polja, besedilna polja, potrdite polja in potrditvena polja.

// Obrazec pripomočkov (za zaledje)
obrazec javne funkcije ($ primerek) {

// Nastavite privzete nastavitve
$ privzeto = matrika (
'naslov' => '',
'besedilo' => '',
'textarea' => '',
'potrditveno polje' => '',
'select' => '',
);

// Razčleni trenutne nastavitve s privzetimi vrednostmi
izvleček (wp_parse_args ((array) $ instance, $ default)); ?>


"ime ="get_field_name ("potrditveno polje")); ?> "type =" checkbox "value =" 1 " />

Ta koda preprosto doda 5 polj v gradnik (naslov, besedilo, besedilno polje, potrditveno polje in potrditveno polje). Torej najprej določite privzete nastavitve za svoj pripomoček, nato pa naslednja funkcija razdeli trenutne nastavitve, opredeljene / shranjene za vaš widget z privzetimi nastavitvami (tako da se vse nastavitve, ki ne obstajajo, vrnejo na privzete vrednosti, na primer, ko prvič dodate pripomoček v vaš stranski trak). In nazadnje je html za vsako polje. Ko dodate polja obrazca, uporabite esc_attr (), to storite iz varnostnih razlogov. Kadar koli na svojem spletnem mestu odmevate uporabniško določeno spremenljivko, se morate najprej prepričati.

3 - funkcija update ()

Funkcija update () je res preprosta. Ker so jedrni razvijalci programa WordPress dodali res močan API pripomočkov, moramo to kodo dodati samo za posodobitev vsakega polja:

// Posodobi nastavitve pripomočkov
posodobitev javne funkcije ($ new_instance, $ old_instance) {
$ instance = $ old_in substance;
$ instance ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['naslov']): '';
$ instance ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instance ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: napačno;
$ instance ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['izberi']): '';
vrniti primerek $;
}

Kot lahko vidite, moramo samo preveriti, ali je nastavitev vsaka, in jo shranite v bazo podatkov. Upoštevajte uporabo funkcij wp_strip_all_tags () in wp_kses_post (), ki se uporabljajo za sanitacijo podatkov, preden so dodani v bazo. Vsakič, ko v bazo vstavljate VSEBE uporabniške vsebine, se morate prepričati, da nima zlonamerne kode. Prva funkcija wp_strip_all_tags odstrani vse, razen osnovnega besedila, tako da jo lahko uporabite za vsa polja, kjer je končna vrednost niz, druga funkcija wp_kses_post () pa je ista funkcija, ki se uporablja za vsebino objave in odstrani vse oznake poleg osnovnih html povezav , razponi, divs, slike itd.

4 - Funkcija widget ()

Funkcija widget () je tista, ki bo oddajala vsebino na spletnem mestu. To bodo videli vaši obiskovalci. To funkcijo lahko prilagodite tako, da vključuje razrede CSS in določene oznake, da se popolnoma ujemajo z vašim prikazom teme. Tu je koda (prosimo, ne, da lahko to kodo enostavno spremenite, da ustreza vašim potrebam):

// Prikažite pripomoček
widget za javno funkcijo ($ args, $ instance) {

izvleček ($ args);

// Preverite možnosti pripomočkov
$ title = isset ($ instance ['title'])? apply_filters ('widget_title', $ instance ['title']): '';
$ text = isset ($ instance ['text'])? $ instance ['text']: '';
$ textarea = isset ($ instance ['textarea'])? $ instance ['textarea']: '';
$ select = isset ($ instance ['select'])? $ instance ['select']: '';
$ checkbox =! prazno ($ instance ['checkbox'])? $ instance ['potrditveno polje']: napačno;

// WordPress jedro pred_widget kljuko (vedno vključite)
echo $ before_widget;

// Prikažite pripomoček
odmev '
'; // Prikažite naslov pripomočka, če je določen če ($ naslov) { odmeva $ before_title. $ naslov. $ after_title; } // Prikaži besedilno polje če ($ besedilo) { odmev '

'. $ besedila. '

'; } // Prikaži polje textarea če ($ textarea) { odmev '

'. $ textarea. '

'; } // Prikaži polje za izbiro če ($ select) { odmev '

'. $ select. '

'; } // Prikažite nekaj, če je potrditveno polje resnično če ($ potrditveno polje) { odmev '

Nekaj ​​super

'; } odmev '
'; // WordPress jedro after_widget kavelj (vedno vključite) echo $ after_widget; }

Ta koda ni zapletena, vse kar morate zapomniti je, da preverite, ali je spremenljivka nastavljena, če je ni in če jo želite natisniti, boste prejeli sporočilo o napaki.

Popolna koda vtičnika za gradnike

Če ste pravilno sledili, mora biti vaš vtičnik zdaj popolnoma funkcionalen in ga lahko prilagodite svojim potrebam. Če niste upoštevali vodnika ali želite dvakrat preveriti kodo, lahko obiščete stran Github in si ogledate celotno kodo.

Oglejte si celotno kodo na Githubu

Zaključek

Videli smo, da je ustvarjanje pripomočka znotraj vtičnika zelo zanimivo, zdaj pa morate vedeti, kako ustvariti preprost vtičnik, ki vsebuje gradnik z različnimi vrstami polj, in naučili ste se, kako iti še malo naprej z uporabo naprednih tehnik za prilagajanje pripomočka. Čestitamo, naredili ste neverjetno delo!

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