단일 JSON 파일로 블록 기반 WordPress 자식 테마 디자인하기

2008년에 첫 테마 샵을 열었을 때부터 지금까지 그저 땜질하는 사람이 되기까지, 제 계획은 항상 CSS Zen Garden의 틀에서 하나의 테마를 만드는 것이었습니다. 이것은 디자이너가 CSS만으로 사이트를 조작할 수 있는 방법을 보여주기 위해 Dave Shea가 2000년대 초에 시작한 프로젝트였습니다. HTML은 그대로 유지되지만 디자인은 무엇이든 될 수 있습니다.

나는 여러 프로젝트를 통해 그 목표를 여러 번 달성했습니다. 기술적으로 내가 필요한 것은 WordPress 테마의 건축학적으로 건전한 마크업과 자식 테마의 사용자 지정 CSS뿐이었습니다.

개념은 간단했지만 시간이 지남에 따라 내 비전이 바뀌었습니다. 저는 이러한 유형의 어린이 테마를 더욱 쉽게 디자인할 수 있는 무언가를 만들고 싶었습니다. 따라서 테마 디자인 영역에서 WordPress의 도구 부족 문제를 해결하기 위해 맞춤형 시스템을 구축했습니다. 너무 자랑은 아니지만 편리한 방법을 만든 것 같은 느낌이 들었습니다. 그들은 하위 테마 디자이너가 글꼴 패밀리 이름 및 색상 코드와 같은 값을 구성 파일에 연결할 수 있도록 허용했습니다. 이들 중 대부분은 사용자 지정 프로그램을 통해 최종 사용자가 덮어쓸 수도 있습니다.

2018년까지 나는 이미 내가 만든 최고의 WordPress 테마인 나의 대작이 될 작업에 몰두하고 있었습니다. 나 역시 마지막이 될 계획이었다. 나는 한동안 게임에서 나갈까를 생각했었다. 그러나 이것은 내가 통과해야 하는 프로젝트였습니다.

그런 다음 새로운 블록 편집기가 모든 것을 날려 버렸습니다. 출시 전에 몇 달 동안 작업했지만 테마 개발이 결코 같지 않을 것이라는 것을 알고 있었습니다. 구텐베르그 프로젝트는 계속해서 성숙해지고 워드프레스의 미래를 재편할 것입니다.

나는 결국 내 테마를 시작했습니다. 새로운 블록 시스템을 지원하는 최초의 상용 제품 중 하나였습니다. 하지만, 나도 속상했다.

이것은 초기 블록 편집기 시절이었습니다. 3년 또는 그 이상 후에 우리가 무엇을 보게 될지 아무도 몰랐지만, 조금만 관심을 기울이면 테마가 당시와는 많이 다른 것으로 진화할 것이라는 것을 알 수 있었습니다. 나는 짧은 시간에 관련이 없어질 테마 시스템을 구축하는 데 1년 이상을 보냈습니다. 물론, 저는 우리가 이 목적지에 훨씬 더 빨리 도착했을 것이라고 생각했습니다.

WordPress 5.9는 전체 사이트 편집의 최종 하위 구성 요소를 제공합니다. 여기에는 후드 아래에 있는 블록 테마에 대한 지원이 포함됩니다. 설치한 사용자는 사이트 편집기와 전역 스타일 인터페이스를 통해 사용자 정의할 수 있습니다.

나를 가장 흥분시키는 것은 여전히 ​​13년 전 매일 아침 나를 깨운 것, 바로 어린이 테마다.

블록 하위 테마는 몇 달 동안 Gutenberg 플러그인에서 부분적으로 작동했습니다. 그러나 내가 가장 기대했던 기능은 일주일 전까지만 해도 준비되지 않았습니다. 새 패치를 사용하면 하위 테마가 상위 테마의 theme.json 파일의 단일 값을 덮어쓸 수 있습니다. 기본적으로 두 파일이 병합되어 하위 항목이 우선 적용됩니다.

나는 왜 이 기능에 열광했는가? 그것은 내가 몇 년 전에 구축한 것과 같은 시스템이기는 하지만 더 좋았기 때문입니다.

Gutenberg의 개발 버전에서 이 땅을 본 후 가장 먼저 한 일은 내가 손대고 있는 사용자 정의 테마를 로드하는 것이었습니다. 재미와 교화를 위해 구축한 프로젝트입니다.

그런 다음 코드 편집기에서 새 프로젝트를 만들었습니다. 필요한 style.css 파일을 추가하고 적절한 헤더 필드를 연결했습니다. 그 이상은 필요하지 않습니다. 내 자식 테마의 디자인은 완전히 다른 기능에 의존합니다.

