WordPress의 전체 사이트 편집에 대한 조기 살펴보기

웹 개발자를 위한 실존적 질문은 다음과 같습니다. 웹 사이트의 콘텐츠 관리 시스템(CMS)과 디자인 사이에 어느 정도의 분리가 있어야 합니까?

많은 DIY 서비스(Wix, Squarespace 등)의 경우 웹사이트의 거의 모든 측면을 시각적으로 편집할 수 있습니다. 콘텐츠, 디자인, 레이아웃 등 원하는 대로 조정할 수 있습니다. 그리고 그렇게 하기 위해 코드를 이해할 필요가 없습니다.

그러나 일부 코드가 없는 페이지 빌더 제품을 제외하고 WordPress는 전통적으로 완전한 사이트 편집기와는 거리가 멀었습니다. 테마 사용자 정의 도구를 사용하면 사용자가 테마의 특정 측면을 변경할 수 있지만 개발자가 정의한 측면만 변경할 수 있습니다.

변경될 예정입니다. 전체 사이트 편집(FSE)을 통해 구텐베르크 블록 편집기를 사용하여 전체 웹사이트(테마 및 전체)를 편집할 수 있습니다.

이 새로운 기능은 WordPress 테마로 가능한 일에 혁명을 일으킬 수 있습니다. 그것으로, 나는 그것이 무엇을 할 수 있는지 일찍 살펴보고 싶었습니다. 여기 내가 찾은 것이 있습니다 ...

WordPress에서 전체 사이트 편집 설정

이 글을 쓰는 시점에서 전체 사이트 편집은 WordPress 코어에 병합되지 않았습니다. Gutenberg 플러그인을 통해 사용할 수 있는 베타 기능입니다. 먼저 플러그인을 가져와서 활성화하겠습니다.

그런 다음 호환되는 테마를 찾는 문제가 있습니다. Q는 FSE를 지원하는 첫 번째 WordPress 테마이며 이 실험의 캔버스 역할을 합니다. 무료 테마를 설치하고 활성화했으므로 이제 어떤 기능을 하는지 살펴볼 수 있습니다.

주목해야 할 또 다른 항목: 저는 이 모든 작업을 WordPress의 로컬 설치에서 수행하고 있습니다. 전체 사이트 편집과 관련하여 테스트해야 할 사항과 수정해야 할 버그가 많습니다. 따라서 아직 프로덕션 환경에 사용할 준비가 되지 않았습니다. 그에 따라 테스트하십시오!

초기 관찰

Q 테마를 활성화하면 WordPress에 몇 가지 눈에 띄는 차이점이 있습니다. 백엔드에는 이제 메뉴에 사이트 편집기 항목이 있습니다. 그리고 로그인한 상태에서 프런트 엔드를 탐색하면 관리자 표시줄에 사이트 편집 링크가 표시됩니다. 아, 그리고 전체 사이트 편집이 실험적이라는 경고 알림도 있습니다(이는 무시하겠습니다).

테마 자체는 매우 기본적이며 이상적입니다. 이것은 우리에게 더 쉽게 사용자 정의할 수 있는 경로를 제공합니다. 그것에 대해 생각할 때 복잡한 디자인을 분해하지 않고 다른 것으로 다시 구축하기를 원할 것입니다. 더 적은 것이 실제로 더 많습니다.

사이트 편집기 내부 엿보기

이제 해당 사이트 편집기에 대해 알아보겠습니다. 그것을 클릭하면 Gutenberg 블록 편집기가 열립니다. 그러나 이번에는 표준 빈 페이지 그 이상입니다. 대신 이제 머리글, 탐색(실험적 탐색 블록을 통해), 콘텐츠 영역 및 바닥글 등 모든 것에 액세스할 수 있습니다.

