Twenty Twenty-Two 및 WordPress 블록 테마에 대한 심층 분석

원래 계획보다 조금 늦었지만 새로운 WordPress 기본 테마가 제공됩니다. 그 이름은 스물 스물 둘!

새로운 WordPress 기본 테마는 곧 출시될 WordPress 5.9 릴리스와 함께 제공됩니다. 우리는 새로운 테마에 대해 더 알고 싶었기 때문에 WordPress 5.9를 실행하는 로컬 개발 환경에서 Twenty Twenty-Two를 설치하고 테스트했습니다.

새로운 WordPress 테마에 대한 심층적인 개요를 제공하기 위해 생각을 마무리하기 전에 결과를 보여드리겠습니다.

Twenty Twenty-Two는 가장 유연하고 가벼우며 사용자 정의 가능한 기본 테마로 설계되었습니다. 블록, 패턴 및 템플릿을 테스트할 수 있는 훌륭한 놀이터를 제공합니다.

블록 테마이기 때문에 WordPress 5.9에서 가장 기다려지는 기능인 전체 사이트 편집, 전역 스타일, 탐색 블록 및 새로운 이미지 갤러리를 더 잘 탐색하는 데 도움이 됩니다.

Twenty Twenty-Two는 첫 번째 기본 블록 테마 입니다!

새 테마의 가장 야심찬 목표 중 하나는 사용자에게 권한을 부여하는 것 입니다. 상자에서 사용할 수 있는 패턴과 템플릿이 너무 많기 때문에 사용자는 몇 번의 클릭만으로 복잡한 레이아웃을 만들 수 있습니다. 나머지는 스타일 사용자 정의입니다.

기술적인 관점에서 Twenty Twenty-Two에 대해 쓰는 것은 WordPress 5.9에서 제공되는 가장 강력한 최신 기능에 대해 쓰는 것과 크게 다르지 않습니다. 그러나 Twenty Twenty-Two는 새로운 사이트 편집 기능을 더 잘 이해하고 플랫폼의 미래에 대한 더 나은 아이디어를 얻을 수 있는 돋보기를 제공합니다.

그래서 여기에서 우리는 당신에게 새로운 테마를 소개합니다.

먼저 WordPress 5.9 및 Twenty Twenty-Two에서 사용자가 경험하게 될 새로운 사이트 편집 흐름 을 살펴보겠습니다.

그런 다음 Twenty Twenty-Two에서 구현된 주요 블록 테마 기능에 대해 자세히 알아보겠습니다. 글로벌 스타일 , 블록 패턴 , 템플릿 및 템플릿 부분 에 대해 알게 됩니다.

그러나 Twenty Twenty-Two 및 WordPress 블록 테마에 대해 할 말이 더 많습니다. 따라서 보너스 장으로 theme.json 파일을 활용하여 Twenty Twenty-Two의 기능을 확장하는 방법에 대한 간략한 개요를 제공합니다.

다음 WordPress 기본 테마를 먼저 살펴보세요! @jffng와 함께 공동 주도하게 되어 매우 기쁩니다. 우리는 여러분이 이에 기여하고/하거나 그냥 즐겨 사용하기를 바랍니다! https://t.co/covjrpgFIO

— kjellr (@kjellr) 2021년 10월 6일

작업을 시작하고 완전히 새로운 Twenty Twenty-Two WordPress 기본 테마를 살펴보겠습니다.

Twenty Twenty-Two는 새로운 사이트 편집 흐름을 가져옵니다.

WordPress 5.9의 핵심에는 여러 전체 사이트 편집 기능이 있습니다. Twenty Twenty-Two와 같은 블록 테마가 설치된 최신 WordPress 버전을 사용하는 사이트 소유자는 곧 다음을 수행할 수 있습니다.

• 더 많은 블록과 패턴을 사용하여 게시물 및 페이지 생성 및 편집
• Global Styles 인터페이스를 통해 theme.json 파일에 정의된 설정 및 스타일 사용자 지정
• 페이지 및 게시물용 템플릿 생성 및 편집
• 머리글, 바닥글 및 기타 템플릿 영역에 대한 템플릿 부분 생성 및 편집

이러한 모든 기능이 핵심에 병합되면서 WordPress 핵심 기여자는 정보 아키텍처의 진화에 대해 논의하고 전체 사이트 편집 흐름을 재설계했습니다.

