간단한 구텐베르크 블록 플러그인을 만드는 방법

우리 모두 WordPress를 사랑하지 않습니까? 플랫폼은 처음부터 개발자가 새로운 기능을 지속적으로 추가하면서 엄청난 성공을 거두었습니다. 최근 가장 주목할만한 기능 중 하나는 코드명 Gutenberg 인 WordPress 블록 편집기입니다.

Gutenberg는 WordPress 사용자에게 콘텐츠를 게시하고 사이트를 사용자 지정하는 흥미롭고 새로운 방법을 제공합니다. 사용이 매우 간편하여 초보자와 개발자 모두에게 희소식입니다. 최신 버전의 WordPress를 사용하고 있다면 이미 블록 편집기와 블록 개념의 가족입니다.

기본적으로 WordPress 블록 편집기에는 텍스트, 이미지, 인용문, 오디오, 비디오, 포함 등을 포함할 수 있는 몇 가지 블록이 있습니다. 그 외에도 땀을 흘리지 않고 편집기를 확장할 수 있는 수많은 Gutenberg 추가 기능이 있습니다.

그러나 사용자 정의 블록을 생성하라는 메시지가 표시되는 특정 요구 사항이 있을 수 있습니다. 여기에서 오늘의 포스트가 시작됩니다. 몇 가지 단락에서 특정 요구 사항에 맞게 사용자 지정 구텐베르크 블록을 만드는 방법을 정확히 배울 것입니다.

배울 것이 많기 때문에 더 이상 고민하지 않고 시작하겠습니다.

블록이란 무엇입니까?

당신이 완벽한 초보자라면 이 구텐베르그 사업이 무엇인지 궁금할 것입니다. 저는 Gutenberg가 소개되었을 때 꽤 혼란스러웠습니다. 하지만 누구도 탓할 수 없습니다. 우리 모두는 처음에는 전환을 만드는 것이 불편했던 클래식 편집기에 익숙했습니다.

그럼에도 불구하고 WordPress 블록 편집기는 우리가 좋든 싫든 유지하기 위해 여기에 있습니다. 이것이 바로 구텐베르그를 최대한 활용하기 위해 구텐베르크(및 그에 수반되는 모든 것)에 대해 최대한 많이 배워야 하는 이유입니다.

블록은 단락, 제목, 미디어 및 포함을 모두 함께 연결될 때 WordPress 데이터베이스에 저장된 콘텐츠를 구성하는 구성 요소로 취급하여 기존의 자유 형식 텍스트 개념을 포함된 미디어 및 단축 코드로 대체합니다. – 블록 에디터 핸드북

과거에는 WordPress 사용자가 콘텐츠를 추가하기 위해 자유 형식 텍스트와 단축 코드에 의존했습니다. 구텐베르크는 블록 을 사용합니다. 새로운 편집기를 사용하면 블록 단위를 사용하여 관리하기 쉬운 풍부하고 유연한 레이아웃을 만들 수 있습니다. 현재는 게시물과 페이지에 블록 편집기를 사용할 수 있지만 향후 전체 사이트 편집을 지원할 계획이 있습니다.

일부 블록을 보여주는 구텐베르크 편집기

블록으로 작업하면 WordPress에서 콘텐츠를 만드는 것이 매우 상쾌해집니다. 또한 기존의 많은 플러그인이 새 편집기를 지원하고 해당 플러그인에서 콘텐츠를 쉽게 추가할 수 있도록 즉시 사용할 수 있는 블록과 함께 제공됩니다. 편집기를 사용하면 블록을 페이지로 끌어다 놓을 수 있으므로 게시 버튼을 더 빨리 누를 수 있습니다.

WordPress에 직접 내장된 페이지 빌더와 같습니다.

Elementor와 같은 시각적 페이지 빌더에 익숙하다면 끌어서 놓기 페이지 빌드 개념에 익숙할 것입니다. Gutenberg는 드래그 앤 드롭 사이트 구축을 WordPress 코어에 완전히 통합하려는 시도입니다. 자세한 내용은 WordPress용 Gutenberg Builder에 대한 단계별 가이드를 참조하십시오.

그 이상으로 오늘의 포스트의 가장 중요한 부분으로 가자. 간단한 블록을 만드는 방법을 알아보겠습니다. 수동으로 수행하거나 Genesis Custom Blocks(이전의 BlockLab), Lazy Blocks 또는 ACF와 같은 플러그인을 사용하여 수행할 수 있습니다. 사용자 정의 블록을 만드는 것은 약간 기술적인 일이므로 오늘 포스트에서는 플러그인을 사용하겠습니다.

