맞춤형 구텐베르크 블록 가이드
게시 됨: 2022-11-08워드프레스 파티에 늦을 경우를 대비하여 차단 됩니다 .
WordPress는 계속해서 Gutenberg 경험을 발전시키고 개선하므로 많은 개발자가 맞춤형 Gutenberg 블록을 만들어야 하는지 묻습니다.
이 게시물에서는 사용자 정의 블록의 작동 방식, 사용 시기, 웹사이트 구축을 위한 대체 옵션, 구텐베르크 블록 구축 방법을 살펴봅니다.
맞춤형 구텐베르크 블록이란 무엇입니까?
블록은 WordPress에서 페이지와 게시물을 작성하는 기본 단위입니다. 워드프레스는 2018년 구텐베르그 편집 경험과 함께 블록을 도입했습니다. 워드프레스에는 게시물 제목, 이미지 및 갤러리를 비롯한 많은 기본 콘텐츠 유형 블록이 포함되어 있습니다. 또한 플러그인은 편집 환경에 자체 블록을 추가합니다. 예를 들어, 최신 WooCommerce 릴리스 중 일부는 WordPress의 모든 페이지 또는 게시물에 제품 및 전자 상거래 기능을 더 쉽게 추가할 수 있도록 새로운 블록을 도입했습니다.
사용자 지정 구텐베르크 블록을 만들면 사이트의 모든 페이지 또는 게시물에서 해당 블록을 활용할 수 있습니다. 예를 들어 고객 평가를 가져와 표시하는 블록을 만들 수 있습니다.
블록을 완전히 수용하는 것을 꺼렸다면 놓치고 있는 것입니다. 모든 최신 WordPress 기능은 블록 편집기 환경을 개선하는 데 중점을 둡니다. 최근 및 향후 출시될 WordPress 기능 을 많이 활용하려면 블록을 사용해야 합니다.
전체 사이트 편집 시작에 대한 전자책을 다운로드하여 블록을 사용하여 전체 사이트를 구축하고 편집하는 방법에 대해 자세히 알아보십시오.
사용자 지정 구텐베르크 블록을 사용하는 경우
기존 블록 옵션이 필요에 맞지 않고 플러그인이나 테마로 실행 가능한 대안을 찾을 수 없는 경우 사용자 지정 구텐베르크 블록을 만들 수 있습니다.
사용자 지정 구텐베르크 블록을 만드는 것은 일반적으로 초보자에게 친숙한 프로젝트가 아닙니다. 사용자 정의 구텐베르크 블록을 코딩하는 가장 일반적인 두 가지 이유는 플러그인을 개발하거나 고유한 테마를 만들 때입니다.
블록을 구축하는 것은 전담 개발자나 개발 팀이 있는 엔터프라이즈급 프로젝트가 아닌 한 대부분의 사람들이 단일 웹 사이트에 대해 수행하는 프로젝트가 아닙니다. 한 사이트에 대해서만 사용자 지정 차단이 필요한 경우 더 잘 작동할 수 있는 몇 가지 대체 방법을 공유하고 있습니다.
사용자 지정 구텐베르크 블록 사용에 대한 대안
사용자 정의 블록을 파악하는 모든 작업을 수행하기 전에 이러한 대안 중 하나가 효과가 있는지 고려하십시오.
블록 패턴 또는 재사용 가능한 블록
동적 콘텐츠를 가져올 필요가 없고 실제로 블록이 레이아웃을 복제하도록 하려면 새로운 블록 패턴 기능 이나 재사용 가능한 블록을 대신 사용하십시오. 이 옵션은 초보자에게 친숙하며 코드 작성을 거의 또는 전혀 하지 않고도 수행할 수 있습니다.
패턴은 사이트 어디에서나 사용할 수 있는 미니 템플릿과 같습니다. 페이지에 삽입한 다음 편집할 수 있습니다. 재사용 가능한 블록도 비슷한 방식으로 작동합니다. 가장 큰 차이점은 페이지나 게시물에서 사용한 후 처리되는 방식입니다.
패턴은 시작점입니다. 페이지에 있는 모든 수정 사항은 해당 페이지에 고유합니다. 나중에 패턴을 변경해도 이미 사용 중인 위치는 변경되지 않습니다.
재사용 가능한 블록은 서로 연결된 상태로 유지됩니다. 블록을 업데이트하면 해당 블록을 사용한 모든 장소에 변경 사항이 적용됩니다.
코드 블록
코드 블록을 사용하여 페이지에 사용자 정의 코드를 삽입합니다. 테마 및 플러그인 개발자는 여러 사이트에서 사용할 사용자 정의 블록을 만듭니다. 단일 사이트에서 작업하는 경우 사용자 정의 코드 스니펫을 추가하여 더 짧은 시간에 동일한 목표를 달성할 수 있습니다. 두 옵션 모두 동일한 수준의 기술 전문성이 필요합니다.
자신의 사용자 정의 블록을 구축하는 것을 고려할 가치가 있는 한 가지 경우는 사이트를 클라이언트에게 넘기려는 개발자인 경우입니다. 클라이언트는 Gutenberg 편집기를 사용하여 사용자 정의 블록으로 작업할 수 있지만 코드를 편집하려고 하면 완전히 손실됩니다.
사용자 지정 구텐베르크 블록을 만드는 방법
사용자 지정 구텐베르크 블록을 만드는 데에는 두 가지 옵션이 있습니다. 직접 코딩하거나 블록 생성 플러그인을 사용할 수 있습니다. 두 옵션 모두 약간의 코딩이 필요합니다. 시도하기 전에 웹 개발 기본 사항을 살펴보고 싶을 것입니다.
스스로 코딩하기
맞춤형 블록을 구축하려면 개발 경험이 필요합니다. WYSIWIG 편집기를 고수하고 실수로 코드 표시 옵션을 클릭할 때마다 심장이 뛴다면 이것은 당신을 위한 것이 아닙니다.
사용자 정의 블록을 생성하려면 HTML, CSS, JavaScript 및 React에 대한 중급 지식이 필요합니다.
개발 환경과 도구를 설정하여 시작하십시오. WordPress 환경, Node, NPM 및 코드 편집기가 필요합니다. 그런 다음 공식 WordPress 블록 편집기 핸드북에서 첫 번째 블록을 만드는 방법에 대한 이 자습서를 따르십시오.
플러그인 사용
HTML, CSS 및 JavaScript에 익숙하지만 처음부터 모든 것을 코딩할 준비가 되지 않은 경우 플러그인 접근 방식을 고려하십시오. 플러그인을 사용하여 사용자 정의 블록을 만드는 것은 단일 웹사이트에서 사용할 사용자 정의 블록이 필요할 때 훌륭한 옵션입니다.
Genesis Custom Blocks 플러그인 은 사용자 정의 블록을 만드는 데 가장 많이 사용되는 플러그인입니다. 친숙한 WordPress 인터페이스를 사용하여 블록 필드를 생성합니다. 필드를 설정한 후 블록이 작동하도록 HTML, CSS, JavaScript 및 PHP 템플릿을 제공해야 합니다.
더 쉽지만 여전히 약간의 코딩이 필요합니다. 차이점은 로컬 개발 환경을 설정하지 않고도 WordPress 관리자가 모든 작업을 수행할 수 있다는 것입니다. 또한 플러그인을 사용하면 블록을 더 쉽게 테스트하고 미리 보고 제대로 작동하는지 확인할 수 있습니다.
무엇을 만들고 있든 저희가 도와드릴 수 있습니다.
사용자 정의 블록을 사용하여 사이트를 구축하는 방법에 관계없이 또는 여전히 클래식 편집기를 사용하고 있는 경우 안정적인 호스트가 필요합니다. Pressable은 1인 기업가에서 고급 개발자 팀에 이르기까지 모든 사람에게 WordPress가 가장 잘 작동하는 곳임을 자랑스럽게 생각합니다.
Pressable은 사용하기 쉬운 인터페이스, 최고의 보안 및 초고속 속도를 제공합니다. Pressable의 호스팅을 사용하면 사이트를 업데이트하기 쉽고 고객이 쉽게 찾고 사용할 수 있습니다.
지금 가입하고 사이트 구축을 시작하거나 기존 사이트 이전에 대해 자세히 알아보십시오. 사이트 마이그레이션을 도와드리겠습니다.
