2018 년 데뷔 이후 WordPress Block Editor (Gutenberg)는 웹 사이트 제작에 혁명을 일으켰습니다. CSS를 지원하는 테마에서는 사용할 수 있지만 블록 테마는 상당한 발전을 나타냅니다. 이 테마는 완전한 사이트 구성을 위해 블록 편집기를 활용하여 테마의 역할을 컨텐츠 제어에서 설계 지침으로 전환합니다. FSE (Full-Site Editing)로 알려진이 접근법은 사용자가 블록을 사용하여 전체 사이트를 구축 할 수 있습니다.
이 혁신적인 기술을 탐색합시다.
theme.json
블록 편집자의 진화는 사용자에게 크게 보이지만 Github에 대한 기본 개발은 지속적으로 진행되고 있습니다. 내 자신의 여정은 클래식과 블록 편집자를 모두 사용하는 것이었고, 심지어 핵심 플랫폼으로 돌아 오기 전에 개츠비와 프론티와 함께 헤드리스 워드 프레스에 빠져 들었습니다.
처음에는 Github의 실험 블록 기반 테마에 흥미를 느꼈으 며 최근에 개인 프로젝트에서 하나를 구현하기도하면서 적극적으로 탐색하기 시작했습니다. WordPress 5.9 ( "Joséphine")는 중추적 인 순간을 표시하여 전체 사이트 편집 및 블록 테마를 최전선에 가져옵니다. 반복적 인 기능이 이전에 존재했지만이 릴리스는 게임 체인저입니다. 이 기사는 실습 학습 경험과 개인 관찰을 공유합니다.
면책 조항 : 저는 블록 테마 전문가가 아니라 노련한 WordPress 사용자입니다. 저의 목표는 WordPress 5.9를 비판하는 것이 아니라 Block Editor의 실제 경험을 바탕으로 열린 마음을 가진 학습자의 관점을 제공하는 것입니다.
블록 테마를 탐구하기 전에 필수 용어를 명확히하겠습니다.
이것은 블록 기반 구조로 인해 적절하게 명명 된 WordPress 편집기를 나타냅니다. 각 요소 (텍스트, 이미지, 비디오 등)는 블록으로 모듈 식 페이지 레이아웃을 활성화합니다. 이것은 "클래식"편집기의 사전 정의 된 레이아웃 접근법과 대조됩니다. 블록 편집기는 단일 인터페이스 내에서 컨텐츠 및 레이아웃 편집을 통합합니다.
WordPress 문서에 의해 정의 된대로 블록 테마는 블록을 사용하여 모든 사이트 템플릿 (헤더, 바닥 글, 사이드 바 등)을 구성하여 게시물 컨텐츠를 넘어 블록 편집기의 도달 범위를 확장합니다. PHP 템플릿에 의존하는 클래식 테마와 달리 블록 테마는 사이트 편집기 및 theme.json 통해 스타일링 및 배열 된 블록 기반 HTML 템플릿을 사용합니다.
사이트 편집기 (종종 풀 사이트 편집 또는 FSE라고도 함)는 블록 기반 템플릿을 작성하고 관리하는 핵심 도구입니다. 응집력있는 인터페이스 내에서 다양한 템플릿, 템플릿 부품 및 스타일링 옵션을 편집 할 수 있습니다. 이것은 기존의 PHP 템플릿 기반 테마 개발을 시각적 블록 기반 접근법으로 대체합니다.
공식 WordPress 용어집은 추가 정의를 제공합니다.
블록 편집기는 클래식과 블록 테마와 함께 작동합니다. 클래식 편집기 (클래식 편집기 플러그인을 통해)를 사용할 수 있으며 역 호환성을 제공합니다. 처음에는 Gutenberg 플러그인을 통해 블록 편집기의 점진적인 소개와 나중에 WordPress Core에 통합되어 FSE의 길을 열었습니다.
실험 블록 테마는 2020 년 초부터 개발 중입니다. Github 테마 실험 저장소는 다양한 접근법을 보여줍니다. 210 명은 블록 스타일과 패턴을 통합하여 중요한 단계였습니다. 많은 테마에는 이제 블록 편집기 패턴과 스타일이 포함됩니다.
블록 테마는 클래식 테마와 크게 다릅니다. 클래식 테마는 마크 업을 위해 PHP 및 JavaScript에 의존하지만 블록 테마는 코어의 마크 업 및 기본 스타일을 활용합니다. 간단한 블록 테마에는 index.php , style.css , theme.json , templates/index.html 및 재사용 가능한 구성 요소를위한 parts 폴더가 포함될 수 있습니다.
템플릿은 종종 재사용 가능한 "템플릿 부품"(예 : 헤더, 바닥 글)을 통합하는 블록 그룹입니다. 이들은 페이지 레이아웃을 만들기 위해 조립됩니다.
사이트 편집기는 WordPress 웹 사이트를 설계하기위한 주요 도구입니다. 많은 테마 사용자 정의 작업에 대한 커스터마이저를 대체합니다.
외관 → 편집기를 통해 액세스 한 사이트 편집기는 친숙한 블록 기반 인터페이스를 제공하지만 사이트 전체 템플릿을 관리하기위한 확장 된 기능을 제공합니다. 사이트 , 템플릿 및 템플릿 부품 의 섹션이있어 글로벌 디자인 조정이 가능합니다. Kebob 메뉴를 사용하여 사용자 정의를 쉽게 지울 수 있습니다.
템플릿은 사이트 편집기 내에서 생성되고 관리되므로 수동 PHP 파일 생성이 필요하지 않습니다. 블록 편집기 핸드북은 수동 HTML 생성 및 사이트 편집기 인터페이스 사용을 포함하여 템플릿 및 템플릿 부품을 작성하는 방법을 자세히 설명합니다.
theme.json
블록 테마에서 스타일링은 theme.json 파일을 통해 관리되며 다양한 소스의 스타일을 세분화하는 제어를 제공합니다. 이 파일을 사용하면 테마 저자가 기본 스타일을 정의하고 사용자 사용자 정의 옵션을 관리하며 편집기 기본값을 설정할 수 있습니다. 스타일링에 대한 중앙 집중식 접근 방식을 제공하여 유지 관리를 향상시킵니다.
블록 테마 개발을위한 몇 가지 전략이 등장하고 있습니다.
Automattic의 보편적 인 테마 인 Blockbase는 밑줄 테마와 유사한 출발점 역할을하여 어린이 테마 개발을위한 기초를 제공합니다.
22 명의 22 명은 블록 테마의 기능을 보여주는 FSE 용으로 설계된 테마의 훌륭한 예입니다.
하이브리드 테마는 기존 및 FSE 접근 방식을 혼합하여 theme.json 사용하여 스타일링을 위해 블록 템플릿을 통합하고 잠재적으로 통합합니다.
WordPress 테마 디렉토리는 다양한 커뮤니티가 만든 블록 테마를 제공하여 다양한 접근 방식을 보여줍니다.
수많은 웹 사이트가 이미 블록 테마를 사용하여 다목적 성을 보여줍니다.
접근 방식은 여전히 발전하고 있지만 아동 테마는 블록 테마와 관련이 있습니다.
Automattic의 "Blockbase Theme Create"플러그인은 블록베이스 테마의 하위 테마 생성을 단순화합니다.
theme.json 사용합니다 .json 파일 theme.json 파일을 스와핑하면 블록 테마의 모양을 크게 변경할 수 있습니다. 비 코더 의이 프로세스를 단순화하기위한 도구가 떠오르고 있습니다.
내 경험은 몇 가지 주요 측면을 강조합니다.
블록 테마는 경량의 마크 업 중심 구조를 제공하여 부풀린 WordPress 테마에 관한 Jamstack 비판을 다룹니다.
Customizer의 코드 주입 기능 손실은 사이트 편집기 인터페이스에 적응해야합니다.
블록 테마를 사용자 정의하는 것은 비 개발자에게도 클래식 테마보다 훨씬 쉽습니다.
블록 테마는 컨텐츠와 패턴에 더 집중하여 테마 개발을 단순화합니다.
블록 테마 및 FSE에 대해 더 많이 배울 수있는 수많은 리소스가 제공됩니다. 여기에는 공식 WordPress 문서, 튜토리얼 및 다양한 소스의 블로그 게시물이 포함됩니다.
사이트 편집기는 여전히 진화하는 동안 흥미로운 가능성을 제공합니다. 나는 블록 테마를 적극적으로 탐구하고 있으며 향후 개발을 기대하고 있습니다. 경험과 피드백을 공유하십시오!
위 내용은 WordPress 블록 테마에 대한 깊은 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