사용자 지정 블록을 만드는 방법(Genesis 사용자 지정 블록 사용)

사용자 정의 구텐베르크 블록을 처음부터 생성하려면 HTML, CSS, PHP, 그리고 더 중요한 것은 JavaScript에 대한 이해가 필요하기 때문에 플러그인 경로를 선택하는 것이 더 쉽습니다. 초보자에게 커브를 던지는 React도 이해해야 합니다.

다음 섹션에서는 다른 개발자들 사이에서 StudioPress 및 WPEngine이 제공하는 Genesis Custom Blocks를 사용할 것입니다. Genesis Custom Blocks의 무료 버전은 공식 WordPress 저장소에서 사용할 수 있습니다. 즉, WordPress 관리 대시보드 내에 설치할 수 있습니다.

Genesis 사용자 정의 블록 설치

WordPress 관리자 대시보드에 로그인하고 아래와 같이 Plugins > Add New 로 이동합니다.

그런 다음 키워드 검색 상자에 "Genesis Custom Blocks"를 입력하고 지금 설치 버튼을 누르십시오.

그런 다음 플러그인을 활성화 하여 파티를 시작하세요.

넌 잘 지내고 있어

다음으로 새로운 사용자 정의 블록을 생성해 보겠습니다. 설명을 위해 게시하는 각 게시물의 끝에 추가할 사용자 지정 클릭 유도문안(CTA)을 만들어 보겠습니다. 가장 좋은 점은 블록을 재사용하여 동일한 블록을 계속해서 생성하는 수고를 덜어줄 수 있다는 것입니다.

WordPress 관리 메뉴에서 아래에 강조 표시된 대로 Custom Blocks > Add New 로 이동합니다.

그렇게 하면 사용자 정의 블록(이 경우 CTA)을 생성하기 위한 모든 옵션을 찾을 수 있는 다음 페이지로 이동합니다.

다음은 위의 스크린샷에서 볼 수 있는 내용을 설명하는 몇 가지 단어입니다. 위에서부터 시작합니다.

주요 편집 영역:

• 빌더 – 여기서 사용자 정의 블록을 설계하는 데 많은 시간을 할애할 것입니다. 빌더 를 사용하면 제목, 필드, 슬러그, 키워드, 범주를 추가하고 사용자 정의 블록을 미리 볼 수 있습니다. 필드를 추가하는 방법을 배웁니다.
• 템플릿 편집기 – 사용자 정의 블록을 디자인한 후(예: 다양한 필드 추가) 템플릿 편집기 에서 블록 템플릿을 생성(읽기, 약간의 코드 추가)해야 합니다. 우리는 CTA를 디자인할 때 더 많은 것을 배우게 될 것입니다.
• 편집기 미리보기 – WordPress 블록 편집기 내에서 사용자 정의 블록을 미리 볼 수 있습니다.
• 프런트 엔드 미리보기 – 여기에서 사용자 정의 블록이 사이트에서 어떻게 보이는지 미리 볼 수 있습니다.
• 편집기 필드 – 게시물 또는 페이지의 기본 편집 영역에 필드를 표시합니다.
• 인스펙터 필드 – 블록 인스펙터 아래 오른쪽 사이드바에 필드를 표시합니다.

사이드바 옵션

• 슬러그 – 슬러그는 사용자 정의 블록에 지정한 제목에 따라 자동으로 채워집니다. 블록 템플릿을 생성할 때 중요합니다.
• 아이콘 – 이 옵션을 사용하면 사용자 정의 블록에 아이콘을 추가할 수 있습니다.
• 범주 – 사용자 정의 블록에 범주를 할당할 수 있습니다. 기본 제공 범주 중 하나를 사용하여 사용자 정의 블록을 범주화하거나 완전히 새로운 범주를 생성할 수 있습니다.
• 키워드 – 사용자 정의 블록과 관련된 최대 3개의 키워드를 추가하여 사람들이 블록 선택기에서 쉽게 찾을 수 있도록 합니다.
• 제자리에서 렌더링하는 대신 모달에서 블록 필드 열기 – 모달에서 필드를 열려면 이 옵션을 켜십시오. 필드가 많은 사용자 정의 블록이 있는 경우 유용합니다.
• 게시물 유형 – 상자를 선택하면 각 게시물 유형에 사용자 정의 블록이 표시됩니다. 예를 들어 게시물을 선택 취소하면 게시물에 차단이 전혀 표시되지 않습니다.

사용자 정의 블록 작성

이제 사용자 인터페이스와 각 부분이 하는 일을 더 잘 이해했으므로 작업을 시작하겠습니다.

Builder 에서 사용자 정의 블록에 적절한 제목을 지정하십시오. 아래와 같이 CTA를 사용하겠습니다.

