블록 테마의 기능인 Global Styles는 블록 테마를 만드는 데 가장 좋아하는 부분 중 하나입니다. WordPress의 글로벌 스타일 변형 의 개념은 Gutenberg 12.5에 소개되어 테마 저자가 색상, 글꼴, 타이포그래피, 간격 등 다양한 테마 조합으로 블록 테마의 대체 변형을 생성 할 수있게되었습니다. JSON 파일 /스타일 폴더에 저장된 JSON 파일“동일한 테마에서 다른 외관을 빠르고 쉽게 전환 할 수 있습니다.”
글로벌 스타일 패널 UI는 활성 개발 반복 중입니다. 이 기능의 개발에 대한 자세한 내용은이 Github 티켓 (#35619)에서 찾아서 추적 할 수 있습니다.
이 기사에서는 Alternate /styles/theme.json 파일을 사용하여 개념 증명 증명 글로벌 스타일 변형을 만들고 색상 팔레트 만 교환하여 다양한 색상 모드로 하위 테마를 만듭니다.
이 기사는 WordPress 블록 테마를 기본적으로 이해하고 FSE (Full Site Editor) 인터페이스를 사용하는 것에 대한 친숙한 사람들을위한 것입니다. The Block Temes와 FSE를 처음 사용하는 경우 WordPress 블록 테마 및 사이트 편집기 문서에 대한이 깊은 소개를 통해 CSS 트릭을 시작할 수 있습니다. 이 전체 사이트 편집 웹 사이트는이 기사에서 논의 된 블록 테마 및 스타일 변형을 포함하여 모든 FSE 기능을 배울 수있는 최신 튜토리얼 가이드 중 하나입니다.
어떤 배경에 대해서는 글로벌 스타일 변형을 간단히 개요하겠습니다. TT2 (Twenty Twenty-Two) 테마 리드이자 Automattic Design Director Kjell Reigstad는이 트윗과 Github 티켓 #292로 아동 테마로 글로벌 스타일 변형을 소개했습니다. 티켓에서 Kjell은 처음에는 대체 색상 패턴과 글꼴 조합으로 의도되었지만 간단한 어린이 테마를 구축하는 데 사용할 수 있다고 지적합니다.
Kjell 의이 예는 사이드 바에서 사용 가능한 옵션에서 다양한 스타일 조합을 어떻게 선택할 수 있는지 보여줍니다.
그 이후로 Automattic Theme Team은 다음을 포함하여 가변 어린이 테마 (가변 색상 및 글꼴 만)를 만들기위한 개념을 실험 해 왔습니다.
Gutenberg 12.5 릴리스는 Global Styles Switcher를 도입하여 사용자가 A /Styles 폴더 아래에 저장된 다른 테마를 통해 동일한 테마에서 다른 외관을 빠르고 쉽게 전환 할 수 있도록했습니다.
Theme.json을 통해 글로벌 스타일 변형을 전환 할 수있는 개념은 Github에서 잠시 동안 논의되었습니다. Gutenberg의 수석 엔지니어 인 Matias Ventura는 최근 WordPress 6.0 로드맵에 추가함으로써 새로운 중요성을 부여했습니다.
JSON 변형에 의해 구동되는 스타일의 대체. 이것은 새로운 기본 테마 주변의 다양한 비디오에서 놀랐으며 6.0으로 완전히 공개되어 제시되어야합니다. 병렬 목표 중 하나는 스타일로 만 만든 TT2의 몇 가지 뚜렷한 변형을 만드는 것입니다. (35619)
Matias Ventura,“예비 로드맵에서 6.0”
테마 스타일 변동 스위처의 최신 개발 반복은 Gutenberg 13.0과 함께 제공되며 WordPress 6.0에 포함됩니다. 이 탐색 WordPress 6.0 비디오에서 Automattic Product Liaison Anne McCarthy는이 기사에서 논의 된 스타일 변형 및 WebFonts API (시작)를 포함한 주요 기능에 대한 개요를 제공합니다.
이전 기사에서는 빌딩 블록 어린이 테마를 간단히 다루었습니다. 글로벌 스타일 변형은 Alternate-Theme.json과 하위 테마 사이의 선을 흐리게했습니다. 예를 들어, 최근에 출시 된 Alante-Dark Child 테마와 부모 테마의 유일한 차이점은 다음과 같은 글로벌 테마 스타일을 무시하는 Child Theme의 Alternate.json 파일입니다.
마찬가지로 WordPress 디렉토리의 최근 두 개의 Alara Child 테마 인 Framboise와 Richmond는 단일 테마에만 다릅니다.
자녀 테마 폴더의 루트에서 스타일 변형을 JSON 파일로 보유하는 /스타일 폴더를 작성하십시오. 이 데모 예를 위해 전경과 배경색을 바꾸어 22 개의 22 개의 테마 테마의 세 가지 변형을 만들었습니다.
다음은 관리자 대시 보드에서 스타일 아이콘을 클릭 한 후 최종 결과입니다 ( 외관 → 편집기 에 위치).
다른 스타일 버튼 (최근 브라우저 스타일로 개정)을 클릭하십시오. "파란색", "적갈색"및 "핑크"컬러 스타일 아이콘을 표시하는 "Blue", "Maroon"및 "Browser Styles로 개정)를 클릭하십시오.
스타일을 변경하고 선택하려면 선호하는 변형을 선택하고 브라우저의 프론트 엔드에 표시되는 저장 버튼 (오른쪽 상단)을 클릭하십시오.
호버 애니메이션 효과로 대체 스타일 변형 및 파일 이름에 레이블을 추가하면 Gutenberg 13.0에서 사용할 수 있습니다.
먼저 더미 콘텐츠가있는 WordPress 사이트를 설치하고 설정하십시오. 이 데모를 위해, 나는 새로운 WordPress 설치를 만들고 202 개의 22 개의 테마를 활성화하고 Gutenberg 테스트 데이터를 추가했습니다.
이 기사에서 논의 된 테마 스타일 변형 및 WebFonts API에는 Gutenberg 13.0 플러그인 또는 WordPress 6.0의 설치 및 활성화가 필요합니다.
이 데모 하위 테마 예제에서 모든 사이트 컨텐츠를 중심으로 헤더와 바닥 글 색상의 바디 색상을 약간 변경하겠습니다.
Blue, Maroon 및 Pink.json 파일을 사용하여 자녀 테마의 루트 폴더에서 생성 /스타일 :
__ Style.css __ 테마 .JSON __ functions.php __ Index.php __ 템플릿 __ ... __ 부품 __ ... __ 스타일 __ blue.json __ Maroon.json __ Pink.json
다음으로, 원하는 컬러 팔레트 아래 /스타일 폴더로 대체 -theme.json 파일을 만듭니다. 이 데모 예를 위해, 나는 3 개의 컬러 팔레트 (파란색, 적갈색 및 분홍색)를 만들었습니다. Maroon.json의 코드는 다음과 같습니다.
{
"버전": 2,
"제목": "Maroon",
"설정": {
"색상": {
"팔레트": [
{ "슬러그": "전경", "색상": "#7C290F", "Name": "전경"},
{ "슬러그": "배경", "색상": "#ffffff", "name": "background"},
{ "슬러그": "포 그라운드 어두운", "색상": "#000000", "name": "전경 Dark"},
{ "슬러그": "배경-바디", "색상": "#ffd8be", "name": "background body"},
{ "슬러그": "1 차", "색상": "#000000", "name": "Primary"},
{ "슬러그": "보조", "색상": "#ffe2c7", "name": "secondary"},
{ "슬러그": "3 차", "색상": "#55acee", "이름": "3 차"}
]]
},
"타이포그래피": {}
},
"스타일": {
"색상":
{
"배경": "var (-WP--preset-Color-백-팩터-바디)," ",
"텍스트": "var (-WP-- PRESET- 색상-전후 어두운)"
},
"요소": {
"링크": {
"색상": { "text": "var (-WP--preset-Color-- 프라이드)}
}
}
}
}다른 두 개의 Alternate Blue.json 및 Pink.json 파일 포 그라운드 및 배경 바디, 포 그라운드 어두운 및 1 차 색상 특성의 각각의 파란색 및 핑크 헥스 색상 값을 스왑합니다.
이전 기사에서 언급했듯이, 나는 블록 테마를 작업하고 내 개인 프로젝트 사이트에 사용하고 있습니다. Gutenberg 플러그인의 테마 스타일 변형 및 WebFonts API 기능에서 영감을 얻은 대체 어두운 색상 모드로 작업중인 블록 테마를 조정하고 WebFonts API를 구성하여 조정하기 시작했습니다.
이 섹션에서는이 기사를 위해 만들어진 작업중인 블록 테마의 데모 형제 인 TT2 Gopher Blocks를 어떻게 만든 방법을 안내해 드리겠습니다. 테마에는 테마 스타일 변형을 사용하여 생성 된 적갈색, 다크 및 밝은 색상 모드가 포함되어 있으며 Gutenberg 12.8 릴리스에서 사용할 수있게되었습니다.
TT2 Gopher 테마의 일부 하이라이트에는 중앙, 단일 열 컨텐츠 디스플레이, 고유 한 헤더 및 바닥 글,보다 사용자 친화적 인 아카이브 및 검색 페이지가 포함됩니다.
TT2 Gopher 블록 의 사본은 Github 저장소에서 제공되며 포크 및 사용자 정의 할 수 있습니다.
먼저, 어두운 모드에 대한 일부 배경. Dark Mode는 개인 선호도이며 개발자는이 사이트에서와 같은 다른 모드 토글 스위치를 제공하며 대부분의 일반 개발자에게는 작은 작업이 아닙니다. Dark Mode 및 Dark Mode Typography에 대한이 완전한 안내서를 포함하여 CSS- 트릭에서 Dark Mode 생성이 여기에서 잘 덮여 있습니다.
WordPress 사이트에서는 WP Dark Mode 플러그인을 사용하여 Dark Mode 토글을 추가 할 수 있습니다. WP 엔진의 Erin Myers 및 WPBeginner는 WP Dark Mode 플러그인을 사용하는 방법을 설명하고 Brenda Barron 은이 WPExplorer 게시물에 다른 Dark Mode 플러그인 옵션을 나열합니다.
플러그인없이 WordPress 블록 테마에서 Dark Mode를 만드는 데는 여러 단계가 필요합니다. 1 년 전, Ari Stathopoulos는 Github에서 TT1 블록 테마에 대한 어두운 지원을 만들었습니다. 여기서 예를 살펴보면 자산 (예 : 토글러, 사용자 정의, 편집기 모드 지원), Dark Color CSS 변수 및 확장 된 functions.php 파일을 생성하기위한 JavaScript 지식이 포함됩니다.
이 짧은 비디오에서 Automattic의 Anne McCarthy는 TT2 /Styles 폴더에 Kllejr의 JSON 스 니펫 요소를 추가하여 글로벌 스타일 변형으로 TT2 블록 테마의 어두운 모드를 만드는 것이 얼마나 간단한지를 보여줍니다.
TT2 Gopher는 기본 2022 개의 테마의 매우 간단하고 수정 된 버전입니다. Maroon, Dark 및 White의 세 가지 테마 스타일 변형이 포함됩니다.
각 사용자 정의 단계를 설명하는 것은이 기사의 범위를 벗어나지 만 WordPress.org의 블록 편집기 핸드북뿐만 아니라 WordPress 블록 테마에 대한 깊은 소개에서 자세한 내용을 배울 수 있습니다.
TT2 Gopher 테마 색상 및 글꼴 조합에 대한 간단한 개요에는 다음이 포함됩니다.
내가 테마 스타일 변형을 만든 방법을 간단히 안내하겠습니다.
Gutenberg 12.8 플러그인은 저자가 "성능 친화적이고 개인 정보 보호 및 미래 방지 방식으로"로컬 (번들) 글꼴을 로컬 (번들) 글꼴을로드 할 수있는 새로운 WebFonts API를 소개했습니다. 이 기능은 PHP Way 또는 Theme.json Way의 블록 테마로 구현할 수 있습니다.
현재이 기능은 블록 테마와 함께 번들로 제공되며 개인 정보 보호 문제로 인해 Google 호스팅 글꼴을 지원하지 않습니다. WebFonts API 개발의 현재 상태에 대한 자세한 내용은이 Make WordPress Core 기사 및이 WP 선술집 기사에서 다루었습니다.
TT2 테마는 테마의 자산/글꼴 폴더에 소스 Serif Pro Font 파일을 추가합니다. He Github 리포지토리에는 두 가지 추가 글꼴이 제공됩니다.
TT2 테마에서 Local Source Serif Pro Webfonts는 functions.php 파일에 PHP에 등록됩니다.
함수 twentytwentytwo_get_font_face_styles () {
반품 "
@font-face {
Font-Family : 'Source Serif Pro';
글꼴 중량 : 200 900;
글꼴 스타일 : 정상;
글꼴 스트레치 : 정상;
글꼴 디스플레이 : 스왑;
src : url ( ' ". get_theme_file_uri ('자산/글꼴/sourceserif4variable-roman.ttf.woff2 ').") 형식 ('woff2 ');
}
@font-face {
Font-Family : 'Source Serif Pro';
글꼴 중량 : 200 900;
글꼴 스타일 : 이탈리아;
글꼴 스트레치 : 정상;
글꼴 디스플레이 : 스왑;
src : url ( ' ". get_theme_file_uri ('자산/글꼴/sourceserif4variable-italic.ttf.woff2 ').") 형식 ('woff2 ');
}
";
}Gutenberg 12.8은 Theme.json 파일에 로컬 웹 글꼴을 등록하는 기능을 도입했습니다. 다음 테마. Demo TT2 Gopher 테마의 JSON 스 니펫은 로컬 작업 SANS 웹 글꼴이 적갈색 테마 스타일 변형에 등록되는 방법을 보여줍니다.
"타이포그래피": {
"fontfamilies": [
{
"FontFamily": " 'Work Sans', -Apple-System, BlinkMacsystemFont, 'Helvetica Neue', 'Helvetica', Sans-Serif",
"슬러그": "Work-sans",
"이름": "Work Sans",
"fontface": [
{ "FontFamily": "Work Sans", "FontDisplay": "Block", "Fontweight": "400", "FontStyle": "Normal", "FontStretch": "Normal", "SRC": [ "파일 :.
{ "FontFamily": "Work Sans", "FontDisplay": "Block", "Fontweight": "700", "FontStyle": "Normal", "FontStrech": "정상", "SRC": [파일 :.
{ "FontFamily": "Work Sans", "FontDisplay": "Block", "Fontweight": "400", "FontStyle": "Italic", "FontStretch": "Normal", "Src": [ "파일 :.
{ "FontFamily": "Work Sans", "FontDisplay": "Block", "Fontweight": "700", "FontStyle": "Italic", "FontStretch": "Normal", "Src": [파일 :/ Assets/Fonts/Worksans/Worksans-italic-variablefontfontf ontwght.
]]
}
]]
}블록 테마에 로컬 웹 폰트를 등록하고 사용하는 방법에 대한 추가 정보는이 튜토리얼 및이 WP 선술집 기사에 설명되어 있습니다.
이전 섹션에 설명 된 단계에 따라 Child Theme의 /Styles 폴더 내부에 다른 색상과 글꼴 조합으로 Theme.json 파일의 두 가지 대체 버전을 만들었습니다.
이 기능에는 Theme.json의 버전 2가 필요합니다. Gutenberg 12.5이므로 Theme.json에 사이트 편집기에 스타일 레이블을 표시하거나 파일 이름 (확장자없이)을 기본적으로 표시 할 수 있습니다.
다음은 White.json의 예입니다.
{
"버전": 2,
"제목": "화이트",
"설정": {
"색상": {
"팔레트": [
{ "슬러그": "포 그라운드", "색상": "#000000", "이름": "전경"},
{ "슬러그": "배경", "색상": "#f2f2f2", "name": "background"},
{ "슬러그": "배경 헤더", "색상": "#ffffff", "name": "Background Header"},
{ "슬러그": "1 차", "색상": "#0d0d0d", "이름": "Primary"},
{ "슬러그": "보조", "색상": "#f0eae6", "name": "secondary"},
{ "슬러그": "3 차", "색상": "#eb3425", "이름": "3 차"},
{ "슬러그": "Quaternary", "Color": "#7C7E83", "Name": "Quaternary"}
]]
},
"타이포그래피": {
"fontfamilies": [
{
"fontfamily": "\"public sans \ ", sans-serif",
"이름": "공개 산",
"슬러그": "공공 사인",
"fontface": [
{ "fontfamily": "public sans", "fontdisplay": "block", "fontstyle": "normal", "fontstretch": "normal", "src": [ "file : .assets/fonts/publicans/publicans-variablefont_wght.ttf.woff2"},
{ "fontfamily": "public sans", "fontdisplay": "block", "fontstyle": "italic", "fontstretch": "normal", "src": [ "파일 : ./ assets/fonts/publicans/publicsans-italic-variablefont_wghght.ttf.woff2"|
]]
}
]]
}
},
"스타일": {
"블록": {
"코어/이미지": {
"필터": { "Duotone": "var (-WP--preset-duotone-default-filter)"}
},
"코어/포스트 타이틀": {
"타이포그래피": { "fontfamily": "var (-WP-- 프리 세트-기꺼이-공개-공공-팬)", "fontweight": "700", "fontsize": "var (-wp-custom-typography-font-size-거대한)}
},
"코어/쿼리 타이틀": {
"타이포그래피": { "fontfamily": "var (-WP-- 프리 세트-기본-가족-공공-팬)", "fontweight": "300", "fontsize": "var (-wp-custom-typography-font-size-거대한)}
},
"Core/Post-Featured-Image": {
"필터": { "Duotone": "var (-WP--preset-duotone-default-filter)"}
},
"Core/Site-Logo": {
"필터": { "Duotone": "var (-WP--preset-duotone-default-filter)"}
},
"코어/사이트 타이틀": {
"타이포그래피": { "fontfamily": "var (-WP-- 프리 세트-기본-가족-공공-공공-공공-공공-공공-공공-공공-팬) :"var (-WP-- 프리셋-글꼴 크기-정상) ":"정상 "}
}
},
"색상": { "배경": "var (-WP--preset-color-ackground)", "text": "var (-WP--preset-color-foreground)},
"요소": {
"H1": {
"타이포그래피": { "fontfamily": "var (-WP-- 프리 세트-포도당-공개-공공-팬)", "fontweight": "600", "fontsize": "var (-wp-custom-typographic- font-size-colossal)}
},
"H2": {
"타이포그래피": { "fontfamily": "var (-WP-- 프레셋-기독자-가족-공공-팬)", "fontweight": "600", "fontsize": "var (-wp-custom-typography-font-size-거대한)}
},
"H3": {
"타이포그래피": { "fontfamily": "var (-WP-- 프리 세트-기내-기내-공공-팬)", "fontweight": "300", "fontsize": "var (-wp-custom-typography-font-size-huge)"}
},
"H4": {
"타이포그래피": { "fontfamily": "var (-WP-- 프리 세트-기본-가족-공공-팬)", "fontweight": "300", "fontsize": "var (-WP-- 프리 세트-Font-size-x-large)"}.
},
"H5": {
"Typography": { "fontfamily": "var (-WP-- 프리 세트-FAMILY-PUBLIC-SANS),"fontweight ":"700 ","TextTransform ":"대문자 ","fontsize ":"var (-WP--PRESET-FONT-SIZE-MEDIAM) "}.
},
"H6": {
"Typography": { "fontfamily": "var (-WP-- 프리 세트-FAMILY-PUBLIC-SANS),"fontweight ":"400 ","TextTransform ":"대문자 ","fontsize ":"var (wp--preset-font-size-medium) "}.
},
"링크": {
"색상": { "text": "var (-WP-Custom-Color-foreground)"}
}
},
"타이포그래피": { "fontfamily": "var (-WP-- 프리 세트-기본-가족-공공-공공-공공-공공-공공-팬),"fontsize ":"var (-WP--프리셋-글꼴 크기)}}.
}
}이 코드는 Theme.json의 색상 팔레트를 교체하고 로컬 공개 SANS 글꼴 파일을 등록하고 정의합니다.
Black.json은 또한 매우 유사하며 functions.php 파일에 등록 된 소스 Serif Pro Fonts를 사용합니다.
이 WP 선술집 기사에서 Justin 은이 새로운 기능이 사이트 방문자의 설정에 연결하여 테마 저자가 활용할 수 있다고 추측하는 반면, 일부 사용자는 계절 또는 이벤트 기반 디자인 모양을 제공하는 사이트를 조정하는 것을 선호 할 수 있습니다. 이것은 아마도 조금 일찍이지만, 시간만이 테마 저자와 사용자 모두에 의해이 강력한 기능을 어떻게 활용할 것인지 알려줄 것입니다.
플러그인을 사용하지 않고 다른 타이포그래피와 색상 조합으로 블록 테마의 스타일 변형을 만드는 것이 크게 단순화되었습니다. 개인 프로젝트에 신청할 블록 편집기의 가장 좋아하는 기능 중 하나입니다.
제 생각에는 테마 스타일 변형은 블록 테마의 게임 체인저 이며이 편리한 기능을 사용하면 어린이 테마 나 쿠키 커터 블록 테마가 필요하지 않을 수 있습니다. Automattic 테마 팀의 블록 캔버스 또는 블록베이스 (GitHub의 작업 중베이스 블록 테마)와 유사한 잘 설계된 기본 블록 테마는 테마 스타일 변형으로 사용자 정의 할 수 있습니다.
위 내용은 WordPress 6.0 블록 테마에서 스타일 변형을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
