Si të krijoni një prizë widget për WordPress

WordPress është një sistem i mahnitshëm i Menaxhimit të Përmbajtjes me shumë karakteristika të shkëlqyera siç janë widget. Në këtë mësimdhënie, unë do t’ju shpjegoj se si të krijoni widget-et tuaja brenda një shtojce të vogël. Ky postim do të përfshijë disa pika shtesë që duhet të kuptoni përpara se të krijoni vetë widget. Këtu shkojmë!


Hapi 1: Krijoni plugin tuaj widget

Kohët e fundit kam krijuar një shtojcë të quajtur “Freelancer Widgets Bundle”, dhe disa njerëz më pyetën se si të krijoja një shtojcë të tillë, kështu që vendosa ta shkruaj këtë postim. Hapi i parë është krijimi i shtojcës. Dhe siç do ta shihni, nuk është pjesa më e vështirë. Një shtesë është një kod shtesë i shtuar në WordPress sapo ta aktivizoni. WordPress krijon një lak përmes një dosje për të tërhequr të gjitha shtojcat në dispozicion dhe për t’i renditur ato në zyrën prapa. Për të krijuar shtojcën tuaj, do t’ju duhet një redaktues siç është Coda (Mac), ose Dreamweaver (PC & Mac). Unë ju rekomandoj të krijoni shtojcën tuaj në një instalim lokal të WordPress, duke e bërë atë në një server live mund të shkaktojë disa probleme nëse bëni një gabim. Prandaj, ju lutemi, prisni të provoni shtojcën tonë përpara se të vendosni në të hostin tuaj.

Hapni tani dosjen wp-përmbajtje / shtojcat. Kjo ku do të shtoni shtojcën tuaj. Krijoni një direktori të re dhe e quajeni atë “plugin widget” (në të vërtetë, ky emër mund të jetë gjithçka që dëshironi). Edhe nëse shtojca jonë do të ketë vetëm një skedar të vetëm, është gjithmonë më mirë të përdorësh një dosje për secilën shtojcë. Në drejtorinë tuaj, krijoni një skedar të ri të quajtur “widget-plugin.php” (edhe ky emër mund të ndryshohet) dhe hapeni. Tani jemi gati të shtojmë rreshtat e parë të kodit. Përkufizimi i një shtojce nën WordPress pason disa rregulla që mund t’i lexoni këtu në kodik. Ja se si WordPress përcakton një shtojcë:

Pra, ne duhet ta modifikojmë këtë kod për ta bërë atë të përshtatet me nevojat tona:

Ruani skedarin tuaj. Duke shtuar vetëm kodin në skedarin tonë widget-plugin.php kemi krijuar një shtojcë! Epo, tani për tani plugin nuk bën asgjë, por WordPress e njeh atë. Për tu siguruar që është rasti, shkoni në administratën tuaj dhe shkoni në menunë "Plugins". Nëse shtojca juaj shfaqet në listën e shtojcave, ju jeni mirë, përndryshe sigurohuni që keni ndjekur udhëzimet e mia dhe provoni përsëri. Tani mund të aktivizoni shtojcën.

Hapi 2: Krijoni widget

Tani do të krijojmë widget vetë. Ky widget do të jetë një klasë PHP që shtrihet në klasën bazë të WordPress WP_Widget. Në thelb, widget-i ynë do të përcaktohet në këtë mënyrë:

// Klasa widget
klasa My_Custom_Widget shtrihet WP_Widget

// Ndërtuesi kryesor
funksioni publik __konstrukton ()
/ * ... * /
}

// Forma e widget (për backend)
forma e funksionit publik (shembulli $) {
/ * ... * /
}

// Përditësoni cilësimet e widget
azhurnimi i funksionit publik ($ new_instance, $ old_instance) {
/ * ... * /
}

// Afishoni widget
widget e funksionit publik ($ argumenton, shembulli $) {
/ * ... * /
}

}

// Regjistroni widget
funksionojnë my_register_custom_widget ()
Register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Ky kod i jep WordPress të gjitha informacionet që sistemi duhet të jetë në gjendje të përdorë widget:

  1. konstruktor, për të iniciuar widget
  2.  funksion () funksioni për të krijuar formën e widget-it në administratë
  3. funksioni i azhurnuar (), për të ruajtur të dhënat e widget gjatë botimit
  4. Dhe funksioni widget () për të shfaqur përmbajtjen e widget-it në pjesën e përparme

