Paano Gumawa ng isang Widget Plugin Para sa WordPress

Ang WordPress ay isang kamangha-manghang System ng Pamamahala ng Nilalaman na may maraming magagandang tampok tulad ng mga widget. Sa tutorial na ito, ipapaliwanag ko sa iyo kung paano lumikha ng iyong sariling mga widget sa loob ng isang maliit na plugin. Sakop ng post na ito ang ilang mga dagdag na puntos na kailangan mong maunawaan bago lumikha ng widget mismo. Dito tayo pupunta!


Hakbang 1: Lumikha ng iyong Widget Plugin

Kamakailan ay lumikha ako ng isang plugin na tinatawag na “Freelancer Widget Bundle”, at tinanong ako ng ilang mga tao kung paano lumikha ng tulad ng isang plugin, kaya’t nagpasya akong isulat ang post na ito. Ang unang hakbang ay ang paglikha ng plugin. At tulad ng makikita mo, hindi ito ang pinakamahirap na bahagi. Ang isang plugin ay dagdag na code na idinagdag sa WordPress sa sandaling paganahin mo ito. Lumilikha ang WordPress ng isang loop sa pamamagitan ng isang folder upang makuha ang lahat ng magagamit na mga plugin at ilista ang mga ito sa back office. Upang lumikha ng iyong plugin, kakailanganin mo ng isang editor tulad ng Coda (Mac), o Dreamweaver (PC & Mac). Inirerekumenda ko na lumikha ka ng iyong plugin sa isang lokal na pag-install ng WordPress, na ginagawa ito sa isang live na server ay maaaring maging sanhi ng ilang mga problema kung nagkamali ka. Kaya mangyaring, maghintay upang subukan ang aming plugin bago ilagay ito sa iyong hosting.

Buksan na ngayon ang folder wp-content / plugin. Ito kung saan pupunta ka upang idagdag ang iyong plugin. Lumikha ng isang bagong direktoryo at tawagan itong “widget-plugin” (talaga, ang pangalang ito ay maaaring maging anumang nais mo). Kahit na ang aming plugin ay magkakaroon lamang ng isang solong file, palaging mas mahusay na gumamit ng isang folder para sa bawat plugin. Sa iyong direktoryo, lumikha ng isang bagong file na tinatawag na “widget-plugin.php” (maaaring baguhin din ang pangalang ito), at buksan ito. Malapit na kaming magdagdag ng aming mga unang linya ng code. Ang kahulugan ng isang plugin sa ilalim ng WordPress ay sumusunod sa ilang mga patakaran na maaari mong basahin dito sa codex. Narito kung paano tinukoy ng WordPress ang isang plugin:

Kaya, kailangan nating baguhin ang code na ito upang maging angkop sa aming mga pangangailangan:

I-save ang iyong file. Sa pamamagitan lamang ng pagdaragdag ng code sa aming widget-plugin.php file na nilikha namin ang isang plugin! Buweno, sa ngayon ay walang ginagawa ang plugin, ngunit kinikilala ito ng WordPress. Upang matiyak na ito ang kaso, pumunta sa iyong administrasyon, at pumunta sa ilalim ng menu na "Plugins". Kung ang iyong plugin ay lilitaw sa listahan ng mga plugin ikaw ay mabuti, kung hindi man siguraduhin na sinunod mo ang aking mga tagubilin at subukang muli. Maaari mo na ngayong buhayin ang plugin.

Hakbang 2: Lumikha ng Widget

Lilikha kami ngayon ng widget mismo. Ang widget na ito ay isang klase ng PHP na nagpapalawak sa pangunahing klase ng WordPress WP_Widget. Karaniwan, ang aming widget ay tinukoy sa ganitong paraan:

// Ang klase ng widget
klase Ang My_Custom_Widget ay nagpapalawak ng WP_Widget {

// Pangunahing tagapagbuo
pampublikong pagpapaandar __construct () {
/ * ... * /
}

// Ang form ng widget (para sa backend)
pampublikong form form ($ halimbawa) {
/ * ... * /
}

// I-update ang mga setting ng widget
pag-update ng pampublikong pag-update ($ new_instance, $ old_instance) {
/ * ... * /
}

// Ipakita ang widget
pampublikong pagpapaandar ng widget ($ args, $ halimbawa) {
/ * ... * /
}

}

