블록 편집기로 음악 아티스트 WordPress 테마 홈페이지 다시 만들기

매주 내가 가장 좋아하는 활동 중 하나는 최신 테마를 정독하여 WordPress 테마 디렉토리에 있는 것입니다. 종종 흥미로운 디자인 개념이 있습니다. 그러나 대부분의 경우 홈페이지 디자인이 블록 편집기 대신 테마 옵션에 의존한다는 사실을 알고 실망했습니다.

편집기에는 몇 가지 디자인 제한 사항이 있지만 테마 작성자는 탐색할 여지가 많습니다. 훨씬 적은 코드 작업으로 이러한 사용자 정의 홈페이지 디자인 중 일부를 수행할 수 있는 충분한 능력이 있습니다.

Music Artist는 내 눈을 사로잡는 최신 테마 중 하나였습니다. 나는 큰 영웅 영역과 테마 디자인의 여러 요소를 좋아했습니다. 설치 후 홈페이지 레이아웃이 테마 옵션을 통해 처리된다는 것을 깨달았습니다. 그러나 테마 작성자는 이 페이지를 완전히 블록으로 만들고 각 섹션 또는 전체 디자인을 블록 패턴으로 래핑할 수 있습니다.

이것은 모두 블록 편집기로 수행할 수 있습니다.

나는 내가 설교하는 것을 연습하기 위해 몇 시간을 가지고 블록 편집기에서 직접 테마에 대한 홈페이지 데모를 다시 만들었습니다. 코드가 필요하지 않습니다. 몇 가지 까다로운 부분이 있었는데 그 부분에 대해 설명하겠습니다. 그러나 빌드가 그렇게 어렵지 않았고 테마가 블록 편집기를 지원했다면 더 쉽게 만들 수 있었을 것입니다.

계획은 뮤직 아티스트 테마가 설치된 사용자 정의 페이지를 복제하는 것이었습니다. 그러나 테마의 블록 지원 부족으로 인해 몇 가지가 근본적으로 깨졌습니다. 대신 글꼴, 색상 등 디자인이 유사한 테마를 활성화했습니다. Ariele Lite가 블록 편집기와 함께 작동한다는 것을 이미 알고 있었기 때문에 블록 편집기로 빌드할 수 있는지 확인하는 것이 합리적이었습니다. 탄탄한 기반이 된 셈이다.

다음은 오리지널 뮤직 아티스트 테마 홈페이지(첫 번째)와 Ariele Lite 테마를 통한 블록을 사용한 재현(두 번째)을 비교한 것입니다.

간격, 색상, 타이포그래피 및 기타 요소에 분명히 차이가 있습니다. 이것의 대부분은 테마 디자이너의 스타일 선택에 달려 있습니다. Editor Plus와 같은 플러그인을 통해 더 많은 시간과 수정 사항이 주어지면 더 가까운 복제본을 얻을 수 있을 만큼 충분히 조정할 수 있었습니다. 그러나 내 목표는 가능한 한 핵심 WordPress에 가깝게 고정하는 것이 었습니다. 기술적으로 최신 버전의 Gutenberg 플러그인이 설치되어 있으므로 WordPress에 아직 도착하지 않은 항목이 몇 가지 있을 수 있습니다.

이 실험에서는 다음을 사용했습니다.

• 워드프레스 5.7 베타
• 구텐베르크 10.1 베타
• 아리엘 라이트 1.0.8
• 에디터 플러스 2.6

Group 블록에서 몇 가지 여백을 조정하려면 Editor Plus만 필요했습니다. 그대로 둘 수도 있었지만 더 가깝게 재현하기 위해 페이지의 섹션 사이의 간격을 줄이고 싶었습니다. 앞으로 WordPress에서 더 많은 간격 컨트롤을 볼 수 있으므로 이것을 공정한 절충안으로 생각했습니다.

이 실험은 테마 작성자에게 블록 시스템으로 맞춤형 디자인을 구축할 수 있다는 것을 보여주기 위한 것입니다. 구식 테마 옵션을 삭제하면 개발자의 코드 작업이 훨씬 줄어들어 스타일 지정에 더 집중할 수 있습니다. 또한 최종 사용자는 사용자 지정 요소를 추가하거나 원하지 않는 부품을 제거하는 등의 유연성을 높일 수 있습니다. 여기에는 개별 블록 수준의 스타일 옵션도 포함되지 않습니다.

두 번째 목적은 사용자에게 이러한 홈페이지 중 일부를 코드 없이 만들 수 있음을 보여주는 것입니다. 블록 편집기와 균형 잡힌 블록 준비 테마를 사용하면 꽤 멀리 갈 수 있습니다.

뮤직 아티스트 홈페이지 재창조