1 - Ndërtuesi

Krijuesi është pjesa e kodit që përcakton emrin e widget dhe argumentet kryesore, më poshtë është një shembull i asaj se si mund të duket.

// Ndërtuesi kryesor
funksioni publik __konstrukton ()
prind :: __ konstrukt (
'My_custom_widget',
__ ('widget my personal', 'text_domain'),
array (
'customize_selective_refresh' => e vërtetë,
)
);
}

Ju lutemi mos përdorni përdorimin e __ () rreth emrit të widget, ky funksion është përdorur nga WordPress për përkthim. Unë me të vërtetë ju rekomandoj të përdorni gjithmonë keto funksione, për ta bërë temën tuaj plotësisht të përkthyeshme. Dhe përdorimi i parametrit ‘personalize_selective_refresh’ lejon që widget të rifreskohet nën Pamja> Rregulloje kur redaktoni widget kështu që në vend që të rifreskoni të gjithë faqen vetëm widget rinovohet kur bëni ndryshime.

2 - Funksioni i formës ()

Ky funksion është ai që krijon cilësimet e formës së widget në zonën e administratorit të WordPress (ose nën Paraqitjen> Widgets ose Paraqitjen> Përshtatni> Widgets). Kjo do të ishte kur ju do të futni të dhënat tuaja për t'u shfaqur në faqen e internetit. Kështu që unë do të shpjegoj se si mund të shtoni fushat e tekstit, zonat e tekstit, zgjidhni kutitë dhe kutitë e zgjedhjes në cilësimet e formës së widget-it.

