WordPressテーマでCSSがどのように書かれているかは劇的に変化しています。私は最近、WordPressを介してWordPressでFluid Fontサポートを追加するテクノロジーを共有しました。WordPressによって大幅に宣伝されている新しいドキュメントは、サイト編集（FSE）機(jī)能をサポートするWordPressテーマスタイルを定義するための中心的な真実の源となります。 theme.json

WordPress Styleの進(jìn)化

theme.jsonデフォルトのWordPressテーマの進(jìn)化を調(diào)べることで、現(xiàn)在のステータスについても學(xué)ぶことができます。これまでのところ、サイト全體の編集をサポートする3つのデフォルトのテーマがあります：

• Twenty21（TT1）：これは、ブロックと互換性のある最初の古典的なデフォルトテーマバージョンです。また、ブロックバージョン（TT1ブロック）もあり、それ以來ブロックテーマの信頼できるリソースとなっています。ただし、TT1のCSSの5900列はすべてstyle.cssにあります。いいえtheme.jsonファイル。 TT1ブロックは、ブロックエディターの時代でスタイルを見たのは初めてです。これは、モデルではなくトレーラーと考えることができます。
• 222（TT2）：これは、最初の真にブロックベースのデフォルトのWordPressテーマであり、theme.jsonに初めて遭遇したときです。このファイルには、373行のコードのみが含まれています。主な開発者は、CSSのないテーマにするための調(diào)整された努力をしています。 style.css theme.json
23（TT3）：
• これは、WordPress 6.1で公開されており、必要なファイルにCSSがない最初のテーマの例です。 style.css ただし、

のJSON屬性値ペアに置き換えないでください。これを検討する前に、style.cssでサポートするCSSスタイルのルールがまだあります?，F(xiàn)在、殘りの重要な問題が議論されています。目標(biāo)は、すべてのCSSスタイルのルールをtheme.jsonに完全に移動し、theme.jsonの異なるソースを1つのUIに統(tǒng)合して、WordPressサイトエディターにグローバルスタイルを直接セットアップすることです。 theme.json theme.jsonこれにより、比較的困難な狀況になります。テーマスタイルをオーバーライドする明確なパスがないだけでなく、スタイルが何であるかは不明です - それらは

、Gutenbergプラグインまたは他の場所の異なるレイヤーからのものですか？ theme.json style.cssなぜstyle.cssの代わりにtheme.jsonを選択するのですか？

従來のCSSファイルではなく、WordPressがJSONベースのスタイルの定義に戻る理由を疑問に思うかもしれません。グーテンバーグの開発チームのベン?ドワイヤーは、

theme.jsonベンの投稿を読む価値がありますが、ポイントはこの引用にあります：

「基本」定義されたスタイルの階層は、トピックの著者が

APIを可能な限り使用するよう奨勵することで正しく解決できます。

CSSをJSONに移動することの主な利點(diǎn)の1つは、JSONが機(jī)械可読形式であることです。つまり、APIを取得してWordPressサイトエディターUIに公開できることを意味し、ユーザーがデフォルト値を変更し、CSSを作成せずにサイトの外観をカスタマイズできます。また、ブロックを一貫してスタイリングする方法を提供しながら、特定のレイヤーを作成する構(gòu)造を提供して、ユーザー設(shè)定がtheme.jsonで定義された設(shè)定よりも優(yōu)先度が高いようにします。グローバルスタイルのUIでのテーマレベルのスタイルとユーザー定義のスタイルとの間のこの相互作用により、JSONメソッドは非常に魅力的です。 theme.json

もちろん、他の利點(diǎn)があり、WP EngineのMike McAlisterはこのTwitterスレッドにいくつかリストされています。 Make WordPress Coreブログに関する詳細(xì)な議論で、より多くの利點(diǎn)を見つけることができます。読んだ後、JSONメソッドの利點(diǎn)を、古典的なトピックでスタイルを定義および上書きする利用可能な方法と比較します。

json要素theme.jsonを定義することにより、これを行います。要素は、WordPressブロックに存在する?yún)g一のコンポーネントとして扱うことができます。タイトル、段落、ボタンのブロックがあるとします。これらの個々の部分は要素であり、そのスタイルを定義する

