Hogyan készítsünk egy widget-bővítményt a WordPress-hez

A WordPress egy csodálatos tartalomkezelő rendszer, amely számos nagyszerű funkcióval rendelkezik, például kütyü. Ebben az oktatóanyagban elmagyarázom, hogyan hozhat létre saját widgeteket egy kis bővítményen belül. Ez a bejegyzés néhány további pontot tartalmaz, amelyeket meg kell értenie, mielőtt maga létrehozza a modult. Essünk neki!


1. lépés: Hozza létre a Widget-plugin-ot

Nemrég készítettem egy „Freelancer Widgets Bundle” nevű plugint, és néhányan azt kérdezték tőlem, hogyan hozhatok létre egy ilyen plugint, ezért úgy döntöttem, hogy megírom ezt a bejegyzést. Az első lépés a plugin létrehozása. És amint látni fogja, ez nem a legnehezebb. A bővítmény extra kódot ad a WordPress-hez, miután aktiválta azt. A WordPress hurkot hoz létre egy mappán keresztül, hogy lekérje az összes rendelkezésre álló plugint és felsorolja azokat a hátsó irodában. A bővítmény létrehozásához olyan szerkesztőre van szüksége, mint például a Coda (Mac) vagy a Dreamweaver (PC és Mac). Azt javaslom, hogy hozzon létre a bővítményt a WordPress helyi telepítésében, ha az élő kiszolgálón elkészíti, akkor hibákat okozhat. Tehát kérjük, várjon, mielőtt kipróbálná a plugin-t, mielőtt elhelyezi a tárhelyét.

Most nyissa meg a wp-content / plugins mappát. Itt fogja hozzáadni a bővítményt. Hozzon létre egy új könyvtárat, és nevezze „widget-plugin-nek” (valójában ez a név bármilyen lehet, amit akar). Még akkor is, ha a bővítménynek csak egy fájlja lesz, mindig jobb, ha minden egyes bővítményhez használ egy mappát. Hozzon létre egy könyvtárat egy új, “widget-plugin.php” nevű fájlba (ez a név is megváltoztatható), és nyissa meg. Most kezdjük hozzá a kód első sorát. A beépülő modul meghatározása a WordPress alatt néhány elolvasható szabályt követ itt a kódexben. A WordPress a következőképpen határozza meg a bővítményt:

Tehát módosítanunk kell ezt a kódot, hogy az megfeleljen igényeinknek:

Mentse el a fájlt. Kód hozzáadásával a widget-plugin.php fájlhoz csak egy plugint hoztunk létre! Nos, egyelőre a plugin nem tesz semmit, de a WordPress felismeri. Annak biztosítása érdekében, hogy ez így van, keresse fel az adminisztrációt, és lépjen a „Plugins” menübe. Ha a plugin megjelenik a pluginek listájában, akkor jó vagy, ellenkező esetben ügyeljen arra, hogy kövesse az utasításokat, és próbálja újra. Most már aktiválhatja a plugint.

2. lépés: Készítse el a modult

Most magát a widget fogjuk létrehozni. Ez a widget egy PHP osztály lesz, amely kiterjeszti az alap WordPress osztályt WP_Widget. A widget alapvetően így kerül meghatározásra:

// A widget osztály
A My_Custom_Widget osztály kiterjeszti a WP_Widget {

// Főépítő
közfunkció __construct () {
/ * ... * /
}

// A widget képernyő (a háttérprogramhoz)
nyilvános funkciós forma ($ példány) {
/ * ... * /
}

// Frissítse a widget beállításait
nyilvános funkció frissítése ($ new_instance, $ old_instance) {
/ * ... * /
}

// A widget megjelenítése
nyilvános funkció widget ($ args, $ példány) {
/ * ... * /
}

}

// Regisztrálja a modult
működés my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Ez a kód a WordPress-hez ad minden információt, amelyre a rendszernek képesnek kell lennie a widget használatához:

  1. Az konstruktőr, a widget elindításához
  2. Az form () függvény a widget űrlap létrehozásához az adminisztrációban
  3. Az frissítés () funkció, a widget-adatok mentése a kiadás során
  4. És a widget () függvény a widget tartalmának megjelenítéséhez a kezelőfelületen

1 - A kivitelező

A kivitelező a kód része, amely meghatározza a widget nevét és a fő argumentumokat. Az alábbiakban egy példa arra, hogy hogyan néz ki.

// Főépítő
közfunkció __construct () {
parent :: __ construct (
'My_custom_widget',
__ ('Saját egyéni widget', 'text_domain'),
sor(
'customize_selective_refresh' => igaz,
)
);
}

Kérjük, ne használja a __ () elemet a widget neve körül, ezt a funkciót a WordPress használja a fordításhoz. Nagyon ajánlom, hogy mindig használja ezeket a funkciókat, hogy a témája teljesen lefordítható legyen. Az 'customize_selective_refresh' paraméter használata lehetővé teszi a widget frissítését az alábbiakban Megjelenés> Testreszabás a widget szerkesztésekor, tehát az egész oldal frissítése helyett a modul módosításakor csak a widget frissül.

2 - A form () függvény

Ez a funkció hozza létre a widget űrlap beállításait a WordPress adminisztrátori területen (Megjelenés> Widgetek vagy Megjelenés> Testreszabás> Widgetek). Ebben az esetben adja meg adatait, hogy megjelenjenek a webhelyen. Ezért elmagyarázom, hogyan lehet szöveges mezőket, szöveges területeket, jelölőnégyzeteket és jelölőnégyzeteket hozzáadni a widget űrlapbeállításához.