Twenty Twenty-Two를 활성화한 후 가장 먼저 알 수 있는 것은 사이트 편집기의 진입점이 더 이상 WordPress 대시보드의 기본 메뉴에 있지 않고 모양 메뉴 아래로 이동되었다는 것입니다.

템플릿 및 스타일 편집 기능을 동일한 모양 메뉴 아래에 가져오면 편집 경험이 간소화됩니다. 액세스하는 기능이 페이지 표시 와 관련되어 있음을 더 쉽게 이해할 수 있어야 합니다.

Editor 메뉴 항목은 사이트의 홈페이지 템플릿을 엽니다. 읽기 설정에 따라 이것은 최신 게시물 페이지 또는 정적 페이지가 될 수 있습니다.

이제 왼쪽 상단 모서리에 있는 WordPress 아이콘을 클릭하면 Site , Templates 및 Template Parts 의 세 가지 메뉴 항목을 포함하는 새 사이트 편집기 탐색 메뉴가 표시됩니다.

자세히 살펴보겠습니다.

사이트 옵션은 홈페이지 템플릿(최신 블로그 기사 또는 정적 홈 페이지)을 엽니다.

템플릿 메뉴 항목에서 사용 가능한 템플릿 목록을 얻을 수 있습니다. 목록에서 템플릿을 클릭하여 편집기에서 실행할 수 있습니다.

이 글을 쓰는 시점에서 Twenty Twenty-Two는 11개의 템플릿을 제공합니다.

오른쪽에 있는 줄임표( ︙ ) 아이콘을 클릭하면 사용자 정의를 지울 수 있습니다.

테마 템플릿과 달리 사용자 지정 템플릿은 이름을 바꾸거나 제거할 수만 있습니다(단, 게시물 편집기에서 사용자 지정 템플릿을 편집할 수 있음).

템플릿 부분 메뉴 항목은 사용자 정의를 위해 편집기에서 열 수 있는 사용 가능한 템플릿 부분을 나열합니다.

기본적으로 Twenty Twenty-Two에 4개의 템플릿 부분이 추가된 것을 찾을 수 있습니다. 수정된 템플릿 위에 커서를 놓으면 템플릿이 사용자 정의되었음을 알려주는 도구 설명이 표시됩니다.

오른쪽에 있는 줄임표( ︙ ) 아이콘을 클릭하여 이러한 사용자 정의를 지울 수 있습니다.

템플릿 및 템플릿 부분 편집

Editor 는 템플릿 및 템플릿 부분의 구조를 사용자 정의할 수 있는 인터페이스를 제공합니다.

여기에서 블록과 패턴을 쉽게 추가하거나 편집할 수 있으며 변경 사항은 해당 템플릿을 사용하는 모든 페이지에 자동으로 적용됩니다.

아래 이미지는 편집기의 404 페이지 템플릿을 보여줍니다. 제목, 단락 및 검색 상자만 포함된 매우 간단한 템플릿입니다. 그럼에도 불구하고 UI가 어떻게 작동하는지 잘 이해할 수 있습니다.

여기에서 필요에 맞게 템플릿을 편집하고 사용자 정의할 수 있습니다. 예를 들어, 이미지 게시물 그리드 패턴을 추가하여 방문자의 참여도를 높이고 웹사이트 콘텐츠를 탐색하도록 초대할 수 있습니다.

템플릿 편집기 상단의 헤더 드롭다운에는 사용 가능한 템플릿 영역 목록이 표시됩니다. 동일한 목록이 설정 사이드바의 템플릿 탭에 나타납니다.

템플릿 영역(예: 헤더)을 클릭하면 편집하려는 템플릿 부분으로 바로 이동합니다.

오른쪽에 있는 줄임표 아이콘을 클릭하면 격리된 템플릿 부분 편집기 에 액세스할 수 있습니다.

템플릿 부분 편집기는 한 쌍의 드래그 가능한 핸들도 제공하므로 템플릿이 다양한 화면 해상도에서 어떻게 작동하는지 확인할 수 있습니다.

변경 사항에 만족하면 편집 내용을 저장하고 기본 템플릿 편집기로 돌아가서 최종 결과를 확인합니다.

새로운 정보 아키텍처에 대해 더 자세히 알고 싶다면 다음 문서를 확인하는 것이 좋습니다.

