Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Oprettelse af blok-plugins til WordPress med Node.js


Oprettelse af blok-plugins til WordPress med Node.js


For at oprette blok-plugins til WordPress ved hjælp af Node.js, følg disse trin:

1. Installer Node.js og npm:
- Sørg for, at du har Node.js installeret på din maskine. Hvis ikke, download og installer det fra det officielle Node.js-websted[1][2].

2. Opsæt et startblok-plugin:
- Naviger til mappen `wp-content/plugins` for din lokale udviklingsinstallation. Kør derefter kommandoen `npx @wordpress/create-block` for at stilladsere et blok-plugin. Denne kommando genererer al den nødvendige kode for at starte et projekt og integrerer en moderne JavaScript build-opsætning uden konfiguration påkrævet[3][4].

3. Konfigurer Block Plugin:
- Kommandoen `create-block` beder dig om input trin for trin. Du kan også bruge hurtig starttilstand til at videregive specifikke muligheder direkte på kommandolinjen, hvilket eliminerer behovet for interaktive prompter[4].

4. Byg og kør blok-plugin'et:
- Kør `npm start` for at starte en udviklingsserver og genopbygg automatisk blokken, hver gang der opdages en kodeændring. Når du er klar til at implementere din blok, skal du bruge `npm run build` til at optimere din kode og gøre den produktionsklar[4].

5. Integrer med WordPress:
- Aktiver det genererede plugin i WordPress. Dette vil gøre blokken tilgængelig i Editoren[4].

6. Tilpas og udvid blokken:
- Rediger boilerplate-koden for at tilpasse og udvide blokken efter behov. Dette involverer brug af moderne JavaScript (ESNext og JSX) og udnyttelse af `wp-scripts`-pakken til build- og linting-opgaver[4].

Ved at følge disse trin kan du oprette og administrere brugerdefinerede blok-plugins til WordPress ved hjælp af Node.js og `@wordpress/create-block`-pakken.

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