WordPress 블록 테마 생성 및 전체 스택 편집

최근에 WordPress 포럼 및 뉴스를 팔로우했다면 FSE(전체 사이트 편집)에 대해 들어보았거나 적어도 블록 테마 생성과 같은 참조를 본 적이 있을 것입니다. 그것이 무엇인지 알지 못하더라도 아마도 그것에 대해 이야기를 듣고 그것이 당신에게 무엇을 의미하는지 궁금해했을 것입니다.

WordPress를 자주 사용하거나 개발자인지 여부에 관계없이 좋은 소식이 있습니다. 진짜 중요한 것은 당신이 그것을 두려워해서는 안 되며 모든 것이 당신을 위해 잘 될 것이고 당신을 위해 과정을 수월하게 할 것이라는 것입니다.

우리는 무엇을 근거로 그것을 주장합니까? 먼저 먼저 온다. 제목에서 다룬 내용을 본격적으로 배우기 전에 WordPress 전체 사이트 편집에 대해 조금 이해해 보겠습니다.

WordPress 전체 사이트 편집(FSE)은…?

본질적으로 전체 사이트 편집은 블록이라는 개념을 피합니다. 이전에는 블록을 사용하여 웹사이트의 콘텐츠 영역을 편집할 수 있었습니다. 이제 전체 사이트 편집을 사용할 때 사이트의 모든 섹션이 블록으로 간주됩니다.

이러한 상당한 개선 덕분에 사용자는 이제 단일 플랫폼에서 페이지 및 전역 요소와 상호 작용할 수 있습니다. 또한 새로운 테마 구성 파일과 개발 도구를 추가했습니다.

WordPress를 최신 버전으로 업데이트한 후 Twenty Twenty-Two와 같은 FSE 테마를 활성화해야 합니다. 그 후에는 구텐베르크 블록만 사용하여 전체 웹사이트를 구축할 수 있습니다.

FSE는 어떻게 당신을 도울 수 있습니까?

전체 사이트 편집 덕분에 WordPress 웹 사이트를 구축하고 개발하는 것이 그 어느 때보다 쉬워졌습니다. 전역 요소와 페이지 업데이트는 모두 동일한 편집기를 사용하여 수행할 수 있습니다.

그리고 글로벌 요소는 무엇입니까? 할당되면 전체 웹 사이트에서 전역 요소, 컨테이너 및 열을 사용할 수 있습니다.

이 혁신적인 기술을 사용하면 웹 페이지나 특정 페이지를 편집할 수 있어 시간을 절약할 수 있습니다. 편집할 때 실시간으로 모두 볼 수 있기 때문에 무슨 일이 일어나고 있는지 알아보기 위해 편집자 사이를 전환할 필요가 없습니다. 결과? 페이지와 글로벌 수준에서 동시에 작업하면 웹 사이트 디자인이 향상됩니다.

WordPress 6.0 릴리스에는 기본적으로 FSE가 활성화되어 있지 않습니다. 따라서 WordPress 6.0 이전 버전을 사용하는 동안 전체 사이트 편집 기능을 활용하려면 FSE 테마를 활성화하기 전에 먼저 WordPress를 업데이트해야 합니다. 사이트의 대시보드는 이 모든 것을 처리하는 곳입니다.

WordPress 환경이 다시 한 번 진화하고 있습니다.

WordPress에서 이러한 유형의 변경은 이전 기간에 발생했습니다. 우리는 모두 약 3년 전에 구텐베르크를 알게 되었습니다(최근 몇 년 중 하나가 갑자기 사라졌다는 사실 때문에 기억하기 어렵습니다). 이제 블록 편집기로 참조할 수 있습니다.

그러나 초기에 WordPress 코어에 통합되었을 때 코드명 Gutenberg가 주어졌습니다. 변화는 어렵다. 따라서 대부분의 사람들은 약간의 기이한 반응을 보였습니다. 글쎄, 거의 모든 사람. 몇 년 후 오늘날 구텐베르그는 합리적으로 도움이 되고 자주 사용하기 좋으며 지속적으로 발전하는 것으로 인식되고 있습니다. 이 때문에 우리는 이 변화가 성공적일 것이라고 확신합니다. 그러나 변화는 이전보다 더 중요합니다.

초점 이동: 사용자에서 빌더로