// Irehistro ang widget
gumana my_register_custom_widget () {
rehistro_widget ('My_Custom_Widget');
}
add_action ('mga widget_init', 'my_register_custom_widget');

Ang code na ito ay nagbibigay sa WordPress ng lahat ng impormasyon na kinakailangan ng system upang magamit ang widget:

  1. Ang tagabuo, upang simulan ang widget
  2. Ang form () function upang lumikha ng mga form ng widget sa pangangasiwa
  3. Ang pag-update () function, upang i-save ang data ng widget sa panahon ng edisyon
  4. At ang widget () function upang ipakita ang nilalaman ng widget sa harap-dulo

1 - Ang tagabuo

Ang tagabuo ay bahagi ng code na tumutukoy sa pangalan ng widget at pangunahing mga argumento, sa ibaba ay isang halimbawa ng kung ano ang hitsura nito.

// Pangunahing tagapagbuo
pampublikong pagpapaandar __construct () {
magulang :: __ magtayo (
'my_custom_widget',
__ ('Aking Pasadyang Widget', 'text_domain'),
laruan
'custom_selective_refresh' => totoo,
)
);
}

Mangyaring hindi ang paggamit ng __ () sa paligid ng pangalan ng widget, ang pagpapaandar na ito ay ginagamit ng WordPress para sa pagsasalin. Inirerekomenda ko talaga na laging gamitin ang mga pagpapaandar na ito, upang gawing ganap na maisasalin ang iyong tema. At ang paggamit ng parameter na 'Custom_selective_refresh' ay nagbibigay-daan sa pag-refresh sa widget sa ilalim Hitsura> Ipasadya kapag na-edit ang widget kaya sa halip na i-refresh ang buong pahina lamang ang naka-refresh ang widget kapag gumagawa ng mga pagbabago.

2 - Ang form () function

Ang function na ito ay ang isa na lumilikha ng mga setting ng form ng widget sa lugar ng admin ng WordPress (alinman sa ilalim ng Hitsura> Mga Widget o Hitsura> I-customize ang> Mga Widget). Ito ang ipasok mo ang iyong data upang maipakita sa website. Kaya't ipapaliwanag ko kung paano ka makakapagdagdag ng mga patlang ng teksto, lugar ng teksto, piliin ang mga kahon at mga checkbox sa mga setting ng iyong widget.

// Ang form ng widget (para sa backend)
pampublikong form form ($ halimbawa) {

// Itakda ang mga default ng widget
$ default = array
'pamagat' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'piliin' => '',
);

// Parse ng kasalukuyang mga setting na may mga default
katas (wp_parse_args ((array) $ halimbawa, $ default)); ?>


/>

Ang code na ito ay pagdaragdag lamang ng 5 mga patlang sa widget (Pamagat, teksto, textarea, piliin at checkbox). Kaya't una mong tinukoy ang mga pagkukulang para sa iyong widget, pagkatapos ang susunod na pag-andar ng mga parsyong tinukoy / na-save ang kasalukuyang setting para sa iyong widget na may mga default (kaya ang anumang mga setting na hindi umiiral ay babalik sa default, tulad ng una mong pagdaragdag ng isang widget sa iyong sidebar). At ang huli ay ang html para sa bawat larangan. Pansinin ang paggamit ng esc_attr () kapag nagdaragdag ng mga patlang ng form, ginagawa ito para sa mga kadahilanang pangseguridad. Tuwing nag-echo ka ng isang variable na tinukoy ng gumagamit sa iyong site dapat mong tiyakin na unang sanitized ito.

3 - Ang pag-update () function

Ang pag-update () function ay talagang simple. Tulad ng idinagdag ng mga pangunahing tagabuo ng WordPress ng isang talagang malakas na API ng mga widget, kailangan lamang naming idagdag ang code na ito upang i-update ang bawat larangan:

// I-update ang mga setting ng widget
pag-update ng pampublikong pag-update ($ new_instance, $ old_instance) {
$ halimbawa = $ old_instance;
$ halimbawa ['pamagat'] = isset ($ new_instance ['pamagat'])? wp_strip_all_tags ($ new_instance ['pamagat']): '';
$ halimbawa ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ halimbawa ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ halimbawa ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: maling;
$ halimbawa ['select'] = isset ($ new_instance ['piliin'])? wp_strip_all_tags ($ new_instance ['piliin']): '';
bumalik $ halimbawa;
}

