WordPressブロックテーマのスタイリングボタン

WordPress 6.1で導入された新機能は、ブロックエディターおよびサイトエディターUIにシャドウを直接適用するための制御を提供します。この記事では、特に

ファイルを使用して、WordPressブロックテーマのボタンをスタイリングする方法に飛び込みます。 theme.json

なぜボタンを選択するのですか？これは良い質問です。ここから始めましょう。

さまざまな種類のボタン

WordPressブロックエディターのコンテキストでは、2つの異なるタイプのボタンを区別する必要があります。

ボタンブロック内の

サブブロック。

他のブロック内にネストされたボタン（たとえば、記事のコメントフォームブロック）。
2. これら2つのブロックをテンプレートに追加すると、デフォルトで同じ外観があります。

しかし、そのマークは非常に異なります：

HTMLタグ名が異なることがわかります。 2つのボタンの一貫したスタイルを確保するのは、一般的なクラス名 -

および

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

- です。

.wp-block-button CSSを書く場合、これら2つのクラスをターゲットにします。しかし、私たち全員が知っているように、WordPressブロックのテーマには、スタイル管理方法が異なります。つまり、.wp-element-buttonファイルを介しています。

では、実際のCSSを書くことなく、theme.jsonでボタンスタイルをどのように定義しますか？一緒にやってみましょう。

基本的なスタイルを作成しますtheme.json

は、属性の形式で記述されたパターンの構造化されたセットです：値ペア。トップレベルの属性は「セクション」と呼ばれ、

セクションを使用します。これは、すべてのスタイルディレクティブが配置される場所です。

theme.jsonstyles

に特別な注意を払っています。このセレクターは、ブロック間で共有されるHTML要素を見つけます。以下は、私たちが使用している基本的なフレームワークです：

styles elementsボタン要素を定義する必要があるのは。

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

このボタンは、フロントエンドのボタン要素をマークするために使用されるHTML要素に対応します。これらのボタンには、2つのボタンタイプのいずれかの1つになる可能性のあるHTMLタグが含まれています。スタンドアロンコンポーネント（つまり、ボタンブロック）または別のブロックにネストされたコンポーネント（記事のコメントブロックなど）です。

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

個々のブロックをスタイリングする代わりに、共有スタイルを作成します。テーマの2つのボタンタイプのデフォルトの背景色とテキストの色を先に進みましょう。カラーオブジェクトが含まれており、背景とテキストのプロパティをサポートし、目的の値を設定します。

これにより、両方のボタンの色が変更されます。

クラスが定義したスタイルを追加していることがわかります。

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

これらはデフォルトの色です！次に、ボタンと対話するユーザーに視覚的なフィードバックを提供したいと考えています。

インタラクティブボタンスタイルを実装

これはCSSに関するサイトであるため、多くの人がリンクとボタンの相互作用ステータスにすでに精通していると思います。それらの上にマウスカーソルをホバリングし（:hover）、焦点を合わせてタブ（:focus）、クリックしてアクティブに保つことができます（:active）。以前にクリックしたことがあるユーザーに視覚的に表示される:visitedステータスさえあります。

これらはCSS疑似クラスであり、リンクまたはボタンの相互作用を見つけるために使用します。

CSSでは、このように

状態をスタイリングすることができます：:hover

in

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

では、これらの擬似クラスを使用して、既存のボタン宣言を拡張します。

theme.json

その「構造化された」プロパティに注意してください。基本的に概要に従います：

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

要素

• 要素
  • オブジェクト
    • プロパティ
      • 値
ボタンのデフォルトおよびインタラクティブなスタイルの完全な定義を完了しました。しかし、他のブロックにネストされたいくつかのボタンをスタイリングしたい場合はどうでしょうか？

各ブロックにネストされたボタンのスタイルを設定します

1つの例外を除いて、すべてのボタンに基本的なスタイルを持っていると仮定しましょう。記事のコメントフォームブロックの送信ボタンを青色にしたいと思います。どのように達成すべきですか？

このブロックは、フォーム、入力、記述テキスト、ボタンなど、よりアクティブな部分が含まれているため、ボタンブロックよりも複雑です。このブロック内のボタンを見つけるには、ボタン要素と同じJSON構造をたどる必要がありますが、

要素にマッピングされた「記事コメントフォーム」ブロックに適用する必要があります。

core/post-comments-form

で作業しなくなったことに注意してください。代わりに、実際のブロックを構成するために使用される

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

内で作業します。対照的に、ボタンは、スタンドアロンブロックとして使用できる場合でも、ブロックにネストできるため、グローバル要素と見なされます。

elements JSON構造は、要素内の要素をサポートします。したがって、記事のコメントフォームブロックにボタン要素がある場合、blocksブロック：

にそれを見つけることができます

このセレクターは、特定のブロックを見つけるだけでなく、そのブロックに含まれる特定の要素を見つけていることを意味します。これで、トピックのすべてのボタンに適用されるデフォルトボタンスタイルのセットと、記事コメントフォームブロックに含まれる特定のボタンに適用される一連のスタイルがあります。 core/post-comments-form

wordpress生成されたcssは、より正確なセレクターを持っています：

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

「記事コメントフォーム」ボタンのさまざまなインタラクティブスタイルを定義したい場合はどうなりますか？これは、デフォルトのスタイルに対して行ったことと同じですが、これらのスタイルは

ブロック内で定義されていることを除きます。

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

ブロックのボタンの場合はどうすればよいですか？

WordPressは、これらのボタンスタイルを出力するために、正しいクラスを自動的に生成および適用します。しかし、ブロックとサイト全体の編集をサポートしているが、「クラシック」PHPテンプレートも含まれている「ハイブリッド」WordPressテーマを使用した場合はどうでしょうか？または、カスタムブロックを作成した場合、ボタン付きのショートコードの古いバージョンでも作成した場合はどうなりますか？これらは、WordPressスタイルのエンジンによって処理されません！

心配しないでください。これらのすべての場合、テンプレート、ブロック、またはショートコードタグに.wp-element-buttonクラスを追加します。 WordPressによって生成されたスタイルが適用されます。

場合によっては、マーキングを制御できない場合があります。たとえば、一部のブロックプラグインはあまりにも任意であり、独自のスタイルを自由に適用する場合があります。この時点で、通常、ブロック設定パネルのAdvancedオプションに移動し、そこにクラスを適用できます。

要約

最初は「CSS」を書くのは気まずいと感じるかもしれませんが、私はそれが第二の性質であることがわかりました。 CSSと同様に、正しいセレクターを使用して、限られた数のプロパティを広範囲または非常に正確に適用できます。

theme.jsonそして、

3つの主な利点を使用することを忘れないでください：

theme.json

スタイルは、フロントエンドビューとブロックエディターのボタンに適用されます。

1. CSSは、将来のWordPressの更新と互換性があります。
2. 生成されたスタイルは、ブロックのテーマとクラシックテーマと互換性があります。別のスタイルシートにコピーする必要はありません。
プロジェクトで

スタイルを使用する場合は、経験とアイデアを共有してください。コメントやフィードバックを読むのを楽しみにしています！

以上がWordPressブロックテーマのスタイリングボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。