이러한 블록 편집기가 처음 도입되었을 때 개발자는 자료를 생성하는 방식을 변경했습니다. 블로그 게시물을 제작하는 사람들에게는 웹 사이트를 만들고 웹 페이지를 개발하는 사람들만큼 파괴적이지 않았습니다. 블록으로의 전환은 사용자에게 유리했으며 재료 블록을 정의한 다음 사이트의 어느 곳에서나 동적으로 배치하는 기능과 같은 많은 흥미로운 기능이 뒤따랐습니다. 이제 누구나 코드를 사용하지 않고도 이 작업을 수행할 수 있습니다.

그러나 이 변화는 조금 다릅니다. 전체 사이트 편집으로 변경된 것은 단순히 사이트를 수정하는 방법이 아닙니다. 웹사이트의 기본 프레임워크와 관련이 있습니다. 여기에는 머리글이나 바닥글만 정의된 것이 아닙니다. 그것은 테마의 구성 요소와 관련이 있습니다. 즉, FSE는 결국 사용자에게 이익이 되는 것이지만 현재로서는 웹 페이지를 만드는 사람과 테마를 만드는 사람 모두를 위한 빌더를 위한 개선에 중점을 둔 것처럼 느껴집니다.

페이지 빌더를 사용하든, 즉 최고의 멤버십 웹 사이트 빌더 중 사용하기 쉬운 플랫폼으로 사이트를 시작하거나 구축하는 프로젝트를 완료하든, 많은 사람들이 이 단계에 익숙해졌습니다. 귀하의 페이지는 귀하가 원하는 대로 디자인될 수 있습니다. 그러나 나중에 성능 문제를 알게 됩니다. Google은 순위를 낮추고 DOM이 너무 방대하다고 말했습니다(무엇이든 간에). 성능이 가장 중요하다는 사실을 모두 알고 있으므로 지금이 FSE와 FSE가 귀하가 만드는 웹 사이트를 어떻게 변화시킬 수 있는지에 대해 자세히 알아볼 수 있는 완벽한 시간입니다.

그렇다면 전체 사이트 테마를 구축하는 것이 중요한 이유는 무엇입니까?

Beaver Builder는 Elementor보다 먼저 나왔습니다. 기억하시나요? 많은 사람들이 비즈니스 고객을 위한 실질적인 웹 사이트를 만들기 위해 일한 회사에서 또는 스스로 사용했습니다. 그러나 그들은 다른 제품인 Beaver Theer가 필요했습니다. 그렇지 않으면 웹 페이지(또는 게시물)의 머리글과 바닥글을 수정해야 할 때 맞춤(동적) 머리글과 바닥글을 지원하는 테마를 제공해야 했습니다.

Blocksy, Kadence 및 Astra와 같은 테마가 이러한 기능을 개발하기 시작했을 때 흥미진진했습니다. 그러나 그것은 또한 일부 잠금으로 이어졌습니다. 고객이 웹사이트에 플러그인을 설치한 후 테마나 페이지 빌더와 호환되지 않는다는 사실을 알게 됩니다.

갑자기 모든 사람들이 손가락을 가리키고 있습니다. 테마 회사는 그것이 자신이 아니라고 주장합니다. 페이지 빌더에 따르면 그들도 아닙니다. 뭔지 맞춰봐? 게임의 새로운 플레이어인 호스팅 회사는 자신이 아니라고 주장합니다. 처음에 부지를 건설한 건축업자(계약자 및 대행사)가 궁극적으로 비난을 받았습니다.

동일한 페이지 빌더가 생성한 코드 덕분에 사용자가 이러한 페이지가 로드되는 속도에 대해 불평하기 시작할 때도 동일한 일이 발생했습니다. 에이전시와 프리랜서는 비판을 받았습니다.

해결책

전체 사이트 사용자 지정을 지원하는 차단 테마에 대한 이러한 변경은 웹 사이트 생성 방식의 근본적인 변화를 나타냅니다. 이 변경으로 페이지와 웹 사이트 전체의 모든 요소는 콘텐츠, 메뉴, 사이드바, 머리글 및 바닥글과 같은 블록입니다. 각 블록. 따라서 테마는 결과적으로 더 가벼워질 수 있습니다.