JSON要素を説明するより良い方法は、ブロックの複雑さを必要としないトピックとブロックの低レベルコンポーネントであることです。これらは、ブロックで定義されていないがブロック間で使用できるHTMLプリミティブの表現(xiàn)です。 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でセレクターを検索せずに、テーマにすべてのタイトルをグローバルに設(shè)定することがどれだけ速くなるかを確認(rèn)できます。 elementsさらに、グローバル要素（タイトルなど）から個々の要素（H1など）やブロックレベルのスタイル（ブロックに含まれるH1など）に至るまで、

の構(gòu)造が特定のレイヤーをどのように形成するかを理解し始めることができます。 theme.json

のJSON要素で定義されているスタイルは、デフォルトのテーマスタイルと見なされます。 Global Style UIでユーザーが設(shè)定したものはすべて、デフォルト値をオーバーライドします。 theme.json

ユーザースタイルは、デフォルトのテーマスタイルよりも特異性が高くなっています。ボタンブロックを見て、それがどのように機(jī)能するかを理解しましょう。 emptyThemeを使用します。これは、CSSスタイルのない空白のWordPressテーマです。新しいページにボタンブロックを追加します。

わかりました、WordPress Coreにはいくつかの簡単なスタイルが付屬していることがわかります。次に、WordPress 6.1のデフォルトのTT3テーマに切り替えてアクティブになります。ボタンでページを更新すると、ボタンのスタイルが変更されます。

これらの新しいスタイルがTT3のファイルのどこにあるかを正確に見ることができます。これは、JSON要素のスタイルがWordPressコアスタイルよりも優(yōu)先されることを示しています。

次に、TT3をChildテーマに上書きすることでTT3を変更します。ボタンブロックのデフォルトの背景色は赤に設(shè)定されています。 theme.json

スタイルエンジン

のデータを使用して、より多くのスタイルルールを取得し、それらのルールをグローバルスタイルで設(shè)定したもので上書きします。

これらのスタイルはインラリングされていますか？それらは別々のスタイルシートにいますか？たぶん彼らはページに注入されたのでしょうか？

これは、新しいスタイルのエンジンが解決することが期待される問題です。スタイルエンジンは、WordPress 6.1の新しいAPIであり、スタイルを生成し、スタイルのアプリケーションの場所を一貫して保つことを目指しています。言い換えれば、それはすべての可能なスタイルのソースを必要とし、ブロックスタイルを正しく生成することに個別に責(zé)任を負(fù)います。私は知っています、私は知っています。いくつかのスタイルを書くために、他の抽象化層の上に抽象化層が追加されました。ただし、スタイルが複數(shù)の場所から來ることができることを考えると、集中スタイルのAPIを持つことはおそらく最もエレガントなソリューションです。

初めてスタイルエンジンを見るだけです。実際、チケットによると、以下の作業(yè)はこれまでに行われています。

<code>{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}</code>

<code>
</code>

<code>
看到了嗎？我在`styles.blocks.core/search.elements.button`上設(shè)置了背景和文本屬性，并使用了WordPress中預(yù)設(shè)的兩個CSS變量。

結(jié)果？搜索按鈕現(xiàn)在是紅色的（`--wp--preset--color--quaternary`），默認(rèn)按鈕塊保留其亮綠色背景。

我們也可以在DevTools中看到更改。

如果我們想設(shè)置包含在其他塊中的按鈕的樣式，也是如此。按鈕只是一個例子，所以讓我們再看一個。

### 示例：在每個級別設(shè)置標(biāo)題樣式

讓我們用一個例子來鞏固所有這些信息。這次，我們將：

- 全局設(shè)置所有標(biāo)題的樣式
- 設(shè)置所有二級標(biāo)題元素的樣式
- 設(shè)置查詢循環(huán)塊中二級標(biāo)題元素的樣式

首先，讓我們從`theme.json`的基本結(jié)構(gòu)開始：
</code>

<code>
這為我們的全局和塊級樣式建立了輪廓。

#### 全局設(shè)置所有標(biāo)題的樣式

讓我們將`headings`對象添加到我們的全局樣式并應(yīng)用一些樣式：
</code>

<code>
這將所有標(biāo)題的顏色設(shè)置為WordPress中的預(yù)設(shè)基本顏色。讓我們在全局級別更改二級標(biāo)題元素的顏色和字體大?。?</code>

<code>
現(xiàn)在，所有二級標(biāo)題元素都設(shè)置為主要預(yù)設(shè)顏色，并具有流體字體大小。但也許我們希望在將二級標(biāo)題元素用于查詢循環(huán)塊時使用固定fontSize：
</code>

以上がWordPressブロックテーマのCSSスタイルの管理の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。