Wordpress 블록 테마에 사용자 지정 블록 추가(플러그인을 사용하지 않음)

Wordpress 블록 테마에 사용자 지정 블록 추가(플러그인을 사용하지 않음)

기본적으로 저는 워드프레스 블록 테마를 개발하고 싶습니다.쉽게 사용자 지정할 수 있도록 테마에 사용자 지정 블록을 추가하고 싶습니다.그러나 이를 위한 플러그인은 생성하지 않습니다.사용자 지정 블록이 내 테마 안에 있을 것입니다.누군가 내 테마를 설치하면 내 테마와 함께 사용자 지정 블록이 내장됩니다.어떻게 보관하고 폴더 구조도 어떻게 구성할 수 있습니까?

저도 똑같이 해야 했습니다.내 테마 내에 사용자 정의 블록을 등록합니다.

내부에 블록 작성src/blocks

먼저, 저는 안에 블록을 만들었습니다.src/blocks사용.npx @wordpress/create-block my-block이제 블록은 다음 위치에 있습니다.{theme}/src/blocks/my-block.

블록 구축

그리고 나서, 저는 블록을 만들었습니다.npm run build.

등록하세요block.json빌드 폴더에서

마지막으로, 저는 블록을 등록했습니다.block.json빌드의 메타데이터 파일:

기능들.php

function register_my_block()
{
    register_block_type( dirname(__FILE__) . '/src/blocks/my-block/build/block.json' );
}
add_action('init', 'register_my_block');

테마 내에 src 폴더를 만든 다음 블록 폴더를 배치하기만 하면 됩니다(아래 구조 참조).

폴더 구조는 다음과 같습니다.

테마 폴더 --> src --> 차단 폴더 > 차단 파일(edit.js, index.js, save.js 등)

블록 파일의 경우:

이제 설치할 시간입니다.wp-scriptsWP 블록으로 작업할 패키지입니다.이를 위해 패키지를 업데이트합니다.json 파일 아래 줄을 추가합니다.그런 다음 터미널에서 테마 폴더로 이동하고 'npm install' 명령을 실행하면 모든 종속성 패키지를 설치한 다음 'npm start' 명령을 실행합니다.

{
"main": "build/index.js",
"scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
},
"devDependencies": {
    "@wordpress/scripts": "^23.4.0"
}
}

참고: 다음을 통해 블록을 등록해야 합니다.register_block_typePHP를 위한 함수 또는registerBlockType제이에스 방식으로.그렇지 않으면 위 코드가 작동하지 않습니다.위의 코드는 파일만 생성합니다.

언급URL : https://stackoverflow.com/questions/72463531/add-custom-block-in-a-wordpress-block-themenot-with-the-plugin