Ako vytvoriť modul widget pre program WordPress

WordPress je úžasný systém na správu obsahu s množstvom skvelých funkcií, ako sú napríklad widgety. V tomto tutoriále vám vysvetlím, ako vytvoriť vlastné widgety v rámci malého doplnku. Tento príspevok pokryje niektoré ďalšie body, ktorým musíte porozumieť pred vytvorením samotného widgetu. Tu ideme!


Krok 1: Vytvorte svoj doplnok pre widgety

Nedávno som vytvoril doplnok s názvom „Freelancer Widgets Bundle“ a niektorí ľudia sa ma pýtali, ako vytvoriť takýto doplnok, a preto som sa rozhodol napísať tento príspevok. Prvým krokom je vytvorenie doplnku. A ako uvidíte, nie je to najťažšia časť. Doplnok je ďalší kód pridaný do WordPress, keď ho aktivujete. WordPress vytvorí v priečinku slučku na načítanie všetkých dostupných doplnkov a ich uvedenie v back office. Na vytvorenie doplnku budete potrebovať editor, ako napríklad Coda (Mac) alebo Dreamweaver (PC a Mac). Odporúčame vám, aby ste si doplnok vytvorili v miestnej inštalácii programu WordPress, takže ak ho urobíte na živom serveri, môže to spôsobiť nejaké problémy. Pred umiestnením vášho hostingu preto počkajte, až otestujete náš doplnok.

Teraz otvorte priečinok wp-content / plugins. Tu pridáte doplnok. Vytvorte nový adresár a nazvite ho „widget-plugin“ (v skutočnosti môže byť toto meno ľubovoľné). Aj keď náš doplnok bude mať iba jeden súbor, vždy je lepšie použiť priečinok pre každý doplnok. Vo svojom adresári vytvorte nový súbor s názvom „widget-plugin.php“ (tento názov sa dá tiež zmeniť) a otvorte ho. Teraz sa chystáme pridať prvé riadky kódu. Definícia doplnku pod WordPress sa riadi niektorými pravidlami, ktoré si môžete prečítať tu na codex. Takto definuje WordPress doplnok:

Preto musíme tento kód upraviť tak, aby vyhovoval našim potrebám:

Uložte súbor. Pridaním kódu iba do nášho súboru widget-plugin.php sme vytvorili doplnok! Nateraz tento doplnok nerobí nič, ale WordPress ho uznáva. Aby ste sa uistili, že to tak je, choďte na svoju správu a choďte do ponuky „Doplnky“. Ak sa váš doplnok objaví v zozname doplnkov, ste v poriadku, inak postupujte podľa mojich pokynov a skúste to znova. Teraz môžete doplnok aktivovať.

Krok 2: Vytvorte miniaplikáciu

Teraz vytvoríme samotný widget. Tento widget bude triedou PHP rozširujúcou základnú triedu WordPress WP_Widget. V zásade bude náš widget definovaný týmto spôsobom:

// Trieda widgetu
trieda My_Custom_Widget rozširuje WP_Widget {

// Hlavný konštruktér
verejná funkcia __construct () {
/ * ... * /
}

// Formulár widgetu (pre backend)
verejný funkčný formulár ($ instance) {
/ * ... * /
}

// Aktualizujte nastavenia miniaplikácie
aktualizácia verejných funkcií ($ new_instance, $ old_instance) {
/ * ... * /
}

// Zobrazenie miniaplikácie
widget na verejné funkcie ($ args, $ instance) {
/ * ... * /
}

}

// Zaregistrujte widget
function my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Tento kód poskytuje WordPress všetky informácie, ktoré systém potrebuje, aby mohol používať widget:

  1. staviteľ, na spustenie miniaplikácie
  2.  funkcia form () na vytvorenie formulára widgetu v administrácii
  3. funkcia update (), na uloženie údajov miniaplikácií počas vydania
  4. funkcia widgetu () na zobrazenie obsahu miniaplikácie na klientskom rozhraní

1 - Konštruktor

Konštruktor je časť kódu, ktorá definuje názov widgetu a hlavné argumenty, nižšie je príklad toho, ako môže vyzerať.

// Hlavný konštruktér
verejná funkcia __construct () {
materská :: __ konštrukt (
'My_custom_widget',
__ („Moja vlastná miniaplikácia“, „text_doména“),
pole (
'customize_selective_refresh' => true,
)
);
}

Prosím, nepoužívajte __ () okolo názvu widgetu, túto funkciu používa WordPress na preklad. Naozaj vám odporúčam vždy používať tieto funkcie, aby bola vaša téma plne preložiteľná. Použitie parametra „customize_selective_refresh“ umožňuje aktualizáciu miniaplikácie Vzhľad> Prispôsobiť pri úprave widgetu, takže namiesto obnovovania celej stránky sa pri vykonávaní zmien aktualizuje iba widget.

2 - Funkcia formulára ()

Táto funkcia je funkcia, ktorá vytvára nastavenia formulára miniaplikácií v administračnej oblasti WordPress (buď v časti Vzhľad> Widgety alebo Vzhľad> Prispôsobiť> Miniaplikácie). Takto zadáte svoje údaje, ktoré sa majú zobraziť na webe. Vysvetlím vám, ako môžete do nastavení formulára widgetu pridať textové polia, textové oblasti, začiarkavacie políčka a políčka.

