Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Vytváření blokových pluginů pro WordPress pomocí Node.js


Vytváření blokových pluginů pro WordPress pomocí Node.js


Chcete-li vytvořit blokové pluginy pro WordPress pomocí Node.js, postupujte takto:

1. Nainstalujte Node.js a npm:
- Ujistěte se, že máte na svém počítači nainstalovaný Node.js. Pokud ne, stáhněte si jej a nainstalujte z oficiálního webu Node.js[1][2].

2. Nastavte plugin Starter Block:
- Přejděte do adresáře `wp-content/plugins` vaší místní vývojové instalace. Poté spusťte příkaz `npx @wordpress/create-block` a vytvořte blokový plugin. Tento příkaz vygeneruje veškerý potřebný kód pro spuštění projektu a integruje moderní nastavení sestavení JavaScriptu bez nutnosti konfigurace[3][4].

3. Nakonfigurujte modul Block Plugin:
- Příkaz `create-block` vás vyzve k zadání vstupů krok za krokem. Můžete také použít režim rychlého spuštění k předání konkrétních voleb přímo v příkazovém řádku, čímž se eliminuje potřeba interaktivních výzev[4].

4. Sestavení a spuštění Block Plugin:
- Spusťte `npm start`, abyste spustili vývojový server a automaticky znovu vytvořili blok, kdykoli je zjištěna jakákoli změna kódu. Až budete připraveni nasadit svůj blok, použijte `npm run build` k optimalizaci kódu a připravte jej na produkci[4].

5. Integrace s WordPress:
- Aktivujte vygenerovaný plugin ve WordPressu. Tím se blok zpřístupní v Editoru[4].

6. Přizpůsobení a rozšíření bloku:
- Upravte standardní kód, abyste přizpůsobili a rozšířili blok podle potřeby. To zahrnuje použití moderního JavaScriptu (ESNext a JSX) a využití balíčku `wp-scripts` pro úlohy sestavení a linting[4].

Podle těchto kroků můžete vytvářet a spravovat vlastní blokovací pluginy pro WordPress pomocí Node.js a balíčku `@wordpress/create-block`.

Citace:
[1] https://wpdevelopment.courses/articles/wordpress-create-block/
[2] https://kinsta.com/courses/gutenberg-block-development/setting-up-a-block-plugin/
[3] https://www.npmjs.com/package/%40wordpress/create-block
[4] https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/
[5] https://www.youtube.com/watch?v=-aa4F4Dn9GY