새 필드를 추가하기 전에 아래와 같이 아이콘, 키워드를 추가하고 사용자 정의 블록에 대한 범주를 선택하겠습니다.

이 세트를 사용하여 사용자 정의 블록에 일부 필드를 추가해 보겠습니다. 예제 CTA 블록의 경우 이미지, 일부 텍스트 및 사람들이 가상의 eBook을 다운로드할 수 있도록 하는 파일 필드의 순서로 3개의 필드만 추가합니다.

블록 필드 추가

편집기 필드 섹션에서 더하기(+) 아이콘을 클릭하여 아래와 같이 첫 번째 필드를 추가합니다.

다음으로 이미지 필드를 추가해 보겠습니다. 사이드바에서 필드 유형 을 이미지 로 설정하고 다른 옵션을 정의합니다. 또한 블록 템플릿을 생성할 때 슬러그를 사용할 것이기 때문에 슬러그(저는 image-field 로 설정했습니다)를 기록해 두십시오. 아래 이미지를 참조하십시오.

그런 다음 유사한 방식으로 텍스트 및 파일 필드를 추가합니다.

아직 축하하지 마세요. 한 단계 더 남았습니다. 템플릿 편집기 > 마크업으로 전환합니다.

내 코드에는 이미 일부 코드가 있지만 귀하의 코드는 비어 있습니다.

여기에서 사용자 정의 블록이 사이트에서 어떻게 보이는지 디자인합니다. 템플릿 편집기 는 HTML, CSS 및 필드 슬러그(2개의 대괄호로 묶어야 함)를 허용합니다. PHP를 사용해야 하는 경우 대신 PHP 템플릿 방법을 사용하여 템플릿을 만들 수 있습니다.

걱정하지 마세요. 쉽습니다.

템플릿 편집기 내부의 마크업 탭(위 이미지 참조)에 다음 HTML 마크업(코드)을 추가합니다.

 <div class="cta-block">
<div 클래스="cta-이미지">
<img src ="{{이미지 필드}}">
</div>
<div 클래스="텍스트 업로드">
<h2>{{텍스트 필드}}</h2>
<a href="{{파일 필드}}">
<button type="button" class="dwnld">다운로드</button></a>
</div>
</div>

HTML 마크업을 작성할 때 템플릿 편집기 가 필드 슬러그(예: {{image-field}} )를 자동 완성하는 것을 알 수 있습니다.

다음으로 CSS 섹션으로 이동하여 몇 가지 간단한 스타일을 추가합니다.

원하는 스타일을 추가할 수 있지만 이것이 제가 작업하고 있는 것입니다.

 .cta 블록 {
텍스트 정렬:가운데;
배경색:주황색;
너비: 100%;
높이:자동;
테두리: 2px 단색 주황색;
}

.dwnld {
배경색: 검정;
테두리: 2px 단색 검정;
색상: 녹색;
패딩: 5px 10px;
텍스트 정렬: 가운데;
디스플레이: 인라인 블록;
글꼴 크기: 20px;
여백: 10px 30px;
커서: 포인터;
테두리 반경: 2px;

}

준비가 완료되었습니다! 게시 클릭:

작동 중인 새 사용자 정의 블록을 보려면 WordPress 관리 대시보드로 돌아가서 게시물 > 새로 추가 (페이지에서도 작동)로 이동합니다.

평소와 같이 게시물을 만들고 더하기(+) 를 클릭하여 새 블록을 추가하고 아래에 강조 표시된 대로 반짝이는 새 사용자 지정 블록을 선택합니다.

그런 다음 원하는 대로 맞춤 블록을 작성하고 게시물을 게시합니다.

이제 프런트 엔드에서 새 사용자 지정 CTA 블록을 확인하면 다음과 같이 표시됩니다.

내 맞춤 CTA가 바로 여기에 있습니다! 제 디자인 능력은 신경쓰지 마세요. 물론 실제 시나리오에서는 블록 스타일을 지정하는 데 시간을 더 투자하고 싶을 것입니다. 하지만 오늘 여기서 무언가를 배웠기를 바랍니다.

Genesis Custom Blocks 및 Lazy Blocks와 같은 도구를 사용하면 사용자 지정 블록을 만드는 것이 어려운 작업일 필요가 없습니다. 또한 필요에 따라 사용자 정의 블록을 복잡하거나 간단하게 만들 수 있습니다. 사용자 정의 블록을 수동으로 생성해야 하는 경우 JavaScript 강의를 수강하십시오. 유용 할거야

어떤 생각이나 질문이 있습니까? 아래 의견에 알려주십시오.