나는 자식 테마의 루트 수준에서 theme.json 을 추가했고 오랫동안 테마를 가지고 가졌던 것보다 더 많은 재미를 갖기 시작했습니다.

가을색 몇 가지와 재미있는 제목 글꼴을 골랐습니다. 몇 분 안에 테스트 설치 전체에 새로운 페인트 코트가 튀었습니다. 디자인은 혁신적이거나 그런 것이 아니었습니다. 나는 단지 몇 가지 값을 연결하여 내 디자인을 변형하는 것이 얼마나 쉬운지 놀랐습니다.

이것은 내가 항상 동경했던 유형의 어린이 테마입니다. 다양한 계절과 휴일에 맞춰 테마의 디자인 요소를 전환할 수 있는 기능을 원합니다. 그리고 저는 이 어린이 테마를 다른 사람들과 공유할 수 있기를 원합니다.

내가 말했듯이, 나는 이전에 그러한 자식 테마 방법을 구축했습니다(저는 JSON 대신 PHP를 사용했습니다). 그러나 이것은 표준 블록 시스템에 의존하기 때문에 훨씬 더 강력하며 소수의 사람들만 사용할 수 있는 사용자 정의가 아닙니다.

일부 사용자는 왜 하위 테마를 만드는 대신 사이트 편집기를 통해 이러한 변경을 수행하지 않았는지 묻습니다. Rich Tabor는 본질적으로 오늘 일찍 Twitter에서 동일한 질문을 제기했습니다. "테마가 전역 스타일을 통해 수정할 수 있는 JSON 및 블록 템플릿으로 구성된 경우 하위 테마는 무엇을 위한 것입니까?"

블록 테마를 설치하고 몇 가지 색상 조정을 수행했다고 가정해 보겠습니다. 이제 크리스마스가 다가오면 이것을 혼합하고 싶다고 가정해 봅시다. 몇 가지 색상을 넣고 축제 휴일 글꼴을 찾으십시오. 이러한 변경을 수행하면 사용자 사용자 정의가 활성 테마를 기반으로 저장되기 때문에 시즌이 종료될 때 이전 디자인이 더 이상 존재하지 않습니다. 물론 이전 설정을 모두 기록해 두고 나중에 다시 변경할 수 있습니다. 그러나 하위 테마를 통해 수행한다는 것은 언제든지 테마를 전환할 수 있다는 것을 의미합니다. 내 이전 설정은 그대로 유지됩니다.

아마도 이것은 매우 극단적인 경우일 것입니다. 요즘 누가 계절에 따라 디자인을 변경하고 있습니까?

흥미로운 부분은 하나의 JSON 파일로 만든 자식 테마를 다른 사람들과 공유할 수 있다는 것입니다.

어린이 테마는 WordPress에 기능이 도입된 이후로 저의 열정이었습니다. 어떤 면에서는 많이 바뀌지 않았습니다. themers는 여전히 부모의 템플릿을 덮어쓸 수 있습니다. 원하는 경우 사용자 정의 CSS를 계속 추가할 수 있습니다. 그러나 이제는 단일 표준화 파일에서 설계의 모든 부분을 구성할 수 있습니다. 그것은 내 개발자의 모자를 다시 쓰고 하나 더 테마를 구축할 가치가 있는 것입니다.

또한 디자인 요소를 공유하는 동일한 이점이 있는 어린이 테마 없는 미래도 봅니다.

블록 패턴 디렉토리는 이미 잘 구축된 워드프레스 테마와 함께 작동해야 하는 레이아웃을 제공합니다. 그러나 미래에 분리할 수 있는 다른 디자인 구성 요소가 있습니다.

나는 WordPress가 Color Lovers가 제공하는 것과 같은 설치 가능한 색상 팔레트를 가질 수 있는 미래를 상상합니다. 새로운 테마를 찾지 않고도 디렉토리를 탐색하고, 설치하고, 색 구성표를 변경하기만 하면 됩니다. 최근 Adrian 플러그인과 유사한 것이 글꼴에 대해 동일한 목적을 제공할 수 있습니다. 커뮤니티에서 향후 고려할 사항입니다. 이 시점에서 어떤 아이디어도 테이블에서 벗어나서는 안 됩니다.

현재로서는 자식 테마의 모든 권한을 마음대로 사용할 수 있어 기쁩니다. 이번 주에 Gutenberg 11.8, 올해 말 WordPress 5.9에 변경 사항이 적용됩니다.