Paano Gumawa ng Custom na Widget ng WordPress

Gusto mo bang lumikha ng iyong sariling pasadyang mga widget sa WordPress? Pinapayagan ka ng mga widget na i-drag at i-drop ang mga elemento sa anumang sidebar o widget na handa na lugar ng iyong website. Sa artikulong ito, ipapakita namin sa iyo kung paano madaling lumikha ng isang pasadyang WordPress widget.

Paglikha ng isang custom na widget 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 widget na lugar na handa. Isipin ang mga ito bilang mga module na maaari mong gamitin upang magdagdag ng iba’t ibang mga elemento sa pamamagitan ng paggamit ng isang simpleng drag at drop interface.

Sa pamamagitan ng default, ang WordPress ay may isang karaniwang hanay ng mga widget na maaari mong gamitin sa anumang WordPress tema.

Mga widget ng WordPress

Pinapayagan din ng WordPress ang mga developer na lumikha ng kanilang sariling mga custom na widget. Maraming mga tema at plugin ng WordPress ang dumating sa kanilang sariling mga custom na widget na maaari mong idagdag sa iyong mga sidebar.

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

Ang pagkakaroon ng sinabi na, tingnan natin kung paano madaling lumikha ng iyong sariling custom na mga widget sa WordPress.

Paglikha ng Custom na Widget sa WordPress

Bago kami makapagsimula, magiging mas mabuti kung lumikha ka ng isang plugin na tukoy sa site kung saan ikaw ay tatanggalin ang code ng widget mula sa tutorial na ito.

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

Sa tutorial na ito, lilikha kami ng isang simpleng widget na nagpapadala lamang ng mga bisita. Tingnan ang code na ito at i-paste ito sa iyong site-specific na plugin upang makita ito sa aksyon.

// Magrehistro at i-load ang widget
 function wpb_load_widget () {
 register_widget ('wpb_widget');
 }
 add_action ('widgets_init', 'wpb_load_widget');

 // Paglikha ng widget
 Ang wpb_widget ng klase ay umaabot sa WP_Widget {

 function __construct () {
 magulang :: __ construct (

 // Base ID ng iyong widget
 'wpb_widget',

 / / Lumikha ng pangalan ng Widget sa UI
 __ ('Widget ng site', 'wpb_widget_domain'),

 // Paglalarawan ng Widget
 array ('description' => __ ('Sample widget batay sa Tutorial site', 'wpb_widget_domain'),)
 );
 }

 // Paglikha ng widget front-end

 pampublikong function widget ($ args, $ halimbawa) {
 $ title = apply_filters ('widget_title', $ instance ['title']);

 // 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'];

 // Ito ay kung saan mo patakbuhin ang code at ipakita ang output
 echo __ ('Hello, World!', 'wpb_widget_domain');
 echo $ args ['after_widget'];
 }

 // Widget Backend
 pampublikong function na form ($ Halimbawa) {
 kung (isset ($ instance ['title'])) {
 $ title = $ instance ['title'];
 }
 ibang {
 $ title = __ ('Bagong pamagat', 'wpb_widget_domain');
 }
 // Form ng admin ng Widget
 ?> 

lugar

Ang Custom na widget ng widget ay idinagdag sa isang sidebar

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

Pag-preview ng iyong pasadyang widget

Ngayon pag-aralan natin muli ang code.

Una naming nakarehistro ang 'wpb_widget' at na-load ang aming pasadyang widget. Pagkatapos nito, tinukoy namin ang widget na iyon, at kung paano ipapakita ang back-end na widget.

Sa wakas, tinukoy namin kung paano hahawakan ang mga pagbabago na ginawa sa widget.

Ngayon ay may ilang mga bagay na maaari mong itanong. Halimbawa, kung ano ang layunin wpb_text_domain ?

Ang WordPress ay gumagamit ng gettext upang mahawakan ang pagsasalin at lokalisasyon. Ito wpb_text_domain at __e nagsasabi sa gettext na gumawa ng isang string na magagamit para sa pagsasalin. Tingnan kung paano mo mahanap ang pagsasalin handa WordPress tema.

Kung ikaw ay lumilikha ng custom na widget para sa iyong tema, maaari mong palitan wpb_text_domain gamit ang domain ng iyong tema ng tema.