Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Vytváranie blokových pluginov pre WordPress pomocou Node.js


Vytváranie blokových pluginov pre WordPress pomocou Node.js


Ak chcete vytvoriť blokové doplnky pre WordPress pomocou Node.js, postupujte takto:

1. Nainštalujte Node.js a npm:
- Uistite sa, že máte na svojom počítači nainštalovaný súbor Node.js. Ak nie, stiahnite si ho a nainštalujte z oficiálnej webovej stránky Node.js[1][2].

2. Nastavenie doplnku Starter Block:
- Prejdite do adresára `wp-content/plugins` vašej lokálnej vývojovej inštalácie. Potom spustite príkaz `npx @wordpress/create-block` na vytvorenie blokového doplnku. Tento príkaz vygeneruje všetok potrebný kód na spustenie projektu a integruje moderné nastavenie zostavy JavaScriptu bez potreby konfigurácie[3][4].

3. Nakonfigurujte modul Block Plugin:
- Príkaz `create-block` vás vyzve na zadanie krok za krokom. Môžete tiež použiť režim rýchleho spustenia na odovzdanie konkrétnych možností priamo v príkazovom riadku, čím sa eliminuje potreba interaktívnych výziev[4].

4. Vytvorte a spustite blokový doplnok:
- Spustite `npm start` na spustenie vývojového servera a automatické prebudovanie bloku vždy, keď sa zistí akákoľvek zmena kódu. Keď ste pripravení nasadiť svoj blok, použite `npm run build` na optimalizáciu kódu a pripravte ho na produkčnú prípravu[4].

5. Integrácia s WordPress:
- Aktivujte vygenerovaný doplnok vo WordPress. Tým sa blok sprístupní v Editore[4].

6. Prispôsobenie a rozšírenie bloku:
- Upravte štandardný kód na prispôsobenie a rozšírenie bloku podľa potreby. To zahŕňa použitie moderného JavaScriptu (ESNext a JSX) a využitie balíka `wp-scripts` pre úlohy zostavovania a lintingu[4].

Podľa týchto krokov môžete vytvárať a spravovať vlastné blokové doplnky pre WordPress pomocou Node.js a balíka `@wordpress/create-block`.

Citácie:
[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