WordPress 블록 패턴 101: 무엇입니까? 사용 방법

WordPress 블록 편집기에서 시간을 절약하고 보다 전문적인 디자인을 만들고 싶으십니까? 그렇다면 WordPress 블록 패턴에 대해 배우는 것이 필요할 수 있습니다.

블록 패턴을 사용하면 미리 만들어진 디자인을 삽입하고 필요에 맞게 조정하여 바로 사용할 수 있습니다. 이것은 시간을 절약해 줍니다. 또한 디자이너가 아닌 경우 블록 패턴을 사용하면 처음부터 해당 디자인을 구축할 지식이 없더라도 보다 독특한 디자인을 활용할 수 있기 때문에 도움이 됩니다.

이 게시물에서는 WordPress 블록 패턴에 대해 알아야 할 모든 것을 다룰 것입니다.

• WordPress 블록 패턴은 무엇이며 재사용 가능한 블록과 어떻게 다른지
• 편집기에서 블록 패턴을 사용하는 방법.
• 새로운 블록 패턴을 찾는 위치와 사용 방법.
• 코드 없이 자신만의 블록 패턴을 만드는 방법.

WordPress 블록 패턴이란 무엇입니까?

WordPress 블록 패턴은 본질적으로 블록으로 구성된 템플릿입니다.

특정 레이아웃으로 배열된 단일 블록 또는 여러 블록을 포함할 수 있습니다. 블록 자체 외에도 블록 패턴에는 해당 블록에 대한 설정도 포함됩니다( 예: 버튼을 특정 색상으로 구성 ).

전체 페이지 템플릿에 대한 블록 패턴을 찾을 수 있습니다. 또는 더 일반적으로 페이지에서 사용하려는 특정 섹션에 대한 블록 패턴을 찾을 수 있습니다. 그런 다음 레고와 같은 여러 블록 패턴을 조합하여 디자인을 구축할 수 있습니다.

예를 들어 이미지 배경, 일부 제목 텍스트 및 버튼이 있는 섹션을 생성한다고 가정해 보겠습니다. 블록 편집기를 사용하여 수동으로 설정할 수 있습니다. 그러나 블록 패턴을 사용하면 해당 레이아웃으로 미리 만들어진 디자인을 삽입한 다음 콘텐츠와 일치하도록 사용자 지정할 수 있습니다.

위에서 언급했듯이 WordPress 블록 패턴을 사용하는 주요 이점은 다음과 같습니다.

1. 시간을 절약해 줍니다.
2. 특정 유형의 디자인을 직접 만드는 데 대한 지식이 없을 수도 있기 때문에 더 복잡한 디자인을 더 쉽게 만들 수 있습니다.

블록 패턴과 재사용 가능한 블록

이제 WordPress 블록 패턴이 무엇인지 알았으므로 블록 패턴 이전에 도입된 핵심 기능인 WordPress 재사용 가능 블록과 매우 흡사하다고 생각할 수 있습니다.

재사용 가능한 블록은 콘텐츠에 쉽게 삽입할 수 있는 하나 이상의 블록 모음이기도 합니다.

둘 다 미리 만들어진 디자인을 빠르게 삽입할 수 있다는 점에서 비슷하지만 한 가지 큰 차이점이 있습니다.

• 블록 패턴은 디자인의 출발점입니다 . 그것들을 사용하여 사용하려는 기본 디자인을 가져올 수 있지만 매번 사용자 정의할 것이고 블록 패턴의 모든 인스턴스는 다를 것입니다.
• 재사용 가능한 블록은 모든 단일 인스턴스에서 동일합니다 . 재사용 가능한 블록의 모든 인스턴스는 항상 동일하며 한 지점에서 재사용 가능한 블록 디자인을 업데이트하면 해당 변경 사항이 재사용 가능한 블록의 모든 인스턴스에 자동으로 적용됩니다.

다음은 각각을 사용할 수 있는 경우의 예입니다.

먼저 콘텐츠에 따옴표를 삽입하기 위한 특별한 형식이 있다고 가정해 보겠습니다. 따라서 인용문을 삽입할 때마다 동일한 블록 배열을 사용하여 일관성을 유지하려고 합니다.

각 인용문이 다를 경우 이를 위해 블록 패턴을 사용하고 싶을 것입니다. 블록 패턴을 삽입하여 기본 서식을 설정한 다음 고유한 인용문을 추가할 수 있습니다.

이제 모든 블로그 게시물의 끝에 포함하려는 이메일 목록에 사람들이 참여할 수 있는 CTA(클릭 유도문안)가 있다고 가정해 보겠습니다. 이 CTA가 모든 인스턴스에서 정확히 동일하기를 원하고 나중에 업데이트할 수 있는 기능도 원합니다.

이 사용 사례의 경우 재사용 가능한 블록을 사용하려고 합니다. 재사용 가능한 블록은 CTA의 모든 인스턴스가 동일한지 확인합니다. CTA를 변경하려는 경우 재사용 가능한 블록을 한 번만 업데이트하면 해당 변경 사항이 모든 인스턴스에 적용됩니다.

WordPress 블록 패턴을 사용하는 방법

블록 삽입에 사용하는 것과 동일한 인터페이스를 통해 블록 패턴을 삽입할 수 있습니다.

시작하려면 블록 패턴을 삽입하려는 콘텐츠의 편집기를 엽니다. 그런 다음 왼쪽 상단 모서리에 있는 더하기 아이콘을 클릭하여 콘텐츠 삽입기 인터페이스를 엽니다.

표시되는 사이드바에서 패턴 탭을 클릭합니다. 그런 다음 드롭다운을 사용하여 다양한 유형의 패턴을 필터링할 수 있습니다.