• 사이트 편집 IA 개념: 새 기능을 표시하고 액세스하는 방법
• 사이트 편집 iA 개념 – 2부

핵심에 있는 Twenty Twenty-Two: theme.json 에 대한 간략한 개요

Twenty Twenty-Two 및 블록 테마(예: Bricksy)가 작동하는 방식을 완전히 이해하기 위해 theme.json 파일을 기반으로 하는 새로운 테마 구성 및 스타일 메커니즘을 한 눈에 살펴보겠습니다.

WordPress 5.8과 함께 도입된 이 새로운 메커니즘을 통해 테마 개발자는 편집기를 구성하고 중앙 구성 지점에서 기능 지원을 추가할 수 있습니다.

Twenty Twenty-Two에서 theme.json 파일의 구조는 다음과 같습니다.

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

각 섹션을 간단히 살펴보겠습니다.

버전

version 필드는 현재 2 인 사양 버전을 설명합니다.

설정

settings 섹션은 전역 또는 블록 수준에서 설정을 정의합니다. 최상위 수준에서 정의된 설정은 모든 블록에 영향을 주지만 블록은 전역 설정을 개별적으로 재정의할 수 있습니다. Twenty Twenty-Two에는 다음 설정이 있습니다.

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

설정 기본값은 사전 설정 이라고 하며 특정 명명 규칙에 따라 CSS 사용자 정의 속성 및 클래스 이름을 생성하는 데 사용됩니다.

• CSS 사용자 정의 속성: --wp--preset--{preset-category}--{preset-slug}
• CSS 클래스 이름: .has-{preset-slug}-{preset-category}

테마가 사전 설정을 정의하면 해당 CSS 사용자 정의 속성을 사용하여 styles 섹션의 블록 및 요소에 스타일을 지정할 수 있습니다.

스타일

styles 섹션은 테마가 블록 및 요소 기본 스타일을 정의하는 곳입니다. 예를 들어 핵심 Button 블록에 대한 다음 Twenty Twenty-Two 스타일을 참조하십시오.

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

속성 선언에 사용된 CSS 사용자 정의 속성을 확인할 수 있습니다.

사용자 정의 템플릿

customTemplates 섹션은 테마가 사용자 정의 템플릿을 선언하는 곳입니다. name 및 title 필드는 필수 항목입니다. 테마는 postTypes 속성을 설정하여 템플릿을 사용할 수 있는 게시물 유형을 선언할 수도 있습니다.

Twenty Twenty-Two는 4가지 사용자 정의 템플릿을 제공합니다.

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

block-templates 폴더에서 해당 .html 파일을 찾을 수 있습니다.

템플릿 부분

templateParts 섹션에는 템플릿 부분 정의가 포함됩니다.

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

name 및 title 필드는 필수 항목입니다. 테마는 또한 템플릿 부분이 편집기에서 렌더링될 area 용어를 선언할 수 있습니다.

템플릿 부품 .html 파일은 템플릿 부품 폴더에 있습니다.

이제 Twenty Twenty-Two의 theme.json 에 대해 더 많이 알게 되었으므로 테마의 기능과 새로운 편집 인터페이스를 더 철저하게 탐색할 수 있습니다.

Twenty Twenty-Two의 글로벌 스타일 에 대해 알아보겠습니다.

스물 둘의 글로벌 스타일

Twenty Twenty-Two' style.css를 보면 최소한의 CSS 선언이 포함되어 있다는 사실에 놀랄 것입니다. 그 이유는 블록 기반 테마 의 theme.json 파일에 스타일이 선언되어 있기 때문입니다 .

WordPress 5.9는 블록 테마 사용자가 글로벌 스타일이라는 사용자 인터페이스에서 사이트 요소의 모양을 사용자 정의할 수 있는 새로운 기능을 도입하여 한 단계 더 나아질 것입니다.

글로벌 스타일 인터페이스는 에디터 오른쪽 상단에 위치한 새로운 스타일 아이콘에서 접근할 수 있습니다(글로벌 스타일 인터페이스 참조).

해당 아이콘을 클릭하면 세 개의 개별 패널이 포함된 새로운 스타일 사이드바가 표시됩니다.

