WordPress 패턴 디렉토리에 대해 알아야 할 사항

게시 됨: 2021-08-26

작년 말에 저는 WordPress 패턴이 무엇인지, 무엇을 위한 것인지, WordPress 블록 편집기에서 만들고 사용하는 방법에 대한 포괄적인 가이드를 작성했습니다. 반년이 조금 넘는 기간 동안 전체 WordPress 커뮤니티의 작업 덕분에 블록 패턴 개발이 크게 발전했습니다. WordPress 5.8 버전이 게시된 후 가용성과 사용량이 빠르게 증가하는 모습을 볼 수 있습니다. 이러한 이유로 WordPress 패턴 디렉토리에 대한 최신 정보는 향후 페이지와 테마를 재설계하는 방식에 영향을 미치기 때문에 흥미롭다고 생각합니다.

이전에 이미 언급했듯이 블록 패턴 은 페이지와 게시물을 만드는 데 사용할 수 있는 블록 그룹으로 구성된 미리 정의된 섹션 또는 조각의 집합입니다. 이러한 디자인은 두 개의 버튼을 보여주는 섹션이나 화려하고 복잡한 디자인의 가격 섹션과 같이 단순한 것일 수 있습니다.

블록 패턴 삽입 및 편집

블록 편집기에서 블록 패턴을 삽입하는 것은 블록을 추가하는 것만큼 쉽습니다. 편집기의 왼쪽 상단 모서리에 있는 + 아이콘을 클릭하면 블록, 패턴 또는 기타 재사용 가능한 요소를 추가할 수 있는 팝업 대화 상자가 나타납니다.

WordPress 편집기에 블록 패턴 삽입 — WordPress 편집기에서 블록 패턴을 검색합니다.

패턴 탭 에는 검색할 패턴을 범주별로 선택할 수 있는 드롭다운이 있습니다. 찾을 수 있는 패턴 중 일부는 기본적으로 WordPress에서 제공되고, 나머지는 설치한 테마에 따라 다르며, 일부는 플러그인에서 제공됩니다. 사실, 완전히 새로운 아름다운 패턴 세트를 추가할 플러그인이 많이 있습니다!

패턴을 선택하면 해당 패턴을 구성하는 블록 세트가 자동으로 게시물이나 페이지에 추가됩니다. 이제 원하는 콘텐츠가 포함되도록 조정하기만 하면 됩니다.

패턴을 형성하는 블록 중 하나 편집 — 패턴을 형성하는 블록 중 하나를 편집합니다.

WordPress 패턴 디렉토리에서 복사하여 붙여넣기

2021년 4월 말, WordPress는 WordPress.org에 패턴 디렉토리를 게시했습니다. 이 게시물을 작성하는 시점(2021년 8월 23일)에는 WordPress.org에 이 페이지로 직접 이동할 수 있는 메뉴 항목이 없습니다. 스페인어로 하나가 있기 때문에 적어도 영어에는 없습니다.

언뜻 보기에 이 디렉토리는 테마 또는 플러그인 디렉토리와 같은 것처럼 보일 수 있지만 모든 게시물이나 페이지에 매우 쉽게 패턴을 추가할 수 있는 기능이 있습니다.

WordPress.org 패턴 디렉토리에서 블록 패턴을 검색하는 것은 WordPress 대시보드에서 사용할 수 있는 것과 매우 유사합니다. 키워드로 검색하거나 검색 범위를 좁힐 카테고리 세트가 있습니다. 또한 WordPress.org에 로그인하면 모든 패턴을 북마크에 추가할 수 있습니다.

패턴을 두 번 클릭하면 패턴이 자세히 표시되며 다양한 화면 크기 중에서 선택하여 각 패턴에서 어떻게 보이는지 확인할 수 있습니다.

WordPress 팀 소셜 카드 디렉토리 패턴 — WordPress 디렉토리 패턴: 팀 소셜 카드

위의 이미지에서 볼 수 있듯이 패턴을 복사할 수 있는 버튼이 있고 페이지나 게시물에 붙여넣은 후 이미 전체 블록 세트를 가지고 있으므로 필요한 수정을 수행하여 적용할 수 있습니다. 원하는 대로 웹사이트:

마리 마틴
편집장

엘리자베스 린든
스타일 편집기

자넷 스미스
패션 에디터

사진, 텍스트 및 링크를 교체하여 페이지에 필요한 내용에 완벽하게 맞는 블록 섹션을 빠르게 만들 수 있습니다.

루스 라벤토스
최고 경영자

안토니오 빌레가스
최고 기술 책임자

데이비드 아길레라
최고 제품 및 품질 책임자

쉽죠?

WordPress 패턴 디렉토리에 패턴 추가

