Paano Gumawa ng isang Pasadyang WordPress Widget

Nais mo bang lumikha ng iyong sariling pasadyang mga widget sa WordPress? Pinapayagan ka ng mga Widget na magdagdag ng mga elemento ng hindi nilalaman sa isang sidebar o anumang lugar na handa ng widget sa iyong website.

Maaari kang gumamit ng mga widget upang magdagdag ng mga banner, mga patalastas, mga form ng pag-sign up ng newsletter, at iba pang mga elemento sa iyong website.

Sa artikulong ito, ipapakita namin sa iyo kung paano lumikha ng isang pasadyang WordPress widget, hakbang-hakbang.

Lumilikha ng isang pasadyang WordPress widget

Tandaan: Ang tutorial na ito ay para sa mga gumagamit ng WordPress na natututo ng pag-unlad at pag-cod ng WordPress.

Ano ang isang WordPress Widget?

Ang mga widget ng WordPress ay naglalaman ng mga piraso ng code na maaari mong idagdag sa mga sidebars ng iyong website o mga lugar na handa nang widget.

Isipin ang mga ito bilang mga module na maaari mong magamit upang magdagdag ng iba’t ibang mga elemento sa pamamagitan ng paggamit ng isang simpleng pag-drag at drop interface.

Bilang default, ang WordPress ay may isang karaniwang hanay ng mga widget na maaari mong magamit sa anumang tema ng WordPress. Tingnan ang gabay ng nagsisimula sa kung paano magdagdag at gumamit ng mga widget sa WordPress.

Pagdaragdag ng mga widget sa WordPress

Pinapayagan din ng WordPress ang mga developer na lumikha ng kanilang sariling mga pasadyang mga widget.

Maraming mga premium na tema at plugin ay may sariling mga pasadyang mga widget na maaari mong idagdag sa iyong mga sidebars.

Halimbawa, maaari kang magdagdag ng isang form ng contact, isang pasadyang form ng pag-login, o isang photo gallery sa isang sidebar nang walang pagsulat ng anumang code.

Pagkasabi nito, tingnan kung paano madaling lumikha ng iyong sariling pasadyang mga widget sa WordPress.

Tutorial ng Video

Mag-subscribe sa WPBeginner

Kung mas gusto mo ang mga nakasulat na tagubilin, pagkatapos mangyaring magpatuloy sa pagbabasa.

Lumilikha ng isang Pasadyang Widget sa WordPress

Kung natututo ka ng WordPress coding, kakailanganin mo ang isang lokal na kapaligiran sa pag-unlad. Maaari mong mai-install ang WordPress sa iyong computer (Mac o Windows).

Mayroong maraming mga paraan upang idagdag ang iyong pasadyang code ng widget sa WordPress.

Sa isip, maaari kang lumikha ng isang plugin na tukoy sa site at i-paste ang iyong code sa widget doon.

Maaari mo ring i-paste ang code sa file ng function.php ng ​​iyong tema. Gayunpaman, magagamit lamang ito kapag ang partikular na tema ay aktibo.

Ang isa pang tool na maaari mong magamit ay ang Code ng Snippets plugin na nagbibigay-daan sa iyo upang madaling magdagdag ng pasadyang code sa iyong WordPress website.

Sa tutorial na ito, gagawa kami ng isang simpleng widget na nagpapasalamat lamang sa mga bisita. Ang layunin dito ay upang maging pamilyar sa klase ng WordPress widget.

Magsimula na tayo.

Lumilikha ng isang Pangunahing Widget ng WordPress

Ang WordPress ay may built-in na WordPress Widget na klase. Ang bawat bagong widget ng WordPress ay nagpapalawak ng klase ng widget ng WordPress.

Mayroong 18 mga pamamaraan na nabanggit sa handbook ng WordPress developer na maaaring magamit sa klase ng WP Widget.

Gayunpaman, para sa kapakanan ng tutorial na ito, tututuon kami sa mga sumusunod na pamamaraan.

  • __construct (): Ito ang bahagi kung saan nilikha namin ang widget ID, pamagat, at paglalarawan.
  • widget: Ito ay kung saan tinukoy namin ang output na nabuo ng widget.
  • form: Ang bahaging ito ng code ay kung saan nilikha namin ang form na may mga pagpipilian sa widget para sa backend.
  • update: Ito ang bahagi kung saan nai-save namin ang mga pagpipilian sa widget sa database.

Pag-aralan natin ang sumusunod na code kung saan ginamit namin ang apat na pamamaraan na ito sa loob ng klase ng WP_Widget.

// Paglikha ng widget
ang klase ng wpb_widget ay nagpapalawak ng WP_Widget {

// Ang bahagi ng konstruksyon
pag-andar __construct () {

}

// Paglikha ng front-end ng widget
pampublikong pagpapaandar ng widget ($ args, $ halimbawa) {

}

// Lumilikha ng Widget ng Widget
pampublikong form form ($ halimbawa) {

}

// Pag-update ng widget na pinapalitan ang mga dating pagkakataon sa bago
pag-update ng pampublikong pag-update ($ new_instance, $ old_instance) {

}

// Nagtatapos ang wpb_widget ng klase
}

