Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Створення блокових плагінів для WordPress за допомогою Node.js


Створення блокових плагінів для WordPress за допомогою Node.js


Щоб створити блокові плагіни для WordPress за допомогою Node.js, виконайте такі дії:

1. Встановіть Node.js і npm:
- Переконайтеся, що на вашій машині встановлено Node.js. Якщо ні, завантажте та встановіть його з офіційного веб-сайту Node.js[1][2].

2. Налаштуйте плагін Starter Block:
- Перейдіть до каталогу `wp-content/plugins` локальної інсталяції розробки. Потім запустіть команду `npx @wordpress/create-block`, щоб створювати плагін блоку. Ця команда генерує весь необхідний код для запуску проекту та інтегрує сучасні налаштування збірки JavaScript без необхідності налаштування[3][4].

3. Налаштуйте модуль блокування:
- Команда `create-block` пропонує вам ввести крок за кроком. Ви також можете використовувати режим швидкого запуску, щоб передати певні параметри безпосередньо в командному рядку, усуваючи потребу в інтерактивних підказках[4].

4. Створіть і запустіть плагін Block:
- Запустіть `npm start`, щоб запустити сервер розробки та автоматично перебудувати блок щоразу, коли буде виявлено будь-яку зміну коду. Коли ви будете готові розгорнути свій блок, скористайтеся `npm run build`, щоб оптимізувати свій код і зробити його готовим до виробництва[4].

5. Інтеграція з WordPress:
- Активуйте згенерований плагін у WordPress. Це зробить блок доступним у редакторі [4].

6. Налаштуйте та розширте блок:
- Змініть шаблонний код, щоб налаштувати та розширити блок за потреби. Це передбачає використання сучасного JavaScript (ESNext і JSX) і використання пакета `wp-scripts` для завдань побудови та linting [4].

Виконуючи ці кроки, ви можете створювати та керувати спеціальними плагінами блоків для WordPress за допомогою Node.js і пакета `@wordpress/create-block`.

цитати:
[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