// Formulár widgetu (pre backend)
verejný funkčný formulár ($ instance) {

// Nastaviť predvolené nastavenia miniaplikácie
$ default = array (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// Analyzuje aktuálne nastavenia s predvolenými hodnotami
extrakt (wp_parse_args ((array) $ instance, $ default)); ?>


/>

Tento kód jednoducho pridáva do miniaplikácie 5 polí (Názov, text, textarea, začiarkavacie políčko). Takže najskôr definujte predvolené hodnoty pre váš widget, potom ďalšia funkcia analyzuje aktuálne nastavenia definované / uložené pre váš widget s predvolenými hodnotami (takže všetky neexistujúce nastavenia by sa vrátili k predvoleným hodnotám, napríklad keď prvýkrát pridáte widget do váš bočný panel). A posledný je html pre každé pole. Všimnite si použitie esc_attr () pri pridávaní polí formulára, je to z bezpečnostných dôvodov. Vždy, keď na svojom webe zopakujete premennú definovanú používateľom, mali by ste sa uistiť, že je prvá sanitovaná.

3 - Funkcia aktualizácie ()

Funkcia update () je skutočne jednoduchá. Keďže vývojári jadra WordPress pridali skutočne výkonné API pre widgety, tento kód potrebujeme iba na aktualizáciu každého poľa:

// Aktualizujte nastavenia miniaplikácie
aktualizácia verejných funkcií ($ new_instance, $ old_instance) {
$ instance = $ old_instance;
$ instance ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instance ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instance ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: nepravdivé;
$ instance ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['select']): '';
return $ instance;
}

Ako vidíte, všetko, čo musíte urobiť, je skontrolovať každé nastavenie a ak nie je prázdne, uložte ho do databázy. Všimnite si použitie funkcií wp_strip_all_tags () a wp_kses_post (), ktoré slúžia na dezinfekciu údajov pred ich pridaním do databázy. Vždy, keď do databázy vkladáte ŽIADNE užívateľské obsahy, musíte sa uistiť, že neobsahuje škodlivý kód. Prvá funkcia wp_strip_all_tags odstráni všetko okrem základného textu, takže ju môžete použiť pre všetky polia, kde koncová hodnota je reťazec a druhá funkcia wp_kses_post () je rovnaká funkcia použitá pre obsah príspevku a odstráni všetky značky okrem základných html podobných odkazov. , rozpätia, delenia, obrázky atď.

4 - Funkcia widgetu ()

Funkcia widget () je funkcia, ktorá vyprodukuje obsah na webe. To budú vidieť vaši návštevníci. Túto funkciu je možné prispôsobiť tak, aby zahŕňala triedy CSS a konkrétne značky, ktoré dokonale ladia so zobrazením témy. Tu je kód (prosím, nie tento kód môže byť ľahko upravený, aby vyhovoval vašim potrebám):

// Zobrazenie miniaplikácie
widget na verejné funkcie ($ args, $ instance) {

extrakt ($ args);

// Skontrolujte možnosti miniaplikácie
$ title = isset ($ instance ['title'])? apply_filters ('widget_title', $ instance ['title']): '';
$ text = isset ($ instance ['text'])? $ instance ['text']: '';
$ textarea = isset ($ instance ['textarea'])? $ instance ['textarea']: '';
$ select = isset ($ instance ['select'])? $ instance ['select']: '';
$ checkbox =! prázdne ($ instance ['checkbox']))? $ instance ['checkbox']: false;

// Háčik jadra WordPress before_widget (vždy zahrnúť)
echo $ before_widget;

// Zobrazenie miniaplikácie
ozvena
,; // Zobrazí názov widgetu, ak je definovaný if ($ title) { echo $ before_title. $ title. $ After_title; } // Zobraziť textové pole if ($ text) { ozvena

'. $ text. '

,; } // Zobraziť textové pole if ($ textarea) { ozvena

'. $ textarea. '

,; } // Zobraziť pole výberu ak ($ ​​select) { ozvena

'. $ select. '

,; } // Ak je políčko začiarknuté, zobrazí sa niečo if ($ checkbox) { ozvena

Niečo úžasné

,; } ozvena
,; // Háčik jadra WordPress after_widget (vždy zahrnúť) echo $ after_widget; }

Tento kód nie je zložitý. Všetko, čo si musíte zapamätať, je skontrolovať, či je nastavená premenná, či ju nemáte a či ju chcete vytlačiť, zobrazí sa chybová správa.

Úplný kód doplnku pre widgety

Teraz, ak ste postupovali správne, váš doplnok by teraz mal byť plne funkčný a môžete si ho prispôsobiť podľa svojich potrieb. Ak ste sa neriadili týmto sprievodcom alebo ak si neprajete skontrolovať kód, môžete navštíviť stránku Github a pozrieť si celý kód.

Zobraziť celý kód v službe Github

záver

Videli sme, že vytvorenie widgetu vo vnútri doplnku je veľmi zaujímavé, teraz musíte vedieť, ako vytvoriť jednoduchý doplnok obsahujúci widget s rôznymi typmi polí, a naučili ste sa, ako ísť ďalej, pomocou pokročilých techník na prispôsobenie widgetu. Gratulujeme, odviedli ste úžasnú prácu!

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