이것이 현대 WordPress 테마 개발이라면 가입하십시오

나는 잠시 동안 내 두뇌에서 덜그럭거리는 블록 테마 아이디어를 가지고 있었습니다. 몇 달 동안 나는 단일 페이지 프로필/카드 테마를 만드는 것을 고려했고 마침내 주말에 앉아서 작업을 시작했습니다. 부분적으로는 그냥 재미삼아 이 일을 하고 싶었습니다. 그러나 내 또 다른 부분은 개발자 관점에서 블록 테마가 어떻게 진행되었는지 확인하고 싶었습니다.

이 테마에 대한 영감은 몇 명의 다른 사람들과 프로젝트에서 나왔습니다. 2020년 10월부터 Kjell Reigstad의 2열 랜딩 페이지 실험이 이를 촉발했습니다. 최근에 Ask Bartender 칼럼에 간결하고 아늑한 테마에 대한 질문을 던지면서 저의 창의력이 다시 샘솟았습니다. 그러나 테마 팀이 Carolina Nymark의 유사한 블록 테마인 Miniblock OOAK를 승인하는 것을 보고 규칙이 이제 이와 같은 것을 세상에 내놓을 수 있을 만큼 충분히 느슨해졌습니다.

문제 중 하나는 블록 기반 테마가 이전에 저를 불태웠다는 것입니다. 저는 작년에 귀중한 여가 시간에 새 프로젝트를 구축하는 데 몇 달을 보냈고 몇 주 후에 Gutenberg 플러그인 업데이트로 인해 진행 상황이 지워졌습니다. 알파 수준 소프트웨어의 불안정한 기반으로 인해 상황이 바뀔 수 있다는 것을 알고 있었지만 여전히 수축 중이었습니다. 말할 필요도 없이, 나는 그것을 다시 집어들 동기를 결코 찾을 수 없었다.

워드프레스 5.9와 더욱 안정적인 블록 테마 시스템이 며칠 앞으로 다가왔습니다.

나는 블록 테마를 깊이 배우고 싶었다. 내가 할 수 있는 유일한 방법은 처음으로 돌아가는 것뿐이었다. 나는 평범한 HTML, CSS 및 PHP의 기본 요소를 다시 알아야 했습니다. 그리고 내가 알고 있다고 생각했던 모든 것을 잊어버리십시오. 현대적인 웹 위에 구축하십시오. 나는 다시 멍청이 가 되어야 했다.

기술적으로 기억상실증을 일으키지 않고 내가 아는 모든 것을 잊는 것은 불가능합니다. 그러나 아마도 – 아마도 – 웹의 구성 요소로 돌아갈 수 있을 것입니다.

내 /node_modules 폴더에 있는 900개 이상의 프로젝트에 걸친 복잡한 종속성 웹 없이 WordPress 테마를 실행할 수 있습니까?

Composer를 통해 기본 PHP 스크립트를 충실히 가져오지 않고 무언가를 만들 수 있습니까?

제가 WordPress 테마를 만들 수 있습니까?

첫 번째 단계는 문 앞에서 나의 자아를 확인하는 것이었습니다. 수년간의 현대적인 도구와 이를 기반으로 구축된 워크플로를 따로 떼어놓았을 때, WordPress의 뿌리에 경의를 표하지만 고급 빌드를 위해 확장할 수 있을 만큼 충분히 유연한 아름답고 단순한 테마 시스템을 발견했습니다.

이것은 도중에 딸꾹질이 없었다는 말은 아니지만 우리는 그것에 대해 충분히 듣습니다. 또한 프로그래밍/개발을 문제 해결의 예술이라고 생각합니다.

정신없는 주말을 보냈습니다. 나는 금요일과 토요일 밤 사이에 4시간, 5시간 정도의 숙면을 취했습니다. 아마도 나는 너무 많은 프로젝트와 진행 중인 일이 내 마음을 막을 수 없었을 것입니다. 그럼에도 불구하고 나는 일요일 아침 3시 30분에 다시 일어나 피곤했지만 꼭 필요한 Z를 잡을 수 없었습니다. 그래서 코드 편집기를 열고 새 테마 프로젝트를 만들었습니다.

한 시간 안에 작동했습니다. 트위터를 통해 친구들과 둘로 나누어 공유할 수 있을 정도의 상태였습니다.

다음은 현재 홈페이지의 스크린샷입니다. 기술적으로 유일한 페이지입니다. 첫 번째 커밋을 라이브로 푸시한 이후로 조금 수정했습니다.

이것은 "반사"라는 블록 패턴입니다. 호수 사진에 반사된 산은 WordPress Photos에서 가져온 것이며 Anne McCarthy가 촬영했습니다. 배경에 사용된 그라디언트도 이미지의 색상을 반영한 것인데, 좋은 터치라고 생각했습니다.

테마에는 몇 가지 다른 패턴이 포함되어 있습니다. 목표는 사용자가 프로필 카드에 대해 즐겨찾기를 선택하고 콘텐츠를 사용자 지정하고 저장할 수 있도록 하는 것입니다. 쉬워요. 나는 이것으로 걸림돌을 쳤고, 이는 포스트의 끝에서 자세히 설명합니다. 대부분의 경우 모든 것이 잘되었습니다.

