Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Skapa blockplugins för WordPress med Node.js


Skapa blockplugins för WordPress med Node.js


Följ dessa steg för att skapa blockplugins för WordPress med Node.js:

1. Installera Node.js och npm:
- Se till att du har Node.js installerat på din dator. Om inte, ladda ner och installera den från den officiella Node.js-webbplatsen[1][2].

2. Konfigurera ett insticksprogram för startblock:
- Navigera till katalogen `wp-content/plugins` för din lokala utvecklingsinstallation. Kör sedan kommandot `npx @wordpress/create-block` för att bygga ett blockplugin. Det här kommandot genererar all nödvändig kod för att starta ett projekt och integrerar en modern JavaScript-uppbyggnad utan någon konfiguration krävs[3][4].

3. Konfigurera Block Plugin:
- Kommandot `create-block` uppmanar dig att skriva in steg-för-steg. Du kan också använda snabbstartsläget för att skicka specifika alternativ direkt på kommandoraden, vilket eliminerar behovet av interaktiva uppmaningar[4].

4. Bygg och kör Block Plugin:
- Kör `npm start` för att starta en utvecklingsserver och återskapa blocket automatiskt när en kodändring upptäcks. När du är redo att distribuera ditt block, använd `npm run build` för att optimera din kod och göra den produktionsklar[4].

5. Integrera med WordPress:
- Aktivera det genererade plugin-programmet i WordPress. Detta kommer att göra blocket tillgängligt i editorn[4].

6. Anpassa och utöka blocket:
- Ändra boilerplate-koden för att anpassa och utöka blocket efter behov. Detta innebär att man använder modern JavaScript (ESNext och JSX) och utnyttjar "wp-scripts"-paketet för bygg- och lintinguppgifter[4].

Genom att följa dessa steg kan du skapa och hantera anpassade blockplugins för WordPress med hjälp av Node.js och paketet `@wordpress/create-block`.

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