• 사용자 정의의 미리보기를 표시하는 미리보기 패널
• Typography , Colors 및 Layout 에 대한 특정 컨트롤 그룹에 대한 액세스를 제공하는 전역 스타일 패널
• 블록 수준 스타일 설정에 대한 액세스를 제공하는 블록 항목

Twenty Twenty-Two's 컬러 팔레트

색상 패널을 사용하면 사용 가능한 팔레트를 편집하고 배경 , 텍스트 또는 링크 에 대한 색상을 지정하거나 변경할 수 있습니다.

팔레트 패널에서 테마 또는 기본 팔레트를 사용자 정의하고 사용자 정의 팔레트를 만들 수도 있습니다.

색상 컨트롤을 생성하는 코드를 아직 찾지 못하셨습니까?

그렇지 않은 경우 좋아하는 코드 편집기에서 Twenty Twenty-Two의 theme.json 을 엽니다. 다음 색상표 선언을 찾을 수 있습니다.

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

아래 이미지는 위의 코드가 Twenty Twenty-Two의 색상 팔레트와 어떻게 일치하는지 보여줍니다.

이제 특정 블록의 기본 배경색을 변경하려고 한다고 가정해 보겠습니다. 블록의 배경에 대해 다른 색상을 선택하면 요소의 background-color 속성에 다른 CSS 변수가 할당됩니다. 아래 이미지는 그 예를 보여줍니다.

그리고 그게 전부입니다! 사용자 정의 CSS 코드 한 줄을 사용자 정의 프로그램에 추가하거나 그에 대한 하위 테마를 만들 필요가 없습니다.

그러나 몇 가지 추가 예를 통해 Twenty Twenty-Two의 글로벌 스타일을 계속 탐색해 보겠습니다.

타이포그래피 설정

타이포그래피 패널에서는 전역 수준에서 웹 사이트의 텍스트 및 링크 요소에 대한 타이포그래피 스타일을 사용자 정의할 수 있습니다.

각 항목은 글꼴 모음, 크기 및 줄 높이를 사용자 지정할 수 있는 컨트롤 그룹에 대한 액세스를 제공합니다.

어떤 코드가 이러한 컨트롤을 생성하는지 궁금하십니까?

Twenty Twenty-Two의 theme.json 을 열고 typography 섹션을 찾으세요. 다음 설정이 표시됩니다.

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

위의 코드에서 2개의 글꼴 패밀리와 5개의 글꼴 크기를 볼 수 있을 것으로 예상할 수 있습니다. 그리고 당신은 올바르게 추측했을 것입니다.

위의 코드가 전역 스타일 타이포그래피 설정으로 변환되는 방법은 다음과 같습니다.

Line height 컨트롤을 생성하는 설정을 추측할 수 있습니다. Twenty Twenty-Two에서는 이에 대한 특정 설정을 찾을 수 없습니다. 이는 여러 설정 선언(다음 섹션 참조)에 대한 바로 가기인 appearanceTools 속성에 의해 활성화되기 때문입니다.

레이아웃 및 모양 도구

전역 스타일 사이드바의 마지막 요소는 레이아웃 입니다. 이 글을 쓰는 시점에는 padding 컨트롤만 포함되어 있습니다.

Twenty Twenty-Two에서 레이아웃 패널은 한 번에 여러 설정을 활성화하는 데 사용할 수 있는 부울인 appearanceTools 설정 속성에 의해 활성화됩니다.

 { "settings": { "appearanceTools": true } }

"appearanceTools": true 는 단순히 다음 선언 블록을 대체합니다.

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

OK — 이제 theme.json 파일에 선언된 설정이 해당 전역 스타일 컨트롤과 어떻게 일치하는지 이해하셨기를 바랍니다.

새로운 WordPress 기본 테마인 블록 패턴 에 대한 완전한 그림을 얻기 위해 아직 퍼즐의 한 조각이 빠져 있습니다.

스물 두 개의 블록 패턴

Twenty Twenty-Two는 대부분 패턴의 모음이라고 말할 수 있으며 거의 ​​그렇습니다. Twenty Twenty-Two에서는 웹 페이지에 대해 놀랍고 예측할 수 없는 중첩 블록 구조를 구축하기 위해 선택할 수 있는 즉시 사용할 수 있는 수많은 블록 패턴을 찾을 수 있습니다.