Tulad ng nakikita mo ang dapat nating gawin ay suriin ang bawat setting at kung hindi ito walang laman maliban sa database. Pansinin ang paggamit ng mga wp_strip_all_tags () at wp_kses_post () function, ito ay ginagamit upang i-sanitize ang data bago ito idinagdag sa database. Sa tuwing nagpapasok ka ng ANUMANG gumagamit na isinumite ng nilalaman sa isang database kailangan mong tiyakin na wala itong masamang code. Ang unang function wp_strip_all_tags tinanggal ang lahat maliban sa pangunahing teksto upang magamit mo ito para sa anumang mga patlang kung saan ang pagtatapos ng halaga ay isang string at ang pangalawang pag-andar wp_kses_post () ay ang parehong pag-andar na ginamit para sa nilalaman ng post at tinatanggal ang lahat ng mga tag maliban sa pangunahing html tulad ng mga link , sumasaklaw, divs, mga imahe, atbp.

4 - Ang widget () function

Ang widget () function ay ang isa na mag-output ng nilalaman sa website. Ito ang makikita ng iyong mga bisita. Ang pag-andar na ito ay maaaring ipasadya upang maisama ang mga klase ng CSS, at mga tukoy na tag upang magkatugma sa iyong pagpapakita ng tema. Narito ang code (mangyaring hindi ang code na ito ay madaling mabago upang magkasya sa iyong mga pangangailangan):

// Ipakita ang widget
pampublikong pagpapaandar ng widget ($ args, $ halimbawa) {

kunin ($ args);

// Suriin ang mga pagpipilian sa widget
$ pamagat = isset ($ halimbawa ['pamagat'])? apply_filters ('widget_title', $ halimbawa ['pamagat']): '';
$ text = isset ($ halimbawa ['text'])? $ halimbawa ['text']: '';
$ textarea = isset ($ halimbawa ['textarea'])? $ halimbawa ['textarea']: '';
$ select = isset ($ halimbawa ['piliin'])? $ halimbawa ['piliin']: '';
$ checkbox =! walang laman ($ halimbawa ['checkbox'])? $ halimbawa ['checkbox']: maling;

// WordPress core before_widget hook (palaging kasama)
echo $ before_widget;

// Ipakita ang widget
sigaw
'; // Ipakita ang pamagat ng widget kung tinukoy kung ($ pamagat) { echo $ before_title. $ pamagat. $ after_title; } // Ipakita ang patlang ng teksto kung ($ text) { sigaw

'. $ text. '

'; } // Ipakita ang larangan ng textarea kung ($ textarea) { sigaw

'. $ textarea. '

'; } // Ipakita ang piling patlang kung ($ piliin) { sigaw

'. $ piliin. '

'; } // Ipakita ang isang bagay kung totoo ang checkbox kung ($ checkbox) { sigaw

Isang bagay na kahanga-hangang

'; } sigaw
'; // WordPress core after_widget hook (palaging kasama) echo $ after_widget; }

Hindi kumplikado ang code na ito, ang dapat mong tandaan ay upang suriin kung nakatakda ang isang variable, kung hindi mo at kung nais mong i-print ito, makakakuha ka ng isang mensahe ng error.

Ang Kumpletong Code ng Plugin ng Widget

Ngayon kung nasusunod mo nang tama ang iyong plugin ay dapat na ngayon ay ganap na gumagana at maaari mo itong ipasadya upang magkasya sa iyong mga pangangailangan. Kung hindi ka sumunod sa gabay o nais na doble suriin ang code maaari mong bisitahin ang pahina ng Github upang tingnan ang buong code.

Tingnan ang Buong Code sa Github

Konklusyon

Nakita namin na ang paglikha ng isang widget sa loob ng isang plugin ay talagang kawili-wili, ngayon dapat mong malaman kung paano lumikha ng isang simpleng plugin na naglalaman ng isang widget na may iba't ibang mga uri ng larangan at natutunan mo kung paano pumunta nang kaunti pa gamit ang mga advanced na diskarte upang ipasadya ang widget. Binabati kita, gumawa ka ng isang kamangha-manghang trabaho!

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