Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Ustvarjanje blokovnih vtičnikov za WordPress z Node.js


Ustvarjanje blokovnih vtičnikov za WordPress z Node.js


Če želite ustvariti blokovne vtičnike za WordPress z uporabo Node.js, sledite tem korakom:

1. Namestite Node.js in npm:
- Prepričajte se, da imate na vašem računalniku nameščen Node.js. Če ne, ga prenesite in namestite z uradne spletne strani Node.js[1][2].

2. Nastavite vtičnik za začetni blok:
- Pomaknite se do imenika `wp-content/plugins` vaše lokalne razvojne namestitve. Nato zaženite ukaz `npx @wordpress/create-block`, da ustvarite vtičnik za blok. Ta ukaz ustvari vso potrebno kodo za zagon projekta in integrira sodobno nastavitev gradnje JavaScript brez potrebne konfiguracije[3][4].

3. Konfigurirajte vtičnik Block Plugin:
- Ukaz `create-block` vas pozove k vnosom korak za korakom. Način hitrega zagona lahko uporabite tudi za posredovanje določenih možnosti neposredno v ukazni vrstici, s čimer odpravite potrebo po interaktivnih pozivih[4].

4. Izdelajte in zaženite vtičnik blokov:
- Zaženite `npm start`, da zaženete razvojni strežnik in samodejno znova zgradite blok vsakič, ko je zaznana kakršna koli sprememba kode. Ko ste pripravljeni na uvedbo svojega bloka, uporabite `npm run build`, da optimizirate svojo kodo in jo pripravite za proizvodnjo [4].

5. Integrirajte z WordPressom:
- Aktivirajte ustvarjeni vtičnik v WordPressu. S tem bo blok na voljo v urejevalniku[4].

6. Prilagodite in razširite blok:
- Spremenite kodo predloge, da prilagodite in razširite blok po potrebi. To vključuje uporabo sodobnega JavaScripta (ESNext in JSX) in uporabo paketa `wp-scripts` za naloge gradnje in lintinga [4].

Če sledite tem korakom, lahko ustvarite in upravljate vtičnike blokov po meri za WordPress z uporabo Node.js in paketa `@wordpress/create-block`.

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