Jak vytvořit Widget Plugin pro WordPress

WordPress je úžasný systém správy obsahu s mnoha skvělými funkcemi, jako jsou widgety. V tomto tutoriálu vám vysvětlím, jak vytvořit vlastní widgety v malém pluginu. Tento příspěvek pokryje některé další body, kterým musíte porozumět před vytvořením samotného widgetu. Tady jsme!


Krok 1: Vytvořte svůj Widget Plugin

Nedávno jsem vytvořil plugin s názvem „Freelancer Widgets Bundle“ a někteří lidé se mě ptali, jak takový plugin vytvořit, takže jsem se rozhodl napsat tento příspěvek. Prvním krokem je vytvoření pluginu. A jak uvidíte, není to ta nejtěžší část. Plugin je další kód přidaný do WordPress, jakmile jej aktivujete. WordPress vytvoří smyčku ve složce a načte všechny dostupné pluginy a zobrazí je v back office. Chcete-li vytvořit svůj plugin, budete potřebovat editor, jako je Coda (Mac) nebo Dreamweaver (PC a Mac). Doporučuji, abyste si vytvořili svůj plugin v místní instalaci WordPress, takže pokud ho uděláte na živém serveru, může to způsobit nějaké potíže. Před vložením hostingu tedy vyčkejte, až vyzkoušíte náš plugin.

Nyní otevřete složku wp-content / plugins. Zde přidáte svůj plugin. Vytvořte nový adresář a nazvejte jej „widget-plugin“ (ve skutečnosti může být toto jméno libovolné). I když náš plugin bude mít pouze jeden soubor, vždy je lepší použít složku pro každý plugin. Ve svém adresáři vytvořte nový soubor s názvem „widget-plugin.php“ (tento název lze také změnit) a otevřete jej. Nyní se chystáme přidat první řádky kódu. Definice pluginu pod WordPress se řídí některými pravidly, která si můžete přečíst tady na codexu. Takto definuje WordPress plugin:

Proto musíme tento kód upravit tak, aby vyhovoval našim potřebám:

Uložte soubor. Přidáním kódu do našeho souboru widget-plugin.php jsme vytvořili plugin! No, zatím plugin neudělá nic, ale WordPress to rozpozná. Chcete-li se ujistit, že tomu tak je, přejděte do administrace a přejděte do nabídky „Pluginy“. Pokud se váš plugin objeví v seznamu pluginů, jste v pořádku, jinak se ujistěte, že jste postupovali podle mých pokynů a zkuste to znovu. Nyní můžete plugin aktivovat.

Krok 2: Vytvořte widget

Nyní vytvoříme samotný widget. Tento widget bude třídou PHP rozšiřující základní třídu WordPress WP_Widget. V zásadě bude náš widget definován takto:

// Třída widgetu
třída My_Custom_Widget rozšiřuje WP_Widget {

// Hlavní konstruktér
veřejná funkce __construct () {
/ * ... * /
}

// Formulář widgetu (pro backend)
veřejný funkční formulář ($ instance) {
/ * ... * /
}

// Aktualizujte nastavení widgetu
aktualizace veřejných funkcí ($ new_instance, $ old_instance) {
/ * ... * /
}

// Zobrazení widgetu
widget veřejné funkce ($ 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šechny informace, které systém potřebuje, aby mohl používat widget:

  1. konstruktér, pro spuštění widgetu
  2.  funkce form () k vytvoření formuláře widgetu v administraci
  3. funkce update (), pro uložení dat widgetů během vydání
  4. funkce widgetu () pro zobrazení obsahu widgetu na front-endu

1 - Konstruktor

Konstruktor je část kódu, která definuje název widgetu a hlavní argumenty, níže je příklad toho, jak může vypadat.

// Hlavní konstruktér
veřejná funkce __construct () {
rodič :: __ konstrukt (
'my_custom_widget',
__ ('Moje vlastní Widget', 'text_domain'),
pole (
'customize_selective_refresh' => true,
)
);
}

Prosím nepoužívejte __ () kolem názvu widgetu, tuto funkci používá WordPress k překladu. Opravdu doporučuji, abyste vždy používali tyto funkce, aby bylo vaše téma plně přeložitelné. Použití parametru „customize_selective_refresh“ umožňuje, aby byl widget aktualizován Vzhled> Přizpůsobit při úpravě widgetu, takže místo aktualizace celé stránky se při provádění změn aktualizuje pouze widget.

2 - Funkce form ()

Tato funkce je ta, která vytváří nastavení formuláře widgetu v administrátorské oblasti WordPress (buď pod Vzhled> Widgety nebo Vzhled> Přizpůsobit> Widgety). To znamená, že zadáte svá data, která se mají zobrazit na webu. Vysvětlím vám tedy, jak do nastavení formuláře widgetu můžete přidat textová pole, textové oblasti, zaškrtávací políčka a zaškrtávací políčka.

// Formulář widgetu (pro backend)
veřejný funkční formulář ($ instance) {

// Nastavit výchozí nastavení widgetu
$ defaults = array (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// Analyzuje aktuální nastavení s výchozími hodnotami
extrakt (wp_parse_args ((array) $ instance, $ default)); ?>


/>

Tento kód jednoduše přidává do widgetu 5 polí (název, text, textarea, zaškrtávací políčko a zaškrtávací políčko). Nejprve tedy definujete výchozí hodnoty pro widget, pak další funkce analyzuje aktuální nastavení definovaná / uložená pro váš widget s výchozími nastaveními (takže všechna neexistující nastavení by se vrátila k výchozímu nastavení, jako například při prvním přidání widgetu do váš postranní panel). A poslední je html pro každé pole. Všimněte si použití esc_attr () při přidávání polí formuláře, je to z bezpečnostních důvodů. Kdykoli na svém webu odezníte uživatelem definovanou proměnnou, měli byste se ujistit, že je nejprve sanitována.

3 - Funkce aktualizace ()

Funkce update () je opravdu jednoduchá. Vzhledem k tomu, že vývojáři jádra WordPress přidali opravdu výkonné API pro widgety, stačí přidat tento kód a aktualizovat každé pole:

// Aktualizujte nastavení widgetu
aktualizace veřejných funkcí ($ 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: false;
$ instance ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['select']): '';
return $ instance;
}

Jak vidíte, vše, co musíme udělat, je zkontrolovat každé nastavení a pokud není prázdné, uložte je do databáze. Všimněte si použití funkcí wp_strip_all_tags () a wp_kses_post (), které slouží k dezinfekci dat před jejich přidáním do databáze. Kdykoli vkládáte ŽÁDNÝ uživatel odeslaný obsah do databáze, musíte se ujistit, že nemá škodlivý kód. První funkce wp_strip_all_tags odstraní vše kromě základního textu, takže ji můžete použít pro všechna pole, kde koncová hodnota je řetězec a druhá funkce wp_kses_post () je stejná funkce použitá pro obsah příspěvku a odebere všechny značky kromě základních html podobných odkazů , rozpětí, divs, obrázky atd.

4 - Funkce widgetu ()

Funkce widget () je ta, která vydá obsah na webu. To vaši návštěvníci uvidí. Tuto funkci lze přizpůsobit tak, aby zahrnovala třídy CSS a konkrétní značky, které dokonale ladí se zobrazením tématu. Zde je kód (ne prosím, že tento kód lze snadno upravit tak, aby vyhovoval vašim potřebám):

// Zobrazení widgetu
widget veřejné funkce ($ args, $ instance) {

extrakt ($ args);

// Zkontrolujte možnosti widgetu
$ 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ázdný ($ instance ['checkbox']))? $ instance ['checkbox']: false;

// Háček jádra WordPress before_widget (vždy zahrnout)
echo $ before_widget;

// Zobrazení widgetu
ozvěna
'; // Zobrazí název widgetu, pokud je definován if ($ title) { echo $ before_title. $ title. $ after_title; } // Zobrazit textové pole if ($ text) { ozvěna

'. $ text. '

'; } // Zobrazí textové pole if ($ textarea) { ozvěna

'. $ textarea. '

'; } // Zobrazit výběrové pole if ($ select) { ozvěna

'. $ select. '

'; } // Pokud je políčko zaškrtnuto, zobrazí se něco if ($ checkbox) { ozvěna

Něco úžasného

'; } ozvěna
'; // Háček jádra WordPress after_widget (vždy zahrnout) echo $ after_widget; }

Tento kód není složitý. Vše, co si musíte pamatovat, je zkontrolovat, zda je nastavena proměnná, pokud ji nemáte a chcete ji vytisknout, zobrazí se chybová zpráva.

Úplný kód pluginu pro widgety

Nyní, pokud jste postupovali správně, by měl být váš plugin nyní plně funkční a můžete jej přizpůsobit vašim potřebám. Pokud jste se tímto průvodcem neřídili nebo chcete kód znovu zkontrolovat, můžete na stránce Github zobrazit celý kód.

Zobrazit celý kód v Githubu

Závěr

Viděli jsme, že vytvoření widgetu uvnitř pluginu je velmi zajímavé, nyní musíte vědět, jak vytvořit jednoduchý plugin obsahující widget s různými typy polí, a naučili jste se, jak jít trochu dále, pomocí pokročilých technik k přizpůsobení widgetu. Blahopřejeme, udělali jste úžasnou práci!

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