여기서 핵심 용어는 사용자 권한 부여 입니다. HTML이나 CSS에 대한 지식이 없어도 블록 패턴을 사용하면 매력적인 포트폴리오에서 단일 페이지 홍보 웹 사이트에 이르기까지 모든 종류의 것을 구축할 수 있기 때문에 적합합니다!

그리고 WordPress 5.9는 전체 화면 모달에서 패턴을 탐색할 수 있는 도구인 새로운 패턴 탐색기로 패턴 시스템을 크게 개선했습니다.

또한 새 도구를 사용하면 패턴 디렉토리에서 직접 블록 패턴을 빠르고 쉽게 가져올 수 있습니다. 이것은 WordPress 사용자와 개발자 모두에게 새로운 가능성을 열어주므로 앞으로 사용량이 상당히 증가할 것입니다.

Twenty Twenty-Two에는 5가지 범주에 걸쳐 많은 패턴(65개 이상)이 포함되어 있습니다.

이 견고한 패턴 세트는 새로운 기본 테마와 함께 제공되는 템플릿 및 템플릿 부분과 완벽하게 짝을 이루어 진정으로 놀라운 편집 경험을 제공합니다.

아직 블록 패턴을 실험할 기회가 없었다면 간단한 예제를 통해 블록 패턴이 그렇게 강력한 도구로 간주되는 이유를 보여드리겠습니다.

Index 및 Single Post 템플릿에서 기본 바닥글을 제거하고 다른 Twenty Twenty-Two 블록 패턴으로 교체한다고 가정합니다.

모양 메뉴 또는 WordPress 프런트엔드 도구 모음 버튼에서 사이트 편집기를 시작하여 색인 템플릿을 사용자 정의합니다.

색인 버튼을 클릭하면 페이지에서 사용 가능한 템플릿 영역 목록을 보여주는 헤더 드롭다운이 표시됩니다. 바닥글 옆에 있는 줄임표 버튼을 클릭한 다음 바닥글 편집 을 클릭합니다.

위에서 언급했듯이 격리된 템플릿 부분 편집기가 시작됩니다.

이제 블록 삽입기를 열고 패턴 을 클릭합니다.

새로운 패턴 탐색기 도구를 실행하고 Twenty Twenty-Two Footers 카테고리를 선택한 다음 원하는 바닥글을 선택합니다.

이제 필요에 따라 블록을 추가하고 편집하십시오.

헤더를 저장하고 변경 사항에 만족하면 사이트를 다시 확인하십시오.

아래 이미지는 서로 다른 머리글 및 바닥글 사용자 지정이 있는 세 가지 템플릿(구분 기호가 없는 색인, 단일 게시물 및 단일 게시물)을 비교합니다.

자식 테마로 Twenty Twenty-Two 확장하기

블록 테마에 대한 자식 테마를 만드는 것은 클래식 테마에 대한 자식 테마를 만드는 것과 상당히 다릅니다.

그러나 블록 테마의 구조를 잘 이해하면 Twenty Twenty-Two 또는 다른 블록 테마에 대한 하위 테마를 만드는 것이 어렵지 않을 것입니다.

이제 Twenty Twenty-Two 기반 웹사이트의 모양과 느낌을 사용자 정의하는 방법을 알아보겠습니다.

1. 스물 둘을 위한 하위 테마 설정하기

/wp-content/themes 디렉토리에서 새 폴더를 만들고 원하는 대로 이름을 지정합니다(테마 개발 표준에 따라). 이 예에서 우리는 자식 테마 폴더 를 2022-child 라고 불렀습니다.

이제 style.css 파일이 필요합니다. 즐겨 사용하는 코드 편집기를 열고 다음 스타일시트를 만듭니다.

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

언제나처럼 필요에 따라 필드를 편집할 수 있습니다.

이제 자녀 테마를 미리 볼 수 있습니다. 외모 > 테마 관리 화면에서 활성화할 수 있습니다.

2. 전역 설정 사용자 지정

WordPress 5.9부터 theme.json 파일이 있는 하위 테마는 상위 테마의 설정을 상속합니다. 자식의 theme.json 이 스타일 집합을 정의하는 경우 해당 스타일은 부모의 스타일 위에 적용됩니다.

따라서 원래 선택을 모두 재정의하는 대신 설정 및 스타일 정의의 작은 사용자 지정 블록만 포함하는 theme.json 파일을 만들 수 있습니다.

사용자 정의 색상표를 선언하는 방법

