Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Node.js로 WordPress용 블록 플러그인 만들기


Node.js로 WordPress용 블록 플러그인 만들기


Node.js를 사용하여 WordPress용 블록 플러그인을 만들려면 다음 단계를 따르세요.

1. Node.js 및 npm 설치:
- 컴퓨터에 Node.js가 설치되어 있는지 확인하세요. 그렇지 않은 경우 공식 Node.js 웹사이트[1][2]에서 다운로드하여 설치하세요.

2. 스타터 블록 플러그인 설정:
- 로컬 개발 설치의 `wp-content/plugins` 디렉토리로 이동합니다. 그런 다음 `npx @wordpress/create-block` 명령을 실행하여 블록 플러그인을 스캐폴드합니다. 이 명령은 프로젝트를 시작하는 데 필요한 모든 코드를 생성하고 구성이 필요하지 않은 최신 JavaScript 빌드 설정을 통합합니다[3][4].

3. 블록 플러그인 구성:
- `create-block` 명령을 사용하면 단계별로 입력하라는 메시지가 표시됩니다. 또한 빠른 시작 모드를 사용하여 명령줄에서 특정 옵션을 직접 전달할 수 있으므로 대화형 프롬프트[4]가 필요하지 않습니다.

4. 블록 플러그인 빌드 및 실행:
- 'npm start'를 실행하여 개발 서버를 시작하고 코드 변경이 감지될 때마다 자동으로 블록을 다시 빌드합니다. 블록을 배포할 준비가 되면 `npm run build`를 사용하여 코드를 최적화하고 프로덕션 준비가 되도록 만드세요[4].

5. WordPress와 통합:
- WordPress에서 생성된 플러그인을 활성화합니다. 그러면 편집기[4]에서 블록을 사용할 수 있게 됩니다.

6. 블록 사용자 정의 및 확장:
- 상용구 코드를 수정하여 필요에 따라 블록을 사용자 정의하고 확장합니다. 여기에는 최신 JavaScript(ESNext 및 JSX)를 사용하고 빌드 및 Linting 작업을 위해 `wp-scripts` 패키지를 활용하는 것이 포함됩니다[4].

다음 단계를 따르면 Node.js 및 `@wordpress/create-block` 패키지를 사용하여 WordPress용 사용자 정의 블록 플러그인을 생성하고 관리할 수 있습니다.

인용:
[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