Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Tworzenie wtyczek blokowych dla WordPressa za pomocą Node.js


Tworzenie wtyczek blokowych dla WordPressa za pomocą Node.js


Aby utworzyć wtyczki blokowe dla WordPressa przy użyciu Node.js, wykonaj następujące kroki:

1. Zainstaluj Node.js i npm:
- Upewnij się, że masz zainstalowany Node.js na swoim komputerze. Jeśli nie, pobierz i zainstaluj go z oficjalnej strony Node.js[1] [2].

2. Skonfiguruj wtyczkę bloku startowego:
- Przejdź do katalogu `wp-content/plugins` w lokalnej instalacji rozwojowej. Następnie uruchom polecenie `npx @wordpress/create-block`, aby utworzyć szkielet wtyczki blokującej. To polecenie generuje cały kod niezbędny do uruchomienia projektu i integruje nowoczesną konfigurację kompilacji JavaScript bez konieczności konfiguracji[3] [4].

3. Skonfiguruj wtyczkę blokującą:
- Komenda `create-block` monituje o wprowadzenie danych krok po kroku. Możesz także użyć trybu szybkiego startu, aby przekazać określone opcje bezpośrednio w wierszu poleceń, eliminując potrzebę interaktywnych podpowiedzi[4].

4. Skompiluj i uruchom wtyczkę blokującą:
- Uruchom `npm start`, aby uruchomić serwer programistyczny i automatycznie odbudować blok po wykryciu jakiejkolwiek zmiany w kodzie. Kiedy będziesz gotowy do wdrożenia bloku, użyj `npm run build`, aby zoptymalizować kod i przygotować go do produkcji[4].

5. Zintegruj z WordPress:
- Aktywuj wygenerowaną wtyczkę w WordPress. Spowoduje to udostępnienie bloku w Edytorze[4].

6. Dostosuj i rozszerz blok:
- Zmodyfikuj kod standardowy, aby dostosować i rozszerzyć blok w razie potrzeby. Wiąże się to z użyciem nowoczesnego JavaScript (ESNext i JSX) i wykorzystaniem pakietu `wp-scripts` do zadań kompilacji i lintingu[4].

Wykonując poniższe kroki, możesz tworzyć niestandardowe wtyczki blokowe dla WordPress i zarządzać nimi przy użyciu Node.js i pakietu `@wordpress/create-block`.

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