WordPressテーマでCSSがどのように書かれているかは劇的に変化しています。私は最近、WordPressを介してWordPressでFluid Fontサポートを追加するテクノロジーを共有しました。WordPressによって大幅に宣伝されている新しいドキュメントは、サイト編集（FSE）機能をサポートするWordPressテーマスタイルを定義するための中心的な真実の源となります。 theme.json
style.cssはブロックテーマの必要なファイルですが、効果が大幅に低下しており、トピックのメタ情報を登録するためにのみ使用されます。つまり、style.cssはまだ積極的な開発中です。つまり、theme.json、theme.json、さらにはブロックレベルで定義されたスタイルを見つける移行期にいることを意味します。 styles.css
では、これらのWordPress fse時代のスタイルは実際にどのようなものですか？これが私がこの記事で紹介したいものです。 WordPressテーマ開発者マニュアルには、ブロックテーマスタイルに関するドキュメントがないため、ここで説明したのは、WordPressテーマに関する現在の状況と将来の議論について収集した情報です。 WordPress Styleの進化
theme.jsonデフォルトのWordPressテーマの進化を調べることで、現在のステータスについても学ぶことができます。これまでのところ、サイト全体の編集をサポートする3つのデフォルトのテーマがあります：
style.cssにあります。いいえtheme.jsonファイル。 TT1ブロックは、ブロックエディターの時代でスタイルを見たのは初めてです。これは、モデルではなくトレーラーと考えることができます。 theme.jsonに初めて遭遇したときです。このファイルには、373行のコードのみが含まれています。主な開発者は、CSSのないテーマにするための調整された努力をしています。 style.css
theme.json
style.css
ただし、のJSON属性値ペアに置き換えないでください。これを検討する前に、style.cssでサポートするCSSスタイルのルールがまだあります。現在、残りの重要な問題が議論されています。目標は、すべてのCSSスタイルのルールをtheme.jsonに完全に移動し、theme.jsonの異なるソースを1つのUIに統合して、WordPressサイトエディターにグローバルスタイルを直接セットアップすることです。 theme.json
theme.jsonこれにより、比較的困難な状況になります。テーマスタイルをオーバーライドする明確なパスがないだけでなく、スタイルが何であるかは不明です - それらは
、Gutenbergプラグインまたは他の場所の異なるレイヤーからのものですか？ theme.json
style.cssなぜstyle.cssの代わりにtheme.jsonを選択するのですか？
theme.jsonベンの投稿を読む価値がありますが、ポイントはこの引用にあります：
レイアウト、プリセット、またはブロックスタイル、上書きCSSは、統合と相互運用性の障壁を引き起こす可能性があります。フロントエンドとエディターの視覚的な一貫性は、維持がより困難になり、ブロック内でのアップグレードがオーバーライドと競合する可能性があります。さらに、カスタムCSSは、他のブロックテーマではポータブルではありません。
「基本」定義されたスタイルの階層は、トピックの著者が
APIを可能な限り使用するよう奨励することで正しく解決できます。
CSSをJSONに移動することの主な利点の1つは、JSONが機械可読形式であることです。つまり、APIを取得してWordPressサイトエディターUIに公開できることを意味し、ユーザーがデフォルト値を変更し、CSSを作成せずにサイトの外観をカスタマイズできます。また、ブロックを一貫してスタイリングする方法を提供しながら、特定のレイヤーを作成する構造を提供して、ユーザー設定がtheme.jsonで定義された設定よりも優先度が高いようにします。グローバルスタイルのUIでのテーマレベルのスタイルとユーザー定義のスタイルとの間のこの相互作用により、JSONメソッドは非常に魅力的です。 theme.json
もちろん、他の利点があり、WP EngineのMike McAlisterはこのTwitterスレッドにいくつかリストされています。 Make WordPress Coreブログに関する詳細な議論で、より多くの利点を見つけることができます。読んだ後、JSONメソッドの利点を、古典的なトピックでスタイルを定義および上書きする利用可能な方法と比較します。
JSON要素を使用してスタイルを定義しますテーマのどの部分を設定できるかという点で、多くの進歩が見られました。 WordPress 6.1の前に、本当にできることは、タイトルとリンクのスタイルだけでした。現在、WordPress 6.1を使用すると、ボタン、タイトル、引用符、タイトルを追加できます。
json要素theme.jsonを定義することにより、これを行います。要素は、WordPressブロックに存在する単一のコンポーネントとして扱うことができます。タイトル、段落、ボタンのブロックがあるとします。これらの個々の部分は要素であり、そのスタイルを定義する
JSON要素を説明するより良い方法は、ブロックの複雑さを必要としないトピックとブロックの低レベルコンポーネントであることです。これらは、ブロックで定義されていないがブロック間で使用できるHTMLプリミティブの表現です。 WordPress（およびGutenbergプラグイン）でそれらがどのようにサポートされているかについては、ブロックエディターマニュアルおよびCarolina Nymarkによるこのサイト全体の編集チュートリアルで説明されています。
たとえば、theme.jsonelementsオブジェクトのリンクスタイルですが、ブロック自体ではありません。ただし、リンクはブロックで使用でき、
<code>{
"version": 2,
"settings": {},
// etc.
"styles": {
// etc.
"elements": {
"button": { ... },
"h1": { ... },
"heading": { ... },
},
},
"templateParts": {}
}</code>以下は、ワードプレス6.1の前に
でスタイルを整えるために使用できるカロライナが提供する要素の表です。ご覧のとおり、これはまだ初期段階にあり、GutenbergプラグインからWordPressコアに移動するものがまだたくさんあります。ただし、CSSファイルやDevtoolsでセレクターを検索せずに、テーマにすべてのタイトルをグローバルに設定することがどれだけ速くなるかを確認できます。 elementsさらに、グローバル要素（タイトルなど）から個々の要素（H1など）やブロックレベルのスタイル（ブロックに含まれるH1など）に至るまで、
の構造が特定のレイヤーをどのように形成するかを理解し始めることができます。 theme.json
jsonおよびcss特異性
のJSON要素で定義されているスタイルは、デフォルトのテーマスタイルと見なされます。 Global Style UIでユーザーが設定したものはすべて、デフォルト値をオーバーライドします。 theme.json
ユーザースタイルは、デフォルトのテーマスタイルよりも特異性が高くなっています。ボタンブロックを見て、それがどのように機能するかを理解しましょう。 emptyThemeを使用します。これは、CSSスタイルのない空白のWordPressテーマです。新しいページにボタンブロックを追加します。
わかりました、WordPress Coreにはいくつかの簡単なスタイルが付属していることがわかります。次に、WordPress 6.1のデフォルトのTT3テーマに切り替えてアクティブになります。ボタンでページを更新すると、ボタンのスタイルが変更されます。
これらの新しいスタイルがTT3のファイルのどこにあるかを正確に見ることができます。これは、JSON要素のスタイルがWordPressコアスタイルよりも優先されることを示しています。
次に、TT3をChildテーマに上書きすることでTT3を変更します。ボタンブロックのデフォルトの背景色は赤に設定されています。 theme.json
グローバルスタイルのUIを使用して、2つのボタンの背景色を青に変更し、テキストを変更しました。そこの青はテーマスタイルよりも優先されることに注意してください！
スタイルエンジン
これは非常に高速ですが、WordPressブロックテーマでCSS特異性を管理する方法についての良いアイデアです。しかし、これらのスタイルが生成される場所が明確ではないため、これは完全な絵ではありません。 WordPressには、どこかから来る独自のデフォルトスタイルがあります。のデータを使用して、より多くのスタイルルールを取得し、それらのルールをグローバルスタイルで設定したもので上書きします。
これは、新しいスタイルのエンジンが解決することが期待される問題です。スタイルエンジンは、WordPress 6.1の新しいAPIであり、スタイルを生成し、スタイルのアプリケーションの場所を一貫して保つことを目指しています。言い換えれば、それはすべての可能なスタイルのソースを必要とし、ブロックスタイルを正しく生成することに個別に責任を負います。私は知っています、私は知っています。いくつかのスタイルを書くために、他の抽象化層の上に抽象化層が追加されました。ただし、スタイルが複数の場所から来ることができることを考えると、集中スタイルのAPIを持つことはおそらく最もエレガントなソリューションです。 初めてスタイルエンジンを見るだけです。実際、チケットによると、以下の作業はこれまでに行われています。
JSON要素を使用して json要素のHTMLプリミティブと、タイトル、ボタン、リンクなどのデフォルトのコンテンツスタイルを基本的に定義する方法について説明しました。それでは、実際の およびブロックレベルの2つのコンテキストがあります。グローバルレベルのスタイルの定義は、ブロック固有のスタイルが好まれるようにブロックレベルよりも低く、ブロックが使用される場所で一貫性が維持されるようにします。
json要素のグローバルスタイル
code {
「バージョン」：2、
// ...
「スタイル」：{
//グローバルレベルスタイル
「要素」：{}、
//ブロックレベルスタイル
「ブロック」：{
「コア/検索」：{
「要素」：{
"ボタン"： {
"色"： {
「バックグラウンド」：「var（ - wp---preset-color - Quaternary）」、
「テキスト」：「var（ - wp--preset-color-ベース）」
}
}
}、
// ...
}
}
}
} {
「バージョン」：2、
「スタイル」：{
//グローバルレベルスタイル
「要素」：{}、
//ブロックレベルスタイル
「ブロック」：{}
}
} {
「バージョン」：2、
「スタイル」：{
//グローバルレベルスタイル
「要素」：{
「見出し」：{
「色」：「var（ - wp--preset-color-ベース）」
}、
}、
//ブロックレベルスタイル
「ブロック」：{}
}
} {
「バージョン」：2、
「スタイル」：{
//グローバルレベルスタイル
「要素」：{
「見出し」：{
「色」：「var（ - wp--preset-color-ベース）」
}、
「H2」：{
"color"： "var（ - wp--preset-color-primary）"、
「タイポグラフィ」：{
「fontsize」：「クランプ（2.625rem、calc（2.625rem（（1vw -0.48rem） * 8.4135））、3.25rem） "
}
}
}、
//ブロックレベルスタイル
「ブロック」：{}
}
} {
「バージョン」：2、
「スタイル」：{
//グローバルレベルスタイル
「要素」：{
「見出し」：{
「色」：「var（ - wp--preset-color-ベース）」
}、
「H2」：{
"color"： "var（ - wp--preset-color-primary）"、
「タイポグラフィ」：{
「fontsize」：「クランプ（2.625rem、calc（2.625rem（（1vw -0.48rem） * 8.4135））、3.25rem） "
}
}
}、
//ブロックレベルスタイル
「ブロック」：{
「コア/クエリ」：{
「要素」：{
「H2」：{
「タイポグラフィ」：{
「fontsize」：3.25rem
}
}
}
}
}
}
}監査とマージバックエンドは、CSSコードの場所をサポートするブロックを生成し、同じ場所から（複数の場所ではなく）配信されます。これには、マージン、充填、タイポグラフィ、色、境界などのCSSルールが含まれます。
基本的に、これは、どこから来たとしても、トピックのすべてのCSSスタイルルールを含む単一のAPIを構築するための基礎です。 WordPressが6.1の前にインラインスタイルを挿入し、セマンティッククラス名のシステムを構築する方法をクリーンアップします。
ファイルのtheme.jsonが json要素をどのように使用し、さまざまなスタイルのコンテキストでどのように動作するかを見てみましょう。
新しいデフォルトのTT3テーマを見て、ボタンのスタイルを確認しましょう。これは、TT3
ファイル（これは完全なコードです）の短いコピーパステで、グローバルスタイルのセクションを示していますが、元のコードはこちらから見つけることができます。 theme.json <code>{
"version": 2,
"settings": {},
// etc.
"styles": {
// etc.
"elements": {
"button": { ... },
"h1": { ... },
"heading": { ... },
},
},
"templateParts": {}
}</code><code>
</code>
<code>
看到了吗？我在`styles.blocks.core/search.elements.button`上设置了背景和文本属性，并使用了WordPress中预设的两个CSS变量。
结果？搜索按钮现在是红色的（`--wp--preset--color--quaternary`），默认按钮块保留其亮绿色背景。
我们也可以在DevTools中看到更改。
如果我们想设置包含在其他块中的按钮的样式，也是如此。按钮只是一个例子，所以让我们再看一个。
### 示例：在每个级别设置标题样式
让我们用一个例子来巩固所有这些信息。这次，我们将：
- 全局设置所有标题的样式
- 设置所有二级标题元素的样式
- 设置查询循环块中二级标题元素的样式
首先，让我们从`theme.json`的基本结构开始：
</code>
<code>
这为我们的全局和块级样式建立了轮廓。
#### 全局设置所有标题的样式
让我们将`headings`对象添加到我们的全局样式并应用一些样式：
</code>
<code>
这将所有标题的颜色设置为WordPress中的预设基本颜色。让我们在全局级别更改二级标题元素的颜色和字体大小：
</code>
<code>
现在，所有二级标题元素都设置为主要预设颜色，并具有流体字体大小。但也许我们希望在将二级标题元素用于查询循环块时使用固定fontSize：
</code>
以上がWordPressブロックテーマのCSSスタイルの管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