테마는 여전히 전체 사이트에 걸쳐 블록에 대한 보편적인 스타일을 통합하거나 인쇄상의 오류를 수정하는 것과 같은 몇 가지 작업을 완료해야 합니다. 개발자는 새로운 theme.json 파일에서 모든 것을 구성할 수 있습니다. 그러나 매개변수 설정에만 사용되는 것은 아닙니다. 또한 개발자가 고객이 편집기를 사용하는 방식을 변경하는 방법이기도 합니다.

또한 테마에 UI 요소가 많지 않습니다. 사용자 정의 빌더를 사용하여 익숙한 것의 다음 반복이 현재의 JSON 구성기에 의해 구동될 것이라고 쉽게 상상할 수 있습니다.

간단히 말해서, 이것은 차세대 테마이며 결국 사용자가 그러한 새로운 테마로 수행할 수 있는 것을 제한할 수 있는 수단입니다.

모든 것을 논리적으로 이해하는 방법?

흥미진진해 보여도 이 문제를 어떻게 해결할지 결정하는 것이 더 큰 어려움입니다. 아주 단순한 것으로 판명된 참신한 개념을 개발하고 싶어하는 사람은 아무도 없습니다. 아무도 사용자를 짜증나게 하는 완전히 새로운 테마를 개발하고 싶어하지 않습니다.

당신은 '새로움'의 힘으로 '시도와 진실'의 편안함을 원합니다. 그리고 솔루션보다 더 많은 질문이 있습니다 ...

블록 테마 통합 및 구성을 위한 개발자 과정을 찾고 있습니다.

블록 테마 및 FSE 구축에 대해 자세히 이해해야 하는 모든 것을 설명하는 과정을 수강한다고 상상해 보십시오. 다른 항목에 추가하여 다음 14개 항목을 참조합니다.

• 테마 개발에 어떤 영향을 미치는지 보려면 전체 사이트 편집에 대해 알아보세요.
• 기본 인덱스 템플릿을 만든 다음 블록을 사용하여 데이터베이스에서 게시물을 검색합니다.
• 한 줄도 코딩하지 않고 전체 블로그 홈 템플릿을 구현합니다.
• 테마의 머리글과 바닥글을 추가해야 합니다.
• 전체 사이트 편집에서 탐색 메뉴를 처리하는 방법을 이해합니다.
• theme.json 파일을 사용하여 블록 편집기 기본 설정을 미리 정렬하는 방법을 알아봅니다.
• 내장된 패턴 컨트롤을 사용하여 다양한 레이아웃을 만드는 방법을 알아보세요.
• theme.json을 사용하여 보편적인 타이포그래피와 색 구성표를 적용합니다.
• 간격 컨트롤을 사용하여 패딩 및 여백을 관리합니다.
• 설정이 테마와 일치하도록 블록 편집기를 설정하는 방법을 알아봅니다.
• 글꼴 선택, 그라디언트, 색상 팔레트 및 기타 사용자 정의 옵션을 추가합니다.
• 클라이언트가 기본 설계와 얼마나 다를 수 있는지 제한하려면 블록에서 바람직하지 않은 사용자 지정 선택을 제거하는 방법을 배우십시오.
• 귀하와 귀하의 클라이언트가 페이지를 더 빨리 구축하는 데 도움이 되는 패턴을 사용하는 방법을 알아보세요.
• 다른 템플릿에서 블록 구성 요소를 다시 사용하지 않도록 템플릿 요소를 활용합니다.

그것은 배울 교훈의 인상적인 목록입니다. 좋은 소식은 지식 전달에만 초점을 맞춘 교육이 아니라는 것입니다. 이 훈련에서 손가락과 손톱을 더럽히도록 권장합니다. 연습은 그것을 완벽하게 만듭니다.

그리고 이봐, 당신은 그것을 상상할 필요가 없습니다. 이것은 멋진 소식입니다. 프로그램이 생성됩니다. 모든 설정이 완료되었습니다. 비록 해당 글의 의도된 주제는 아니었지만, 글에 대한 정보를 수집하다가 우연히 마주쳤기 때문에 공개하도록 하겠습니다. 워드프레스 전문가들이 인정하는 유명 개발자 ​​Frank Klein이 과정을 만들었습니다.

여러분, 블록 테마를 만들고 FSE를 하는 데 행운을 빕니다!