WordPress에서 사용자 정의 구텐베르크 블록을 만드는 방법 (쉬운 방법)


WordPress 사이트에 사용자 정의 구텐베드 블록을 만들고 싶습니까? WordPress 5.0 업데이트 후에는 블록을 사용하여 새로운 WordPress 블록 편집기.

WordPress에는 콘텐츠를 작성할 때 사용할 수있는 몇 가지 유용한 블록이 함께 제공됩니다. 많은 WordPress 플러그인에는 사용할 수있는 자체 블록이 함께 제공됩니다.

그러나 때로는 특정 작업을 수행하기 위해 사용자 정의 구텐베드 블록을 만들 수도 있습니다.

WordPress 사이트에 대한 맞춤 구텐베드 블록을 만드는 쉬운 솔루션을 찾고 있다면 올바른 위치에 있습니다.

이 단계별 자습서에서는 Gutenberg 용 사용자 지정 WordPress 블록을 만드는 쉬운 방법을 보여줍니다.

Gutenberg 용 사용자 정의 WordPress 블록 만들기

노트:이 기사는 중급 사용자를위한 것입니다. 커스텀 구텐베드 블록을 만들기 위해서는 HTML과 CSS에 익숙해야합니다.

1 단계 : 시작하기

가장 먼저해야 할 일은 설치하고 활성화하는 것입니다. 블록 실험실 플러그인.

많은 번거 로움없이 관리자 패널에서 맞춤 블록을 만들 수있는 WordPress 플러그인입니다.

Block Lab WordPress Plugin

플러그인을 설치하려면 다음 초보자 안내서를 참조하십시오. WordPress 플러그인 설치 방법.

플러그인이 활성화되면 첫 번째 맞춤 블록을 만드는 다음 단계로 진행할 수 있습니다.

2 단계 : 새 블록 만들기

이 자습서를 위해 우리는 '회원 평가'블록을 만들 것입니다.

먼저, 블록 랩»새로 추가 관리자 패널의 왼쪽 사이드 바에서

이 페이지에서 블록에 이름을 지정해야합니다. "여기에 블록 이름 입력"텍스트 상자에 임의의 이름을 쓸 수 있습니다.

사용자 정의 블록 이름 입력

우리는 우리의 커스텀 블록에 이름을 붙일 것입니다.

페이지 오른쪽에 블록 속성이 있습니다. 여기서 블록에 대한 아이콘을 선택하고 카테고리 드롭 다운 상자에서 블록 카테고리를 선택할 수 있습니다.

슬러그는 블록 이름을 기반으로 자동 채워 지므로 변경할 필요가 없습니다. 그러나 키워드 텍스트 필드에 최대 3 개의 키워드를 쓸 수 있으므로 귀하의 블록을 쉽게 찾을 수 있습니다.

사용자 정의 블록 속성

이제 블록에 필드를 추가해 보겠습니다. 텍스트, 숫자, 이메일, URL, 색상, 이미지, 체크 박스, 라디오 버튼 등과 같은 다양한 유형의 필드를 추가 할 수 있습니다.

우리는 맞춤 리뷰 프레임에 3 개의 필드를 추가합니다 : 리뷰어 이미지의 이미지 필드, 리뷰어 이름의 텍스트 상자 및 고객 텍스트의 텍스트 영역.

클릭 + 필드 추가 버튼을 눌러 첫 번째 필드를 삽입하십시오.

이미지 필드 옵션

필드에 대한 옵션이 열립니다. 각각을 살펴 보겠습니다.

  • 필드 레이블: 필드 레이블에 원하는 이름을 사용할 수 있습니다. 첫 번째 필드의 이름을 Reviewer Image로 지정합시다.
  • 분야 명: 필드 이름은 필드 레이블에 따라 자동으로 생성됩니다. 다음 단계에서이 필드 이름을 사용하므로 모든 필드에 대해 고유해야합니다.
  • 필드 유형: 여기서 필드 유형을 선택할 수 있습니다. 우리는 첫 번째 필드가 이미지이기를 원합니다. 영상 드롭 다운 메뉴에서
  • 필드 위치: 필드를 편집기 또는 속성에 추가할지 여부를 결정할 수 있습니다.
  • 도움말 텍스트: 필드를 설명하는 텍스트를 추가 할 수 있습니다. 개인 용도로이 블록을 만드는 경우에는 필요하지 않습니다.

또한 선택한 필드 유형에 따라 몇 가지 추가 옵션을 얻을 수 있습니다. 예를 들어 텍스트 필드를 선택하면 자리 표시 자 텍스트 및 글자 수 제한과 같은 추가 옵션이 표시됩니다.

를 클릭 할 수 있습니다. 필드 닫기 버튼을 누르면 이미지 필드가 완성됩니다.

위 과정을 완료 한 후 추천을위한 다른 두 개의 입력란을 + 필드 추가 단추.

최종 사용자 정의 블록 필드

필드의 순서를 바꾸려면 각 필드 레이블의 왼쪽에있는 햄버거 아이콘을 사용하여 필드를 드래그하여 할 수 있습니다.

특정 필드를 편집하거나 삭제하려면 마우스를 필드 레이블 위로 가져가 편집 및 삭제 옵션을 가져와야합니다.

완료되면 게시 버튼을 클릭하여 사용자 지정 Gutenberg 블록을 저장합니다.

3 단계 : 블록 템플릿 만들기

마지막 단계에서 맞춤 WordPress 블록을 만들었지 만, block-testimonials.php라는 이름의 블록 템플릿을 만들어 현재 테마 폴더에 업로드해야 작동합니다.

블록 템플릿 만들기