// A widget képernyő (a háttérprogramhoz)
nyilvános funkciós forma ($ példány) {

// A widget alapértelmezett értékeinek beállítása
$ defaults = tömb (
'title' => '',
'text' => '',
'textarea' => '',
'jelölőnégyzet' => '',
'Select' => '',
);

// Az aktuális beállítások elemzése alapértelmezés szerint
kivonat (wp_parse_args ((tömb) $ példány, $ alapértelmezések)); ?>


/>

Ez a kód egyszerűen 5 mezőt ad hozzá a widgethez (cím, szöveg, szövegterület, kiválasztás és jelölőnégyzet). Tehát először meg kell határoznia a widget alapértelmezéseit, majd a következő függvény elemzi a widget számára definiált / elmentett aktuális beállításokat az alapértelmezésekkel (így a nem létező beállítások visszatérnek az alapértelmezéshez, mint amikor először hozzáad egy widget oldalsáv). És utoljára az egyes mezők htmlje. Vegye figyelembe az esc_attr () használatát az űrlapmezők hozzáadásakor, ez biztonsági okokból történik. Amikor visszatükrözik egy felhasználó által definiált változót a webhelyén, győződjön meg arról, hogy először fertőtlenítette.

3 - A frissítés () funkció

A frissítés () funkció nagyon egyszerű. Mivel a WordPress központi fejlesztői hozzáadtak egy igazán nagy teljesítményű kütyü API-t, csak az egyes mezők frissítéséhez kell hozzáadnunk ezt a kódot:

// Frissítse a widget beállításait
nyilvános funkció frissítése ($ new_instance, $ old_instance) {
$ példány = $ old_instance;
$ példány ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ példány ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ példány ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: hamis;
$ példány ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['válassza']): '';
visszatér $ példány;
}

Amint láthatja, csak annyit kell tennünk, hogy ellenőrizze az egyes beállításokat, és ha nem üres, akkor mentse az adatbázisba. Figyelem: a wp_strip_all_tags () és wp_kses_post () függvények használata, ezek az adatok megtisztítására szolgálnak, még mielőtt hozzáadnák azokat az adatbázishoz. Amikor bármilyen felhasználó által benyújtott tartalmat beilleszt egy adatbázisba, ellenőriznie kell, hogy nincs-e rosszindulatú kódja. Az első wp_strip_all_tags függvény az alapszöveg kivételével mindent eltávolít, így bármilyen mezőben felhasználható, ahol a végérték egy karakterlánc, a második függvény pedig a wp_kses_post (), amely ugyanazt a funkciót használja, mint a postai tartalom, és eltávolítja az összes címkét, kivéve az alapvető html-t, például linkeket. , oszlopok, osztások, képek stb.

4 - A widget () funkció

A widget () funkció az, amely kiadja a weboldal tartalmát. A látogatók ezt látják. Ez a funkció testreszabható, hogy tartalmazzon CSS osztályokat és speciális címkéket, hogy azok tökéletesen megfeleljenek a téma megjelenítésének. Itt van a kód (kérjük, nehogy ezt a kódot könnyen módosíthassa az Ön igényei szerint):

// A widget megjelenítése
nyilvános funkció widget ($ args, $ példány) {

kivonat ($ args);

// Ellenőrizze a widget beállításait
$ title = isset ($ példány ['title'])? apply_filters ('widget_title', $ példány ['cím']): '';
$ text = isset ($ példány ['text'])? $ példány ['text']: '';
$ textarea = isset ($ példány ['textarea'])? $ példány ['textarea']: '';
$ select = isset ($ példány ['select'])? $ példány ['válassza']: '';
$ jelölőnégyzet =! üres ($ példány ['jelölőnégyzet'])? $ példány ['jelölőnégyzet']: hamis;

// WordPress mag ennen_widget horog (mindig tartalmazza)
echo $ before_widget;

// A widget megjelenítése
visszhang ”
„ // A widget címe, ha definiálva van if ($ cím) { echo $ before_title. $ cím. $ After_title; } // A szövegmező megjelenítése if ($ szöveg) { visszhang ”

” $ szöveg. '

„ } // A textarea mező megjelenítése if ($ textarea) { visszhang ”

” $ textarea. '

„ } // Megjeleníti a kiválasztott mezőt if ($ select) { visszhang ”

” $ select. '

„ } // Mutasson valamit, ha a jelölőnégyzet igaz if ($ jelölőnégyzet) { visszhang ”

Valami félelmetes

„ } visszhang ”
„ // WordPress mag after_widget horog (mindig tartalmazza) echo $ after_widget; }

Ez a kód nem bonyolult, csak annyit kell tartania, hogy ellenőrizze, hogy van-e beállítva egy változó, ha nem, és ha ki akarja nyomtatni, akkor hibaüzenetet fog kapni..

A teljes modul modult

Ha most helyesen követi, akkor a pluginnek teljes mértékben működőképesnek kell lennie, és testreszabhatja azt az igényeinek megfelelően. Ha még nem követte az útmutatót, vagy meg akarja ellenőrizni a kódot, akkor a teljes kód megtekintéséhez keresse fel a Github oldalt.

Tekintse meg a teljes kódot a Githubon

Következtetés

Láttuk, hogy egy modulon belül egy widget létrehozása nagyon érdekes, most már tudnia kell, hogyan kell létrehozni egy egyszerű bővítményt, amely különféle mezőtípusú widget tartalmaz, és megtanulta, hogyan kell tovább menni fejlett technikákkal a widget testreszabásához. Gratulálok, csodálatos munkát végzett!

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