예상대로 이러한 항목을 변경하는 것은 블록을 클릭하고 작업을 시작하는 문제입니다. 개별 블록을 다른 것으로 변환하거나 편집하거나 삭제할 수도 있습니다. 블록을 재배치할 수도 있습니다. 예를 들어 사이트 제목 위에 탐색 메뉴를 배치하는 것은 쉬운 일이었습니다. 단일 열 제목 표제를 다중 열 레이아웃으로 교체하는 경우에도 마찬가지입니다.

하지만 더 있습니다. 화면 왼쪽 상단의 WordPress 로고를 클릭하면 사이트 편집기의 사이드바가 열립니다. 여기에서 테마 템플릿(예: 사이트의 색인 또는 게시물 템플릿) 또는 템플릿 부분(예: 머리글 및 바닥글 )을 보고 만들 수 있습니다. WordPress의 모양 메뉴를 통해서도 이러한 항목에 액세스할 수 있습니다. 사이트의 페이지, 게시물 및 분류 체계를 탐색하는 방법도 있습니다.

여기서 정말 좋은 점은 편집하려는 템플릿 부분만 분리할 수 있는 옵션이 있다는 것입니다. Theme > Template Parts 에서 헤더를 가져오면 블록 편집기에서 볼 수 있는 모든 것입니다. 그러나 전체 테마의 컨텍스트 내에서 편집하고 싶다면 초기 사이트 편집기 페이지에 머물면 됩니다.

새 템플릿 만들기

Gutenberg 블록 편집기에 익숙하다면 새 테마 템플릿을 만드는 것이 다소 간단할 것입니다. 이 과정은 다른 페이지나 게시물을 만드는 것과 매우 유사합니다. 사용 가능한 블록을 사용하여 원하는 레이아웃을 만들고 저장하세요.

한 가지 주목해야 할 점은 이 시점에서 사용자 지정 템플릿은 WordPress 템플릿 계층 구조 명명 규칙을 따라야 할 것으로 보인다는 것입니다. 즉, 사용자 정의 템플릿의 슬러그는 테마 내 해당 목적의 이름과 일치해야 합니다(끝에 .php 제외).

예를 들어 홈 페이지에서 사용할 템플릿을 빌드하려면 해당 슬러그의 이름을 front-page 로 지정해야 합니다. 회사 소개 페이지( yoursite.com/about-us/ )를 타겟팅하고 싶으십니까? page-about-us 의 슬러그가 있는 템플릿이 트릭을 수행합니다.

템플릿은 편집기의 오른쪽 상단에 있는 설정 메뉴를 통해 다운로드할 수 있습니다. 이렇게 하면 템플릿을 수동으로 장치에 저장한 다음 서버에 업로드하여 잠재적인 사고로부터 사용자를 보호할 수 있습니다.

템플릿 부분 활용

이전에 언급했듯이 WordPress 전체 사이트 편집을 통해 템플릿 부분을 편집하고 생성할 수 있습니다. 여기에는 사이트의 머리글과 바닥글이 포함되지만 다른 가능성도 많이 있습니다.

템플릿 부분을 만든 다음 블록을 통해 템플릿에 포함할 수 있습니다. 특정 페이지나 게시물에 템플릿 부분을 추가할 수도 있습니다.

여러 페이지 또는 게시물 유형에 특정 콘텐츠를 추가하려는 경우에 유용할 수 있습니다.

예를 들어, 개별 게시물과 아카이브 페이지 모두에 표시하려는 추천 게시물 블록에 대해 생각해 보십시오. 또는 하나 이상의 특정 템플릿을 사용할 때만 표시하려는 탐색 메뉴가 있을 수 있습니다.

템플릿 부분은 조건부 논리와 같은 고급 기술 없이도 이를 설정하는 수단입니다.

WordPress 테마의 미래에 대한 질문

전반적으로, 나는 전체 사이트 편집을 통해 이 경험에 대해 긍정적으로 느꼈습니다. 버그를 없애고 사용성을 개선하려면 아직 갈 길이 멉니다. 테마 지원도 큰 장애물이 될 것입니다. 그러나 이것은 매우 유용한 기능이 될 가능성이 있습니다.