블록 템플릿 파일은 플러그인 내부에 블록 필드를 표시하는 방법을 알려줍니다. 플러그인은 템플릿 파일을 찾은 다음 템플릿을 사용하여 블록 내용을 표시합니다.

이 파일이 없다면 오류를 표시하다 "Template file blocks / block-testimonials.php not found"라고 말합니다.

블록의 템플릿 파일을 만들어 보겠습니다.

먼저, 바탕 화면에 폴더를 만들고 이름을 지정하십시오 블록들. 이 폴더 안에 블록 템플릿 파일을 만든 다음 현재 WordPress 테마 디렉토리에 업로드합니다.

템플릿 파일을 만들려면 메모장과 같은 일반 텍스트 편집기를 사용할 수 있습니다.

사용자 정의 블록에 새 필드를 추가 할 때마다 블록 템플릿 파일에 다음 PHP 코드를 추가해야합니다.

교체하는 것을 잊지 마세요. add-your-field-name-here 여기에 필드 이름.

예를 들어 첫 번째 필드의 이름은 reviewer-image이므로 다음 줄을 템플릿 파일에 추가합니다.

간단하지? 나머지 분야에 대해서도 동일하게합시다.



그런 다음 스타일 지정을 위해 위 코드에 HTML 태그를 추가합니다.

예를 들어 이미지를 표시하기 위해 검토 자 이미지를 img 태그 안에 넣을 수 있습니다. 그렇지 않으면 WordPress에 원하는 이미지가 표시되지 않습니다. 맞습니까?

또한 HTML 태그에 클래스 이름을 추가하고 코드를 div 컨테이너에 래핑하여 블록 컨텐츠의 스타일을 지정할 수 있습니다 (이 단계에서는이 단계에서 할 것입니다).

블록 템플릿에 대한 마지막 코드는 다음과 같습니다.

<img src = "http://www.wpbeginner.com/">

마지막으로 파일 이름을 block-testimonials.php로 지정하고 블록들 폴더.

4 단계 : 맞춤 블록 스타일 지정

맞춤 블록의 스타일을 원하십니까? 당신은 CSS 덕분에 그렇게 할 수 있습니다.

메모장과 같은 일반 텍스트 편집기를 열고 다음 코드를 추가하십시오.

.testimonial-block {
너비 : 100 %;
margin-bottom : 25px;
}

.testimonial-image {
왼쪽으로 뜨다;
너비 : 25 %;
패딩 오른쪽 : 15px;
}

.testimonial-box {
왼쪽으로 뜨다;
너비 : 75 %;
}

.clearfix :: after {
content : "";
명확 : 둘 다;
전시 : 테이블;
}

완료되면 파일 이름을 block-testimonials.css로 지정하고 파일 이름을 블록들 폴더.

5 단계 : 블록 템플릿 파일을 테마 폴더에 업로드

이제 블록들 WordPress 테마 폴더에 사용자 정의 블록 템플릿 파일이 들어있는 폴더.

그렇게하려면 FTP 클라이언트를 사용하여 WordPress 사이트에 연결해야합니다. 도움이 필요하시면 저희 가이드를 확인하십시오. FTP를 사용하여 WordPress 사이트에 파일을 업로드하는 방법.

연결이 끝나면 / wp-content / themes / 폴더로 이동하십시오. 여기에서 현재 테마 폴더를 열어야합니다.

FTP를 사용하여 테마 폴더 입력

이제 업로드하십시오. 블록들 폴더 (블록 템플릿 파일과 CSS 파일 포함)를 테마 디렉토리에 추가하십시오.

완료되면 마지막 단계로 진행하여 사용자 정의 블록을 테스트 할 수 있습니다.

노트: Block Lab 플러그인을 사용하면 테마별 블록을 만들 수 있습니다. WordPress 테마를 변경하면 블록 폴더를 새 테마 디렉토리에 복사해야합니다.

6 단계 : 새 블록 테스트

이제 맞춤형 추천 블록을 테스트 할 차례입니다. 다음으로 이동하여이 작업을 수행 할 수 있습니다. 페이지 » 새로운 걸 더하다 새 페이지를 만들 수 있습니다.

다음을 클릭하십시오. 차단 추가 (+) 아이콘을 클릭하고 고백 블록을 검색하십시오. 찾으면 클릭하여 사용자 정의 블록을 페이지 편집기에 추가하십시오.

페이지 편집기에 사용자 정의 블록 추가

이제 할 수 있습니다. 이 페이지에 평가를 추가하십시오 귀하의 사용자 정의 블록을 사용하여. 더 많은 회원 평가를 추가하려면 언제든지 새로운 회원 평가 단원을 삽입 할 수 있습니다.

작업이 완료되면 제대로 작동하는지 여부를 확인하기 위해 페이지를 미리 보거나 게시 할 수 있습니다.

그게 다야! 사이트에 대한 첫 번째 맞춤 WordPress 블록을 만들었습니다.

에디터에서 재사용 가능한 블록으로 시간을 절약 할 수 있다는 것을 알고 계셨습니까? 에 관한 우리 가이드를 조사해라. 재사용 가능한 블록을 쉽게 만드는 법 WordPress 블록 편집기에서 다른 웹 사이트에서 사용할 수 있습니다.

당신은 또한에 대한 우리의 가이드를보고 싶을지도 모른다. 사용자 정의 WordPress 테마를 만드는 방법 코드를 작성하지 않아도됩니다.

이 기사가 마음에 들면, 유튜브 채널 WordPress 비디오 자습서. 우리를 찾을 수도 있습니다. 지저귀다페이스 북.

Source link