Ariele Lite의 기반으로 시작한다는 것은 디자인이 박스형이라는 것을 의미했습니다. 그러나 테마에는 사용자가 전체 페이지를 디자인할 수 있는 사용자 정의 "빈 캔버스" 페이지 템플릿이 있습니다.

블록 편집기의 한계로 인해 완전히 재현하지 못한 요소가 있었습니다. 다른 부분은 테마에서 오는 문제 또는 디자인 선택이었습니다.

다음은 홈페이지의 각 섹션을 어떻게 구축했는지에 대한 일반적인 개요입니다. 레이아웃 관련 개념에 초점을 맞추면서 색상 추가 및 글꼴 크기 변경과 같은 부분은 건너뛰겠습니다.

영웅 섹션

WordPress의 Cover 블록은 여전히 ​​내가 가장 좋아하는 블록 중 하나입니다. 사용자가 많은 작업 없이 영웅 섹션을 만들 수 있습니다. 저는 원래 데모에서 배경 이미지를 가져와서 넣었습니다. 저는 이 여정에서 진정한 첫 걸음을 내디뎠습니다.

그런 다음 제목 블록을 추가하여 크기를 약간 조정했습니다. 나는 Spacer와 Social Icons 블록으로 그것을 따랐다.

나는 즉시 두 개의 걸림돌을 쳤다. 첫 번째는 WordPress에 iTunes 소셜 아이콘이 포함되어 있지 않다는 것입니다. 이에 대한 구텐베르크 리포지토리에서 미해결 문제를 찾을 수 없습니다. 아마도 자주 요청되는 기능이 아닐 것입니다. 두 번째 문제는 Social Icons 블록이 소셜 네트워크 레이블을 출력하지 않아 디자인의 해당 부분을 복제할 수 없다는 것이었습니다.

디스코그래피 섹션

이 섹션을 처리하는 몇 가지 방법이 있습니다. 나열된 앨범이 사용자 정의 포스트 유형이라고 가정하면 이 앨범의 플러그인이 무엇이든 이상적으로는 출력을 위한 사용자 정의 블록이 있습니다. 사용자는 블로그 게시물 또는 향후 쿼리 블록인 경우 최신 게시물 블록을 사용할 수도 있습니다.

간단하게 하기 위해 Columns 블록을 추가하고 3개의 연결된 이미지를 삽입하기로 결정했습니다.

미디어 및 텍스트 섹션

이 섹션에 대한 내 계획은 핵심 미디어 및 텍스트 블록을 사용하는 것이었습니다. 그러나 자체 호스팅 미디어만 지원합니다. 유튜브 영상을 퍼갈 수 있는 방법이 없었습니다.

대신 Columns 블록을 사용했습니다. 왼쪽 열에는 YouTube 동영상 URL을 놓았습니다. 오른쪽에 Heading, Paragraph, Buttons 블록을 추가했습니다.

비디오 섹션

비교적 간단하게 재현할 수 있는 섹션이었습니다. 레이아웃의 경우 머리글 블록과 열 블록만 사용했습니다. 그런 다음 YouTube에서 동영상 링크 몇 개를 가져와 URL을 편집기에 붙여넣었습니다.

최신 게시물 섹션

제가 레이아웃에서 가장 고민했던 부분입니다. WordPress는 그리드에서 설정할 수 있는 최신 게시물 블록을 제공합니다. 그러나 Ariele Lite는 열을 올바르게 처리하지 못했습니다.

그래서 좀 속였습니다.

곧 출시될 전체 사이트 편집 기능을 지원하는 블록 기반 테마로 전환했습니다. 그런 다음 게시물의 열을 더 많이 제어하기 위해 쿼리 블록을 삭제했습니다. 그 후 Ariele Lite 테마로 다시 전환했습니다.

원래 디자인은 현재 최신 게시물 블록으로 수행할 수 있으므로 블록 편집기 문제가 아닙니다.

바닥글 사이드바 섹션

기술적으로 바닥글 사이드바는 홈페이지 디자인 범위를 벗어납니다. 전체 사이트에 걸쳐 있는 테마 바닥글의 일부입니다. 그러나 이미 롤에 있었기 때문에 추가하기로 결정했습니다.

이 섹션에는 열 블록이 필요합니다. 그 시점부터 각 열에 대한 표제 블록을 드롭하는 문제입니다. 단락, 달력 및 갤러리 블록을 추가하여 3개의 "위젯"을 재현했습니다.

Ariele Lite의 캘린더 블록 디자인은 밝은 색상의 배경에서 더 잘 작동합니다. 제가 간과한 작은 통증이었습니다. 장기적으로 WordPress는 누락된 블록에 대한 디자인 컨트롤을 제공해야 합니다.