Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon WordPressi plokkpluginate loomine Node.js-iga


WordPressi plokkpluginate loomine Node.js-iga


WordPressi jaoks plokkpluginate loomiseks Node.js-i abil toimige järgmiselt.

1. Installige Node.js ja npm:
- Veenduge, et teie arvutisse oleks installitud Node.js. Kui ei, laadige see alla ja installige see ametlikult Node.js veebisaidilt[1][2].

2. Starter Blocki pistikprogrammi seadistamine:
- Liikuge oma kohaliku arendusinstalli kataloogi "wp-content/plugins". Seejärel käivitage ploki pistikprogrammi loomiseks käsk "npx @wordpress/create-block". See käsk genereerib kogu projekti käivitamiseks vajaliku koodi ja integreerib kaasaegse JavaScripti järgu seadistuse ilma konfiguratsioonita[3][4].

3. Konfigureerige Block Plugin:
- Käsk "create-block" küsib teilt samm-sammult sisestusi. Kiirkäivitusrežiimi saate kasutada ka konkreetsete valikute edastamiseks otse käsureal, välistades vajaduse interaktiivsete viipade järele[4].

4. Ehitage ja käivitage Block Plugin:
- Käivitage `npm start', et käivitada arendusserver ja luua plokk automaatselt uuesti, kui tuvastatakse mis tahes koodimuudatus. Kui olete oma ploki juurutamiseks valmis, kasutage koodi optimeerimiseks ja tootmisvalmis[4] funktsiooni „npm run build”.

5. Integreerige WordPressiga:
- Aktiveerige WordPressis loodud pistikprogramm. See muudab ploki redaktoris kättesaadavaks[4].

6. Kohandage ja laiendage plokki:
- Muutke katlakoodi, et kohandada ja laiendada plokki vastavalt vajadusele. See hõlmab moodsa JavaScripti (ESNext ja JSX) kasutamist ning paketi `wp-scripts` ärakasutamist koostamis- ja lintimisülesannete jaoks[4].

Järgides neid samme, saate luua ja hallata WordPressi jaoks kohandatud plokkpluginaid, kasutades Node.js-i ja paketti „@wordpress/create-block”.

Tsitaadid:
[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