Twenty Twenty-Two의 하위 테마를 만들 때 가장 쉬운 작업은 색상 팔레트를 교체하는 것입니다. 아래와 같이 자녀의 theme.json 에 새 색상 팔레트를 정의하기만 하면 됩니다.

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

파일을 저장하고 사이트 편집기로 돌아갑니다. 위에서 정의한 색상 팔레트는 기본 Twenty Twenty-Two의 색상 팔레트를 대체해야 합니다.

색상은 팔레트 자체에 순서대로 표시되며 색상 이름은 Github에서 논의된 모범 사례 및 명명 규칙을 따라야 합니다.

Carolina Nymark의 이 심층 개요에서 theme.json 색상 옵션에 대해 더 많이 읽을 수 있습니다.

사용자 정의 이중톤 필터를 선언하는 방법

기본 이중톤 색상을 사용자 정의 필터 세트로 바꿀 수도 있습니다.

그렇게 하려면 palette 속성과 동일한 수준에서 자녀의 theme.json 설정에 다음 코드를 추가하기만 하면 됩니다.

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

파일을 저장하고 블록 편집기에서 결과를 확인하십시오. 단일 이중톤 필터만 표시되어야 합니다.

3. 블록 스타일 사용자 정의

앞서 언급했듯이 WordPress 5.9에서는 이제 전역 스타일 인터페이스에서 theme.json 설정 및 스타일을 사용자 지정할 수 있습니다.

블록이 해당 block.json 파일의 특정 기능에 대한 지원을 선언하는 경우에만 전역 스타일 인터페이스에서 블록 스타일을 사용자 정의할 수 있습니다. 그러나 자식 테마의 theme.json 에서 기본 블록 설정을 재정의할 수 있습니다.

이제 게시물 제목 및 그룹 블록 스타일을 재정의한다고 가정합니다. 아래와 같이 추가하거나 재정의할 스타일을 정의하기만 하면 됩니다.

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

위의 예에서 core/post-title 의 글꼴 패밀리, 배경색 및 패딩 값과 core/group 의 상단 및 하단 여백을 변경했습니다.

아래 이미지는 공개 사이트에서 볼 수 있는 결과를 보여줍니다.

그리고 그것이 리뷰를위한 것입니다!

이 게시물의 범위를 벗어나므로 지금은 자식 테마에 대해 더 깊이 파고들지 않을 것입니다. 그동안 Github에서 Twenty Twenty-Two 하위 테마의 더 많은 예를 찾을 수 있습니다.

요약

새로운 WordPress 기본 테마 Twenty Twenty-Two와 그 기능(지금까지 출시된 가장 유연한 기본 테마가 됨)을 자세히 살펴보면서 WordPress 5.9에 도입된 새로운 정보 아키텍처를 공개했습니다. 새로운 Global Styles 인터페이스를 살짝 엿보기도 했습니다.

많은 흥미로운 새 기능이 진행 중이며 새 편집 환경이 시간이 지남에 따라 더욱 강력하고 안정적이며 기능적으로 향상되고 있음이 분명해 보입니다.

많은 새로운 WordPress 기능이 진행 중이지만 다른 기능은 사라지거나 중요성이 줄어들고 있습니다. 많은 사용자는 사용자 지정 프로그램에 어떤 일이 발생하고 기존 테마와의 이전 버전과의 호환성을 가장 잘 유지하는 방법에 대해 궁금해합니다.

그러나 기존 테마에서 갑자기 한 번에 테마를 차단할 것으로 기대해서는 안 됩니다. 현재 선택할 수 있는 4가지 유형의 테마가 있습니다.

• 블록 테마 : FSE용으로 설계된 테마
• 범용 테마 : 커스터마이저와 사이트 에디터 모두에서 작동하는 테마
• 하이브리드 테마 : theme.json 과 같은 FSE 기능을 지원하는 클래식 테마
• 클래식 테마 : PHP 템플릿, functions.php 등의 테마

따라서 지금 당장은 두려워하지 마십시오. 아직 차단 테마로 전환할 준비가 되지 않았다면 선택할 수 있는 솔루션이 많이 있습니다.

이제 그것은 당신에게 달려 있습니다! 지금 큰 도약을 하고 블록 테마를 사용할 준비가 되셨습니까? 아래 의견에서 의견을 공유하십시오.