마음에 드는 패턴을 찾으면 해당 패턴을 클릭하여 콘텐츠에 삽입하기만 하면 됩니다.

블록 패턴을 삽입하면 디자인을 수동으로 생성한 것처럼 모든 개별 블록을 편집할 수 있습니다.

그리고 그게 다야! 다른 블록 패턴을 삽입하고 싶다면 같은 과정을 반복하면 됩니다. 블록 패턴은 편집기에서 커서를 위치시킨 모든 위치에 삽입됩니다.

새로운 WordPress 블록 패턴을 찾고 사용하는 방법

새로운 블록 패턴을 찾는 데 도움이 되도록 WordPress 팀은 WordPress에 공식 블록 패턴 라이브러리를 만들었습니다. 여기를 클릭하면 액세스할 수 있습니다.

필터를 사용하여 모든 블록 패턴을 탐색하고 결과를 클릭하여 미리 볼 수 있습니다. 원하는 블록 패턴을 찾으면 패턴 복사 버튼을 클릭하여 패턴을 클립보드에 복사합니다.

이제 블록 패턴을 추가하려는 콘텐츠의 편집기를 열고 일반 텍스트를 붙여넣는 것처럼 붙여넣습니다. 마우스 오른쪽 버튼을 클릭하고 붙여넣기를 선택하거나 Ctrl + V (또는 Mac의 경우 Cmd + V ).

그게 다야 - 붙여넣은 곳마다 전체 블록 패턴이 나타나는 것을 볼 수 있습니다.

WordPress.org의 공식 블록 패턴 라이브러리 외에도 ShareABlock 및 Gutenberg Hub 템플릿 라이브러리(공식 라이브러리와 동일한 복사/붙여넣기 방식 사용)와 같은 타사 디렉토리도 찾을 수 있습니다.

기본 블록 패턴 기능을 사용하는 대신 자체 사용자 정의 솔루션을 사용할 수도 있지만 블록 패턴 및 템플릿을 삽입할 수 있는 여러 플러그인을 찾을 수도 있습니다. 어느 쪽이든, 최종 결과는 동일합니다. Gutenberg 템플릿 플러그인에 대한 게시물에서 최고의 옵션을 찾을 수 있습니다.

코드 없이 나만의 WordPress 블록 패턴을 만드는 방법

현재로서는 핵심 WordPress 블록 편집기를 사용하면 코딩 방법을 알지 못하는 한 자신만의 블록 패턴을 만들 수 없습니다.

고맙게도 WordPress에서 예상한 대로 이 문제를 해결하는 플러그인이 있습니다.

개인적으로 가장 좋아하는 것은 Justin Tadlock의 무료 블록 패턴 빌더 플러그인입니다. 기본적으로 이 플러그인을 사용하면 블록 편집기를 사용하여 자신만의 디자인을 만든 다음 블록 패턴으로 저장할 수 있습니다. 따라서 편집기를 사용하여 패턴을 디자인하고 패턴으로 저장한 다음 다른 패턴과 마찬가지로 쉽게 삽입할 수 있습니다.

솔직히 이 기능이 워드프레스 핵심 소프트웨어에 없다는 것이 조금 이상하지만 무료 플러그인을 설치하는 것만으로 해결할 수 있기 때문에 큰 문제는 아니다.

시작하려면 WordPress.org에서 무료 블록 패턴 빌더 플러그인을 설치하고 활성화하십시오. 저는 앞서 언급한 Justin Tadlock의 플러그인을 사용하고 있지만 BlockMeister의 동일한 이름의 플러그인이 있는데 약간 더 많은 기능과 함께 동일한 기능을 제공하는 것 같습니다.

그런 다음 일반 편집기를 열고 저장하려는 디자인을 만듭니다. 완료되면 블록 패턴에 포함할 블록을 모두 선택하고 점 3개 아이콘을 클릭합니다. 그런 다음 블록 패턴에 추가 옵션을 선택합니다.

그런 다음 이름을 지정할 수 있습니다.

그게 다야 - 이제 다른 블록 패턴처럼 삽입할 수 있습니다. 기본적으로 "미분류" 섹션에 있습니다.

편집기에서 작업하는 것 외에도 WordPress 대시보드에 블록 패턴을 관리하고 생성할 수 있는 전용 블록 패턴 탭이 있습니다.

오늘 블록 패턴 시작하기

블록 패턴을 사용하는 것은 매우 쉽습니다. 블록처럼 삽입할 수 있습니다. 그리고 일단 삽입하면 마치 직접 디자인을 만든 것처럼 패턴의 블록을 편집할 수 있습니다.

더 많은 유연성을 제공하기 위해 새로운 블록 패턴에 액세스하는 몇 가지 방법이 있습니다.

1. WordPress.org 또는 타사 라이브러리 웹사이트에서 공식 블록 패턴 라이브러리를 사용할 수 있습니다. 라이브러리와 WordPress 편집기 간에 복사하여 붙여넣기만 하면 됩니다.
2. 수집한 Gutenberg 템플릿 플러그인 중 하나를 사용할 수 있습니다. 이러한 플러그인은 모두 기본 블록 패턴 기능을 사용하지 않지만 정확히 동일한 목적과 기능을 제공합니다.
3. 블록 패턴 빌더와 같은 플러그인과 편집기를 사용하여 자신만의 블록 패턴을 디자인할 수 있습니다. 디자인을 저장하면 나중에 쉽게 재사용할 수 있습니다.

블록 편집기에서 작업하는 방법을 개선하는 다른 방법을 배우려면 블록 편집기를 최대한 활용하는 방법에 대한 가이드와 최고의 블록 플러그인 모음을 확인하십시오.

WordPress 블록 패턴에 대해 여전히 질문이 있습니까? 댓글로 알려주시면 도와드리겠습니다.