Ang pangwakas na piraso ng code ay kung saan aktwal naming irehistro ang widget at mai-load ito sa loob ng WordPress.

gumana wpb_load_widget () {
rehistro_widget (‘wpb_widget’);
}
add_action (‘mga widget_init’, ‘wpb_load_widget’);

Ngayon ay ilagay ang lahat ng ito nang magkasama upang lumikha ng isang pangunahing WordPress widget.

Maaari mong kopyahin at i-paste ang sumusunod na code sa iyong pasadyang plugin o file na function.php ng ​​tema.

// Paglikha ng widget
ang klase ng wpb_widget ay nagpapalawak ng WP_Widget {

pag-andar __construct () {
magulang :: __ magtayo (

// Base ID ng iyong widget
‘wpb_widget’,

// Lilitaw ang pangalan ng Widget sa UI
__ (‘WPBeginner Widget’, ‘wpb_widget_domain’),

// paglalarawan ng Widget
array (‘paglalarawan’ => __ (‘Halimbawang widget batay sa WPBeginner Tutorial’, ‘wpb_widget_domain’),)
);
}

// Paglikha ng front-end ng widget

pampublikong pagpapaandar ng widget ($ args, $ halimbawa) {
$ pamagat = apply_filters (‘widget_title’, $ halimbawa [‘pamagat’]);

// bago at pagkatapos ng mga argumento ng widget ay tinukoy ng mga tema
echo $ args [‘before_widget’];
kung (! walang laman ($ pamagat))
echo $ args [‘before_title’]. $ pamagat. $ args [‘after_title’];

// Narito ang pagpapatakbo ng code at ipakita ang output
echo __ (‘Kumusta, Mundo!’, ‘wpb_widget_domain’);
echo $ args [‘after_widget’];
}

// Widget Backend
pampublikong form form ($ halimbawa) {
kung (isset ($ halimbawa [‘pamagat’])) {
$ pamagat = $ halimbawa [‘pamagat’];
}
iba pa {
$ pamagat = __ (‘Bagong pamagat’, ‘wpb_widget_domain’);
}
// form ng admin ng Widget
?>

<?php _e (‘Pamagat:’); ?>

<?php
}

// Pag-update ng widget na pinapalitan ang mga dating pagkakataon sa bago
pag-update ng pampublikong pag-update ($ new_instance, $ old_instance) {
$ halimbawa = array ();
$ halimbawa [‘pamagat’] = (! walang laman ($ new_instance [‘pamagat’]))? strip_tags ($ new_instance [‘pamagat’]): ”;
bumalik $ halimbawa;
}

// Nagtatapos ang wpb_widget ng klase
}

// Magrehistro at i-load ang widget
gumana wpb_load_widget () {
rehistro_widget (‘wpb_widget’);
}
add_action (‘mga widget_init’, ‘wpb_load_widget’);

Pagkatapos idagdag ang code na kailangan mong magtungo sa Hitsura »Mga Widget pahina. Mapapansin mo ang bagong WPBeginner Widget sa listahan ng mga magagamit na mga widget. Kailangan mong i-drag at i-drop ang widget na ito sa isang sidebar.

Widget ng Demo

Ang widget na ito ay may isang patlang na form lamang upang punan, maaari mong idagdag ang iyong teksto at mag-click sa pindutan ng I-save upang maimbak ang iyong mga pagbabago.

Ngayon ay maaari mong bisitahin ang iyong website upang makita ito sa aksyon.

Pag-preview ng iyong pasadyang widget

Ngayon pag-aralan ulit ang code.

Una naming nakarehistro ang ‘wpb_widget’ at na-load ang aming pasadyang widget. Matapos nito natukoy namin kung ano ang ginagawa ng widget na iyon, at kung paano ipakita ang widget sa back-end.

Panghuli, tinukoy namin kung paano mahawakan ang mga pagbabago na ginawa sa widget.

Ngayon ay may ilang mga bagay na maaaring itanong mo. Halimbawa, ano ang layunin wpb_text_domain?

Gumagamit ang WordPress ng gettext upang hawakan ang pagsasalin at lokalisasyon. Ang wpb_text_domain at __e ay nagsasabi sa gettext na gumawa ng isang string na magagamit para sa pagsasalin. Tingnan kung paano mo mahahanap ang handa na mga tema ng WordPress.

Kung lumikha ka ng isang pasadyang widget para sa iyong tema, maaari mong palitan ang wpb_text_domain sa teksto ng teksto ng iyong tema.

Inaasahan naming nakatulong sa iyo ang artikulong ito kung paano madaling lumikha ng isang pasadyang widget ng WordPress. Maaari mo ring makita ang aming listahan ng mga pinaka kapaki-pakinabang na mga widget ng WordPress para sa iyong site.

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