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

ちょっと戻って、 Ganesh Dahal が CSS-Tricks に投稿しました WordPress のブロックと要素に CSS のボックス シャドウを追加することについて尋ねたツイートへの返信. WordPress 6.1 で出荷された新機能を活用した優れた機能が多数あり、ブロック エディターとサイト エディター UI で直接影を適用するためのコントロールを提供します。

Ganesh は、その投稿でボタン要素について簡単に触れました。 それを取り上げて、WordPress のブロック テーマでボタンをスタイリングするためのアプローチをさらに掘り下げたいと思います。 具体的には、新鮮な theme.json ファイルを作成し、スキーマ内のボタンをスタイリングするためのさまざまなアプローチを分析します。

なぜボタンですか？ それは良い質問ですので、それから始めましょう。

ボタンの種類の違い

WordPress ブロックエディターのコンテキストでボタンについて話している場合、XNUMX つの異なるタイプを区別する必要があります。

1. Buttons ブロック内の子ブロック
2. 他のブロック内にネストされたボタン (例: Post Comments Form ブロック)

これらのブロックの両方をテンプレートに追加すると、デフォルトで同じ外観になります。

しかし、マークアップは大きく異なります。

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

ご覧のとおり、HTML タグ名が異なります。 それは共通のクラスです— .wp-block-button および .wp-element-button — XNUMX つのボタン間で一貫したスタイルを保証します。

CSS を作成する場合は、これら XNUMX つのクラスをターゲットにします。 しかし、私たちが知っているように、WordPress のブロック テーマにはスタイルを管理する別の方法があり、それは theme.json ファイルにソフトウェアを指定する必要があります。 ガネーシャもこれを非常に詳細にカバーしました、そしてあなたは彼の記事を読んでもいいでしょう。

では、ボタンのスタイルをどのように定義しますか theme.json 実際のCSSを書かずに？ 一緒にやりましょう。

基本スタイルの作成

theme.json プロパティ:値のペアで記述された構造化されたスキーマのセットです。 最上位のプロパティは「セクション」と呼ばれます。 styles セクション。 これは、すべてのスタイリングの指示が行われる場所です。

特に焦点を当てるのは、 elements セクションに styles. このセレクターは、ブロック間で共有される HTML 要素を対象としています。 これは、私たちが使用している基本的なシェルです:

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

したがって、私たちがする必要があるのは、 button 要素。

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

それ button フロントエンドでボタン要素をマークアップするために使用される HTML 要素に対応します。 これらのボタンには、スタンドアロン コンポーネント (つまり、Button ブロック) または別のブロック内にネストされたコンポーネント (例えば、Post Comment ブロック) の XNUMX つのボタン タイプのいずれかである HTML タグが含まれます。

個々のブロックごとにスタイルを設定するのではなく、共有スタイルを作成します。 先に進み、テーマの両方のタイプのボタンのデフォルトの背景とテキストの色を変更しましょう。 あります color そこにあるオブジェクトは、順番にサポートします background および text 必要な値を設定するプロパティ:

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

これにより、両方のボタン タイプの色が変わります。

DevTools を開いて、WordPress がボタン用に生成する CSS を確認すると、 .wp-element-button クラスは、定義したスタイルを追加します theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

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

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

このサイトは CSS に関するサイトなので、リンクやボタンのインタラクティブな状態については既にご存知の方も多いと思います。 私たちはできる :hover それらの上にマウスカーソルを置き、それらをタブで移動します :focus、それらをクリックして作成します :active. 一体、さえあります :visited ユーザーが以前にこれをクリックしたことを視覚的に示すための状態。

れたものである CSS 疑似クラス および リンクまたはボタンのインタラクションをターゲットにするためにそれらを使用します.

CSS では、 :hover このような状態:

a:hover { /* Styles */
}

In theme.json、これらの疑似クラスで既存のボタン宣言を拡張します。

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

これの「構造化された」性質に注意してください。 私たちは基本的にアウトラインに従っています：

これで、ボタンのデフォルト スタイルとインタラクティブ スタイルの完全な定義ができました。 しかし、他のブロックにネストされている特定のボタンのスタイルを設定したい場合はどうすればよいでしょうか?

個々のブロックにネストされたスタイリング ボタン

XNUMX つの例外を除いて、すべてのボタンに基本スタイルを設定するとします。 Post Comment Form ブロックの送信ボタンを青色にしたいと思います。 どうすればそれを達成できますか?

このブロックは、フォーム、入力、説明テキスト、ボタンなどの可動部分が多いため、Button ブロックよりも複雑です。 このブロックのボタンをターゲットにするには、同じ種類の JSON 構造に従う必要があります。 button 要素にマップされますが、Post Comment Form ブロックに適用されます。 core/post-comments-form 素子：

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

私たちはもう働いていないことに注意してください elements もう。 代わりに、私たちは内部で働いています blocks これは、実際のブロックを構成するために予約されています。 対照的に、ボタンはスタンドアロンのブロックとしても使用できますが、ブロックにネストできるため、グローバル要素と見なされます。

JSON 構造は、要素内の要素をサポートします。 だから、もしあれば button Post Comment Form ブロックの要素で、それを対象にすることができます core/post-comments-form ブロック：

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

このセレクターは、特定のブロックをターゲットにするだけでなく、そのブロックに含まれる特定の要素をターゲットにすることを意味します。 これで、テーマ内のすべてのボタンに適用されるボタン スタイルのデフォルト セットと、コメント投稿フォーム ブロックに含まれる特定のボタンに適用されるスタイル セットができました。

結果として、WordPress によって生成された CSS には、より正確なセレクターがあります。

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

コメント投稿フォーム ボタンにさまざまなインタラクティブ スタイルを定義したい場合はどうすればよいでしょうか。 これは、デフォルトのスタイルに対して行った方法と同じです。 core/post-comments-form ブロック：

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

ブロックに含まれていないボタンはどうですか?

WordPress は、適切なクラスを自動的に生成して適用し、これらのボタン スタイルを出力します。 しかし、ブロックとサイト全体の編集をサポートし、「クラシック」PHP テンプレートも含む「ハイブリッド」WordPress テーマを使用するとどうなるでしょうか? または、ボタンを含むカスタム ブロックを作成したり、レガシー ショートコードを持っている場合はどうでしょうか? これらはいずれも WordPress スタイルエンジン!

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

また、マークアップを制御できない状況もあるかもしれません。 たとえば、一部のブロック プラグインは少し独断的すぎて、独自のスタイルを自由に適用する場合があります。 これは、通常、ブロックの設定パネルの「詳細」オプションに移動して、そこでクラスを適用できる場所です。

包み込む

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

そして、使用することの XNUMX つの主な利点を忘れないでください。 theme.json:

1. スタイルは、フロントエンド ビューとブロック エディターの両方でボタンに適用されます。
2. CSS は、今後の WordPress の更新と互換性があります。
3. 生成されたスタイルは、ブロック テーマとクラシック テーマの両方で機能します。別のスタイルシートで何かを複製する必要はありません。

あなたが使用している場合 theme.json あなたのプロジェクトのスタイルについて、あなたの経験と考えを共有してください。 コメントやフィードバックを読むのを楽しみにしています！

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://css-tricks.com/styling-buttons-in-wordpress-block-themes/