내가 경험에서 배운 것

블록으로 WordPress 테마를 만드는 것은 쉽습니다. 대부분의 사물은 표준 규칙 집합에 따라 구조화되고 작동합니다. 템플릿은 여기로 이동합니다. 부품이 거기로 이동합니다. 저쪽에 설정을 연결하십시오. 향후 WordPress 버전에서 더 많은 구조를 보게 될 것입니다.

내 코드 편집기와 로컬 WordPress 설치만 사용하여 테마를 처음부터 만들었습니다. 노드 모듈이 없습니다. PHP 라이브러리가 없습니다. 빌드 설정이 전혀 없습니다.

이 프로젝트가 완료되기 전에 이러한 것들을 사용할 것입니다. 일부 도구는 단순히 개발을 더 쉽게 만듭니다. 그러나 그것들이 필요하지 않거나 더 복잡한 PHP API에 뛰어들면서 진입 장벽이 낮아졌습니다.

모든 복잡한 부분을 처리할 수 있는 더 나은 시스템이 있는 2000년대 중반으로 돌아간 느낌이었습니다. 한 번은 거의 전적으로 디자인에 집중할 수 있었습니다.

기본 시스템에 문제가 많습니다. 넓게 정렬된 블록 주변의 추가 래퍼 요소와 같은 이상한 점이 여전히 편집기에 존재합니다. 그리고 여러 블록을 업데이트해야 합니다. 기존 Button 블록을 재사용하지 않는 File 블록을 보고 있습니다 .

기본적으로 단점이 있습니다. 테더로서, 당신은 그것들을 염두에 두고 작업하는 법을 배우거나 업스트림에서 수정 사항을 기다리거나 해결 방법을 찾기 위해 온전한 위험을 감수해야 합니다.

미완성 작품을 공유하는 게 서툴지만 증거도 보여줘야죠. 관심 있는 사람들은 적어도 내가 너무 미친 짓을 하기 전에 이 기사 날짜에 GitHub 리포지토리를 확인할 수 있습니다.

일부 테마 작성자는 내 프로젝트를 보고 너무 단순한 예제라고 생각할 수 있습니다. 그러나 나는 그것에 관한 모든 것을 완전한 주제에 쉽게 적용할 수 있었다. 크기에 관계없이 표준은 동일합니다.

주제가 무엇인지 다시 생각해봐야 할 것 같습니다. 블록 기반 테마가 너무 어리기 때문에 우리 모두는 약간의 실험을 해야 합니다.

놓친 기회

균형 잡힌 사용자 경험을 위해 놓친 기회를 설명하는 데 중요하기 때문에 이 부분에서 약간의 기술적인 설명을 드리겠습니다. 사이트 편집기는 고급 사용자를 위해 쉽게 구축할 수 있는 위치에 있습니다. 패턴은 덜 기술적인 사람들의 격차를 해소하는 데 도움이 되지만 충분하지 않습니다.

웹 페이지의 주요 섹션에 대해 생각해 보십시오. 머리글, 바닥글, 사이드바, 콘텐츠 및 그 하위 섹션과 같은 조각. 사용자로서 이미 화면에 있는 전체 콘텐츠 영역 디자인을 다른 콘텐츠 패턴으로 어떻게 교체합니까?

거기에 있는 패턴을 삭제하고 새 패턴을 삽입할 수 있습니다. 그러나 페이지의 섹션을 삭제하고 삽입하는 것은 고위험 작업입니다.

변경하려는 영역이 템플릿 부품인 경우 다른 영역으로 교체할 수 있습니다. 테마 작성자가 해당 영역에 대해 등록했다고 가정합니다. 이것은 저위험 작업이며 사이트 편집기의 최고의 기능 중 하나입니다.

예를 들어 다음은 Twenty Twenty-Two가 "바꾸기" 도구 모음 메뉴 항목 아래에 나타날 때 등록하는 헤더 템플릿입니다.

그러나 이것은 테마의 전체 헤더 패턴 배열이 아닙니다. 총 18개가 있습니다. 나는 대부분의 최종 사용자가 그것을 결코 발견하지 못할 것이라고 상상합니다.

특정 템플릿 부품을 위한 패턴을 생성할 때의 단점 중 하나는 최종 사용자가 부품 전체를 새 패턴으로 교체하거나 변환할 방법이 없다는 것입니다.

테마 작성자는 PHP가 포함되어 있지 않다고 가정하고 패턴 코드를 템플릿 부분에 복사하여 작업을 복제할 수 있습니다. 또는 해당 부분을 만들고 Pattern 블록을 통해 관련 패턴을 가져올 수 있습니다.

 <!-- wp:pattern { "slug":"namespace/slug" } -->

이 접근 방식의 문제는 사이트 편집기가 "바꾸기" 드롭다운에 패턴 콘텐츠를 표시하지 않는다는 것입니다( 내가 방금 버그를 발견했나요? ):

해결책은 간단해야 합니다. 템플릿 부분에 등록된 패턴은 UI를 통해 상호 교환이 가능해야 합니다. 또는 패턴 블록을 사용하는 부품이 "바꾸기" 드롭다운에 올바르게 표시되어야 합니다.