워드프레스 패턴 디렉토리에 패턴을 생성하고 제출하기 위한 최종 환경이 어떤 모습이어야 하는지에 대한 작업이 아직 진행 중이지만, 이제 디렉토리에 게시할 고유한 패턴을 업로드할 수 있는 기회가 열려 있습니다. 간단한 예를 들어 어떻게 하는지 봅시다.

먼저 자신만의 패턴을 만들어야 합니다. 블록 편집기에서 직접 생성할 수 있습니다. 홈 페이지에 있는 것에서 방금 생성한 평가 패턴의 경우처럼요. 이미지를 포함하는 경우 상업적 사용을 위한 무료 라이선스가 있어야 합니다.

고객이 우리에 대해 말하는 것

고객이 우리를 사랑하기 때문에…

️️️️️
와 이거 정말 효과가 있네요
지금까지 이 플러그인은 우리가 사용한 최고의 도구입니다. 모든 고객은 이 플러그인으로 작업하는 것을 기쁘게 생각합니다. 사용하기 쉽고 멋진 UI.

이름 성 – 직위

그럼 당신은 가지고 있어야합니다 Github 계정을 만들고 다음을 포함해야 하는 사전 정의된 양식을 작성합니다.

패턴 설명,
제목,
디렉토리에서 사용 가능한 카테고리,
패턴의 스크린샷,
귀하가 포함시킨 이미지 크레딧 및
블록 마크업. 이렇게 하려면 패턴을 형성하는 그룹에 마우스를 놓고 세 개의 점 아이콘이 있는 버튼을 클릭한 다음 복사 를 클릭하면 됩니다(Github에 붙여넣을 수 있음).

WordPress 패턴 디렉토리에 새 패턴 보내기 — WordPress 패턴 디렉토리에 대한 새 패턴 제출 편집.

그리고 그게 다야. 미리보기 탭으로 이동하여 결과를 확인하고 마지막으로 새 문제 제출 버튼을 클릭할 수 있습니다.

WordPress 패턴 디렉토리로 전송된 패턴 보기 — WordPress 패턴 디렉토리로 전송된 패턴의 보기.

이제 WordPress 패턴 디렉토리에서 사용할 수 있도록 누군가 검토할 때까지 기다려야 합니다.

디렉토리 뉴스

앞서 언급했듯이 패턴 제출 프로세스는 아직 개발 중입니다. GitHub에서 제출할 필요가 없고 WordPress.org에 로그인하기만 하면 됩니다.

작업 중인 아이디어는 https://wordpress.org/patterns/new-pattern/(현재 페이지는 비어 있음)에서 WordPress.org에 로그인하면 다음 이미지와 유사한 페이지가 표시된다는 것입니다. 패턴 만들기 버튼이 있습니다.

새로운 패턴 생성 페이지 제안 — 새 패턴 생성 페이지의 모형(출처: 블록 패턴 디렉토리).

패턴을 생성하기 위해 블록 편집기의 WordPress 호스팅 인스턴스를 사용할 수 있습니다. 이 편집기는 (대부분) 일반 블록 편집기처럼 작동하지만 약간의 조정이 있습니다. 첫 번째 변경 사항은 패턴 생성 및 제출에 중점을 둔 편집기의 환영 팝업 사용자 정의 버전이 있다는 것입니다.

패턴 편집기 환영 팝업 모형(출처: WordPress.org 패턴 디렉토리.

반면에 패턴의 편집 사이드바에는 제목, 설명 및 카테고리와 같은 패턴에 대한 정보도 포함됩니다.

패턴 편집기 사이드바 모형(출처: WordPress.org 패턴 디렉토리).

마지막으로 검토할 패턴을 제출하고 전 세계 사람들과 공유할 수 있습니다.

검토할 패턴 제출 및 패턴 디렉토리에 게시하는 모형 — 패턴 디렉토리(출처: WordPress.org 패턴 디렉토리)에서 검토 및 게시를 위한 패턴 제출 모형.

요약

WordPress 블록 패턴은 페이지 및 포스트 디자인에 가장 많이 사용되는 요소가 될 것입니다. 그것들은 하나의 단위로 완벽하게 이해되는 섹션을 추가하기에 충분히 유용하고 해당 섹션을 구성하는 각 블록을 하나씩 추가해야 하는 경우보다 훨씬 빠르게 페이지를 구축할 수 있습니다. 그리고 디렉토리에서 패턴 검색은 플러그인 및 테마와 유사한 방식으로 표준화됩니다.

개인적으로 지금 디렉토리에서 사용 가능한 패턴을 볼 때 여전히 내 웹 사이트에서 직접 사용할 패턴을 찾기가 어렵습니다. 그러나 나는 이것이 며칠 안에 바뀔 것이라는 것을 알고 있습니다. 훌륭한 디자이너가 제안서를 추가하기 시작하면 페이지를 훨씬 더 빠르게 업데이트할 수 있는 엄청난 디자인의 디자인이 손끝에서 폭발하게 될 것입니다.

Unsplash에 있는 Nick Morrison의 사진.