그래도 마음에 떠오르는 몇 가지 질문이 있습니다.

전체 사이트 편집은 누구를 대상으로 합니까?

구텐베르크 블록 편집기에 대한 가장 중요한 주장 중 하나는 관련성을 유지해야 한다는 것이었습니다. DIY 시장의 경쟁자들은 사이트 구축에 대해 보다 시각적인 접근 방식을 취했으며 WordPress는 뒤쳐져 있었습니다.

따라서 전체 사이트 편집이 다음과 같은 사용자를 대상으로 한다는 것은 의미가 있습니다. a) 코드를 모르거나 사용하고 싶지 않습니다. b) 웹사이트의 대부분(전부는 아닐지라도) 요소에 대한 액세스를 원합니다.

웹 디자이너를 위한 내용은 무엇입니까?

몇 가지 이점이 있습니다. 예를 들어 헤더를 열면 클라이언트가 새 전화 번호나 주소를 빠르게 업데이트할 수 있습니다. 이렇게 하면 디자이너가 매우 기본적인 변경을 처리하지 않아도 됩니다.

그러나 웹 전문가가 잠그고 싶어하는 몇 가지 사항이 있습니다. 사이트 손상을 방지하기 위해 클라이언트 교정이 자주 수행됩니다. 레이아웃과 기능은 우리가 감수하고 싶지 않은 필수 요소입니다.

기존 테마 커스터마이저가 하는 것처럼 백엔드에서 편집할 수 있는 것과 편집할 수 없는 것을 쉽게 세부적으로 제어할 수 있는 방법이 있기를 바랍니다. 그렇지 않으면 이것은 걱정할 또 하나의 잠재적인 악몽이 될 것입니다.

전체 사이트 편집이 상업 테마 시장에 어떤 영향을 미칩니까?

이것은 보는 것이 흥미로울 것입니다. 현재 Gutenberg에 맞게 사용자 정의된 테마는 거의 없는 것 같습니다. 그들은 여전히 ​​고급 레이아웃을 위해 타사 페이지 빌더 플러그인에 의존하고 있습니다. 그리고 Divi 및 Beaver Builder와 같은 일부 제품에는 이미 자체 전체 사이트 편집 기능이 있습니다.

따라서 전체 사이트 편집의 채택이 느리더라도 놀라지 마십시오. 테마 개발자는 수요가 있고 혜택을 받을 수 있는 방법에 대한 명확한 표시가 모두 있을 때까지 유행에 뛰어들 것 같지 않습니다. 많은 기존 기능을 리팩토링해야 한다는 것은 말할 것도 없습니다.

제 생각에 개발자는 사용자의 유연성을 높이는 동시에 파손 위험을 최소화하는 방식으로 이를 구현해야 합니다. 이는 미리 만들어진(부분적으로 잠긴) 템플릿을 제공하고 사용자가 원하는 템플릿을 선택할 수 있도록 하는 형태를 취할 수 있습니다. 그러나 우리는 아직 게임 초반입니다.

더 원활한 WordPress

WordPress 생태계의 많은 부분이 단편적입니다. 여기 에서 테마를 가져오고 거기 에서 플러그인을 가져와서(그리고 거기 에서 저기 로) 모든 것이 잘 맞도록 하세요. 이것은 호소력의 일부이며 매우 잘 작동했습니다.

그러나 디자인 경험은 그 흐름으로부터 그다지 이익을 얻지 못했습니다. 테마의 모양과 레이아웃은 항상 어떤 식으로든 분리되었습니다. 템플릿 해킹을 의미하든 테마 커스터마이저를 사용하든, 관련된 많은 실행이 있습니다.

좋든 싫든 전체 사이트 편집은 디자인 프로세스를 통합하는 단계입니다. 이를 통해 단일 UI 내의 단일 위치에서 모든 것을 제작할 수 있습니다. 보다 원활한 경험이며 많은 사용자에게 혜택을 줄 것입니다.