객체가 있습니다.
객체에 정의 된 스타일을 상속합니다. 그러나 일부 요소는 제목 및 버튼 블록과 같은 블록으로 등록되므로 요소의 정의를 완전히 요약하지는 않지만이 블록은 여전히 다른 블록에서 사용할 수 있습니다. 의 구조가 글로벌 요소 (제목과 같은)에서 개별 요소 (예 : H1), 블록 수준 스타일 (예 : 블록에 포함 된 H1)에 이르기까지 특정 레이어를 형성하는 방법을 이해하기 시작할 수 있습니다.
의 데이터를 사용하여 더 많은 스타일 규칙을 얻고 글로벌 스타일로 설정된 모든 규칙을 덮어 씁니다.
파일 (전체 코드)의 짧은 사본-포장입니다. 그러나 여기에서 원래 코드를 찾을 수 있습니다. ```
{
"버전": 2,
"설정": {},
// ...
"스타일": {
// ...
"요소": {
"버튼": {
"국경": {
"반경": "0"
},
"색상": {
"배경": "var (-WP-- 프리 세트-콜로 프라이어)",
"텍스트": "var (-WP-- 프레셋 컬러-대회)"
},
": 호버": {
"색상": {
"배경": "var (-WP-- PreSet-Color-대회)",
"텍스트": "var (-WP-- 프레셋 컬러-베이스)"
}
},
":집중하다": {
"색상": {
"배경": "var (-WP-- PreSet-Color-대회)",
"텍스트": "var (-WP-- 프레셋 컬러-베이스)"
}
},
":활동적인": {
"색상": {
"배경": "var (-WP-- 프리셋 컬러-초등 회)",
"텍스트": "var (-WP-- 프레셋 컬러-베이스)"
}
}
},
"H1": {
"타이포그래피": {}
},
// ...
"제목": {
"타이포그래피": {
"Fontweight": "400",
"LineHeight": "1.4"
}
},
"링크": {
"색상": {
"텍스트": "var (-WP-- 프레셋 컬러-대회)"
},
": 호버": {
"타이포그래피": {
"TextDecoration": "없음"
}
},
":집중하다": {
"타이포그래피": {
"TextDecoration": "Underline Dashed"
}
},
":활동적인": {
"색상": {
"텍스트": "var (-WP-- 프리셋 컬러-고등학교)"
},
"타이포그래피": {
"TextDecoration": "없음"
}
},
"타이포그래피": {
"TextDecoration": "밑줄"
}
}
},
// ...
},
"TemplateParts": {}
} <.> {
"버전": 2,
// ...
"스타일": {
// 글로벌 레벨 스타일
"요소": {},
// 블록 레벨 스타일
"블록": {
"코어/검색": {
"요소": {
"버튼": {
"색상": {
"배경": "var (-WP-- 프레셋 컬러-4 분기)",
"텍스트": "var (-WP-- 프레셋 컬러-베이스)"
}
}
},
// ...
}
}
}
} <.>
{
"버전": 2,
"스타일": {
// 글로벌 레벨 스타일
"요소": {
"제목": {
"색상": "var (-WP-- 프레셋 컬러-베이스)"
},
"H2": {
"색상": "var (-WP-- 프리셋 컬러-프라이팬)",
"타이포그래피": {
"fontsize": "클램프 (2.625rem, calc (2.625rem ((1VW -0.48REM) * 8.4135)), 3.25REM)" "
}
}
},
// 블록 레벨 스타일
"블록": {}
}
} <.>
theme.json
물론 theme.json
예를 들어
객체의 링크 스타일은 블록 자체가 아닙니다. 그러나 링크는 블록에 사용될 수 있으며 theme.json
theme.json
JSON 요소에 대한 자세한 내용은 Gutenberg 플러그인 Github 리포지토리에서 WordPress 제안 및이 공개 티켓을 참조하십시오.
나는 CSS 스타일이없는 빈 WordPress 테마 인 Emptytheme을 사용합니다. 새 페이지에 버튼 블록을 추가하겠습니다.
theme.json 파일 에서이 새로운 스타일의 위치를 정확히 알 수 있습니다. 이것은 JSON 요소 스타일이 WordPress 코어 스타일보다 우선한다는 것을 알려줍니다.
뷰 코드 <code>{
"version": 2,
"settings": {},
// etc.
"styles": {
// etc.
"elements": {
"button": { ... },
"h1": { ... },
"heading": { ... },
},
},
"templateParts": {}
}</code>
<code>
所有按钮都在全局级别（`styles.elements.button`）设置样式。
我们也可以在DevTools中确认这一点。请注意，名为`.wp-element-button`的类是选择器。相同的类也用于设置交互式状态。
同样，所有这些样式都在全局级别发生，来自`theme.json`。每当我们使用按钮时，它都将具有相同的背景，因为它们共享相同的选择器，并且没有其他样式规则覆盖它。
顺便说一句，WordPress 6.1添加了对使用`theme.json`中的伪类（包括`:hover`、`:focus`和`:active`）或全局样式UI设置某些元素（如按钮和链接）的交互式状态样式的支持。Automattic工程师Dave Smith在一个YouTube视频中演示了此功能。
我们可以在`theme.json`中（最好在子主题中，因为我们使用的是默认WordPress主题）或在站点编辑器中的全局样式设置中覆盖按钮的背景颜色（不需要子主题，因为它不需要代码更改）。
但是，按钮将同时更改。如果我们想在按钮是特定块的一部分时覆盖背景颜色怎么办？这就是块级样式发挥作用的地方。
#### 元素的块级样式
为了了解如何在块级别使用和自定义样式，让我们更改包含在搜索块中的按钮的背景颜色。请记住，有一个按钮块，但我们正在做的是在搜索块的块级别覆盖背景颜色。这样，我们只在那里应用新颜色，而不是将其全局应用于所有按钮。
为此，我们在`theme.json`的`styles.blocks`对象上定义样式。没错，如果我们在`styles.elements`上定义所有按钮的全局样式，我们可以在`styles.block`上定义按钮元素的块特定样式，这遵循类似的结构：
</code>
{
"버전": 2,
"스타일": {
// 글로벌 레벨 스타일
"요소": {},
// 블록 레벨 스타일
"블록": {}
}
} <.>
<code>
看到了吗？我在`styles.blocks.core/search.elements.button`上设置了背景和文本属性，并使用了WordPress中预设的两个CSS变量。
结果？搜索按钮现在是红色的（`--wp--preset--color--quaternary`），默认按钮块保留其亮绿色背景。
我们也可以在DevTools中看到更改。
如果我们想设置包含在其他块中的按钮的样式，也是如此。按钮只是一个例子，所以让我们再看一个。
### 示例：在每个级别设置标题样式
让我们用一个例子来巩固所有这些信息。这次，我们将：
- 全局设置所有标题的样式
- 设置所有二级标题元素的样式
- 设置查询循环块中二级标题元素的样式
首先，让我们从`theme.json`的基本结构开始：
</code>
<code>
这为我们的全局和块级样式建立了轮廓。
#### 全局设置所有标题的样式
让我们将`headings`对象添加到我们的全局样式并应用一些样式：
</code>
{
"버전": 2,
"스타일": {
// 글로벌 레벨 스타일
"요소": {
"제목": {
"색상": "var (-WP-- 프레셋 컬러-베이스)"
},
"H2": {
"색상": "var (-WP-- 프리셋 컬러-프라이팬)",
"타이포그래피": {
"fontsize": "클램프 (2.625rem, calc (2.625rem ((1VW -0.48REM) * 8.4135)), 3.25REM)" "
}
}
},
// 블록 레벨 스타일
"블록": {
"코어/쿼리": {
"요소": {
"H2": {
"타이포그래피": {
"Fontsize": 3.25rem
}
}
}
}
}
}
} <.>
WordPress 블록 테마에서 CSS 스타일 관리
- Christopher Nolan원래의
- 2025-03-10 10:01:09147검색
CSS가 WordPress 테마로 작성되는 방법은 극적으로 변화하고 있습니다. 최근에 WordPress가 크게 홍보하는 새로운 문서 인 WordPress에서 Fluid Font 지원을 추가하는 기술을 공유했습니다. WordPress는 Site-Whole Editing (FSE) 기능을 지원하는 WordPress 테마 스타일을 정의하기위한 중심적인 소스가 될 새로운 문서입니다.
는 여전히 블록 테마에서 필요한 파일이지만 효과가 감소하고 주제에 대한 메타 정보를 등록하는 데만 사용됩니다. 즉, theme.json는 여전히 활발한 발전을 받고 있습니다. 즉, 우리는 ,
메소드가 주제 개발자에게 이점이되는지를 대단히 설명합니다. style.css
WordPress 스타일의 진화
style.css
Twenty Twenty-One (TT1) :
style.css 이것은 최초의 진정한 블록 기반 기본 WordPress 테마이며 우리가 처음 만난 theme.json. 이 파일에는 373 줄의 코드 만 포함되어 있습니다. 주요 개발자들은 CSS가없는 테마로 만들기 위해 조정 된 노력을 기울였습니다. theme.json
style.css
그러나 theme.json의 CSS를 JSON 속성-값 쌍으로 즉시 교체하지 마십시오. 이 작업을 고려하기 전에 여전히 style.css, Gutenberg 플러그인 또는 다른 곳의 다른 레이어에서 나온 것입니까? style.css
벤의 게시물을 읽을 가치가 있지만 요점은이 인용문에 있습니다.
theme.json
theme.json
theme.json API를 사용하도록 장려함으로써 올바르게 해결할 수 있습니다. theme.json
위 내용은 WordPress 블록 테마에서 CSS 스타일 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!