Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Blokkbővítmények létrehozása a WordPresshez a Node.js segítségével


Blokkbővítmények létrehozása a WordPresshez a Node.js segítségével


Ha Node.js használatával blokkbővítményeket szeretne létrehozni a WordPresshez, kövesse az alábbi lépéseket:

1. Telepítse a Node.js és az npm fájlt:
- Győződjön meg arról, hogy a Node.js telepítve van a gépén. Ha nem, töltse le és telepítse a hivatalos Node.js webhelyről[1][2].

2. Indítóblokk beépülő modul beállítása:
- Keresse meg a helyi fejlesztési telepítés `wp-content/plugins' könyvtárát. Ezután futtassa az `npx @wordpress/create-block` parancsot egy blokk-bővítmény felépítéséhez. Ez a parancs előállítja a projekt indításához szükséges összes kódot, és integrálja a modern JavaScript build-beállítást, konfiguráció nélkül[3][4].

3. A Block Plugin konfigurálása:
- A `create-block` parancs lépésről lépésre kéri a bemeneteket. A gyorsindítási módot arra is használhatja, hogy bizonyos beállításokat közvetlenül a parancssorban adjon át, így nincs szükség interaktív promptokra[4].

4. A Block Plugin összeállítása és futtatása:
- Futtassa az `npm start' parancsot a fejlesztői kiszolgáló elindításához, és automatikusan újraépíti a blokkot, amikor bármilyen kódváltozást észlel. Ha készen áll a blokk üzembe helyezésére, használja az "npm run build" parancsot a kód optimalizálásához, és gyártásra készsé tételéhez[4].

5. Integráció a WordPress-szel:
- Aktiválja a generált beépülő modult a WordPressben. Ezzel elérhetővé teszi a blokkot a Szerkesztőben[4].

6. A blokk testreszabása és kiterjesztése:
- Módosítsa a kazánkódot a blokk testreszabásához és szükség szerinti bővítéséhez. Ez magában foglalja a modern JavaScript (ESNext és JSX) használatát, valamint a `wp-scripts' csomag felhasználását az összeállítási és beillesztési feladatokhoz[4].

Ezeket a lépéseket követve egyéni blokkbővítményeket hozhat létre és kezelhet a WordPresshez a Node.js és a `@wordpress/create-block` csomag használatával.

Idézetek:
[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