// Forma e widget (për backend)
forma e funksionit publik (shembulli $) {

// Vendosni parazgjedhur widget
$ defaults = grup (
'titulli' => '',
'tekst' => '',
'textarea' => '',
'checkbox' => '',
'zgjidhni' => '',
);

// Parse cilësimet aktuale me parazgjedhje
ekstrakt (wp_parse_args ((grupi) $ shembull, $ paravendosur)); ?>


/>

Ky kod thjesht është duke shtuar 5 fusha në widget (Titulli, teksti, teksti, zgjedhja dhe kutia e zgjedhjes). Kështu që së pari të përcaktoni standardet e paracaktuar për widget-in tuaj, atëherë funksioni tjetër zbërthen cilësimet aktuale të përcaktuara / ruajtura për widget-in tuaj me parazgjedhjet (kështu që çdo cilësim që nuk ekziston do të kthehej në parazgjedhje, si kur filloni të shtoni një widget në shirita anësor). Dhe e fundit është html për secilën fushë. Vini re përdorimin e esc_attr () kur shtoni fushat e formularit, kjo bëhet për arsye sigurie. Kurdoherë që bëni jehonë një ndryshore të përcaktuar nga përdoruesi në faqen tuaj, duhet të siguroheni që ajo është sanifikuar së pari.

3 - Funksioni i azhurnimit ()

Funksioni i azhurnimit () është me të vërtetë i thjeshtë. Ndërsa zhvilluesit thelbësorë të WordPress shtuan një API me vërtetësi të fuqishme, vetëm duhet të shtojmë këtë kod për të azhurnuar çdo fushë:

// Përditësoni cilësimet e widget
azhurnimi i funksionit publik ($ new_instance, $ old_instance) {
$ shembull = $ old_instance;
$ shembull ['titulli'] = emetim ($ new_instance ['titulli'])? wp_strip_all_tags ($ new_instance ['titulli']): '';
$ shembull ['text'] = emetim ($ new_instance ['tekst'])? wp_strip_all_tags ($ new_instance ['tekst']): '';
$ shembull ['textarea'] = emetim ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ shembull ['kutia e kontrollit'] = emetimi ($ new_instance ['kutia e kontrollit'])? 1: false;
$ shembull ['zgjidhni'] = emetim ($ new_instance ['zgjidhni'])? wp_strip_all_tags ($ new_instance ['zgjidhni']): '';
kthimi i shembullit $;
}

Siç mund ta shihni gjithçka që duhet të bëjmë është të kontrolloni për secilën cilësim dhe nëse nuk është bosh, ruani në bazën e të dhënave. Vini re përdorimin e funksioneve wp_strip_all_tags () dhe wp_kses_post (), këto janë përdorur për të sanitizuar të dhënat para se të shtohen në bazën e të dhënave. Kurdoherë që po futni çdo përdorues të paraqitur përmbajtje në një bazë të dhënash, duhet të siguroheni që ai nuk ka ndonjë kod me qëllim të keq. Funksioni i parë wp_strip_all_tags heq gjithçka, përveç tekstit themelor, në mënyrë që të mund ta përdorni për çdo fushë ku vlera përfundimtare është një varg dhe funksioni i dytë wp_kses_post () është i njëjti funksion i përdorur për përmbajtjen e postimit dhe heq të gjitha etiketat përveç html themelore si lidhjet , hapësira, diva, imazhe, etj.

4 - Funksioni widget ()

Funksioni widget () është ai që do të nxjerrë përmbajtjen në faqen e internetit. Whatshtë ajo që vizitorët tuaj do të shohin. Ky funksion mund të personalizohet për të përfshirë klasat CSS dhe etiketat specifike që përputhen në mënyrë të përsosur me ekranin tuaj të temës. Këtu është kodi (ju lutem jo që ky kod mund të modifikohet lehtë për t'iu përshtatur nevojave tuaja):

// Afishoni widget
widget e funksionit publik ($ argumenton, shembulli $) {

ekstrakt ($ argument);

// Kontrolloni opsionet e widget
$ titulli = emetim (shembulli $ ['titulli'])? اعمال_filtra ('widget_title', $ shembull ['titulli']): '';
$ teksti = emetim (shembulli $ ['teksti]])? $ shembull ['teksti]]:' ';
$ textarea = emetim ($ shembull ['textarea'])? $ shembull ['textarea']: '';
$ select = emetim ($ shembull ['zgjedh'])? $ shembull ['zgjidhni']: '';
$ kutia =! bosh ($ shembull ['kutia e kontrollit'])? $ shembull ['kutia e kontrollit']: false;

// Bërthama e WordPress thelbësore para lidhjes (gjithmonë përfshini)
jehonë $ para_widget;

// Afishoni widget
jehonë '
'; // Afishoni titullin widget nëse përcaktohet nëse (titulli $) { jehonë $ para_title. titulli $ $ After_title; } // Shfaqni fushën e tekstit nëse (teksti $) { jehonë '

' teksti $ '

'; } // Shfaq fushën e textarea nëse ($ textarea) { jehonë '

' $ textarea. '

'; } // Shfaq fushën e zgjedhjes nëse (zgjedhni $) { jehonë '

' $ zgjidhni '

'; } // Shfaq diçka nëse kutia e zgjedhjes është e vërtetë nëse (kutia e kontrollit $) { jehonë '

Diqka e mrekullueshme

'; } jehonë '
'; // goditje thelbësore e WordPress-it (lidhja gjithnjë) jehonë $ after_widget; }

Ky kod nuk është kompleks, gjithçka që duhet të mbani mend është të kontrolloni nëse është vendosur një ndryshore, nëse nuk e bëni dhe nëse doni ta shtypni atë, do të merrni një mesazh gabimi.

Kodi i Plotë i Plotës së Vegëlve

Tani nëse e keni ndjekur saktë shtojcën tuaj tani duhet të jetë plotësisht funksionale dhe mund ta përshtatni për t'iu përshtatur nevojave tuaja. Nëse nuk keni ndjekur udhëzuesin ose nuk doni të kontrolloni dyfish kodin, mund të vizitoni faqen Github për të parë kodin e plotë.

Shikoni Kodin e plotë në Github

përfundim

Ne pamë që krijimi i një widget brenda një shtojce është shumë interesante, tani duhet të dini se si të krijoni një shtojcë të thjeshtë që përmban një widget me lloje të ndryshme fushash dhe keni mësuar se si të shkoni pak më tej duke përdorur teknika të përparuara për të rregulluar widget. Urime, keni bërë një punë të mahnitshme!

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