WordPress 6.0ブロックのテーマでスタイルのバリエーションを作成する方法-CSSチュートリアル-php.cn

ブロックテーマの特徴であるグローバルスタイルは、ブロックテーマを作成することで私のお気に入りの部分の1つです。 WordPressのグローバルスタイルのバリエーションの概念は、Gutenberg 12.5で導入されました。これにより、テーマ作成者は、色、フォント、タイポグラフィ、間隔などのさまざまな組み合わせでブロックテーマの代替バリエーションを作成できます。異なるテーマ。

グローバルスタイルパネルUIは、アクティブな開発反復です。この機能の開発の詳細は、このGitHubチケット（＃35619）でここで見つけると追跡できます。

この記事では、代替 /スタイル /theme.jsonファイルを使用してグローバルスタイルの証明のバリエーションを作成し、カラーパレットのみを交換して、異なるカラーモードで子供のテーマを作成します。

前提条件

この記事は、WordPressブロックのテーマを基本的に理解している人と、完全なサイトエディター（FSE）インターフェイスを使用することの親しみやすさを目的としています。テーマとFSEをブロックするのが初めての場合は、WordPressブロックのテーマとサイトエディターのドキュメントのこの深い紹介で、CSS-Tricksから始めることができます。この完全なサイト編集Webサイトは、この記事で説明したブロックテーマやスタイルのバリエーションなど、すべてのFSE機能を学習するための最も最新のチュートリアルガイドの1つです。

グローバルスタイルのバリエーション

背景については、グローバルスタイルのバリエーションを簡単に概説しましょう。 Twenty22（TT2）のテーマリードとAutomattic Design DirectorのKjell Reigstadは、このツイートとGithubチケット＃292を子供のテーマとしてグローバルなスタイルのバリエーションを導入しました。チケットで、Kjellは、最初は代替色のパターンとフォントの組み合わせとして意図されていたが、シンプルな子供のテーマを構築するために使用できると指摘しています。

Kjellのこの例は、サイドバーで利用可能なオプションからさまざまなスタイルの組み合わせを選択できるかを示しています。

それ以来、Automatticテーマチームは、以下を含む、可変子のテーマ（可変色とフォントのみ）を作成するためのコンセプトを実験しています。

青、クリーム、スレート、黄色のバリエーションを備えた地質学者
黒、緑、赤、白、黄色のバージョンを備えたクアドラット

グローバルスタイルスイッチャー

Gutenberg 12.5のリリースでは、A /Stylesフォルダーの下に保存されている異なるTheme.jsonファイルを介して、同じテーマの異なるテーマの外観をすばやく簡単に切り替えることができるグローバルスタイルスイッチャーが導入されました。

Theme.jsonを介してグローバルスタイルのバリエーションを切り替えることを許可するという概念は、しばらくの間Githubで議論されてきました。 GutenbergのリードエンジニアであるMatias Venturaは、最近WordPress 6.0ロードマップに追加することで、新たな重要性を示しました。

embraceスタイルは、JSONのバリエーションによって駆動されます。これは、新しいデフォルトテーマに関するさまざまなビデオでからかわれ、完全に発表され、6.0で提示される必要があります。並行した目標の1つは、スタイルだけで作成されたTT2のいくつかの明確なバリエーションを作成することです。（35619）
Matias Ventura、「6.0への予備ロードマップ」

テーマスタイルバリエーションスイッチャーの最新の開発イテレーションは、Gutenberg 13.0で利用でき、WordPress 6.0に含まれています。 WordPress 6.0ビデオの探索では、Automattic製品リエゾンAnne McCarthyは、この記事で説明したスタイルバリエーションやWebFonts API（5:18を開始）など、主要な機能の概要を提供します。

テーマスタイルのバリエーションと子のテーマ

前の記事では、ビルディングブロックの子供のテーマを簡単に取り上げました。グローバルなスタイルのバリエーションは、代替Theme.jsonと子のテーマの間の境界線を曖昧にしています。たとえば、最近リリースされたAlante-Dark Childのテーマとその親のテーマの唯一の違いは、このようなグローバルなテーマスタイルをオーバーライドする子テーマのJSONファイルです。

同様に、WordPressディレクトリの2つの最近のAlaraの子のテーマ（FramboiseとRichmond）は、単一のThems.jsonファイルのみが異なります。

セクション1：テーマスタイルのバリエーションの作成

子テーマフォルダーのルートでは、JSONファイルとしてスタイルのバリエーションを保持するA /Stylesフォルダーを作成します。このデモの例では、Twenty22のTheme.jsonカラーパレットの3つのバリエーションを作成しました。Blue.json、Maroon.json、およびPink.json - 前面と背景の色を交換して：

管理者ダッシュボード（外観→エディターにある）からスタイルアイコンをクリックした後の最終結果は次のとおりです。

オリジナルのスタイルに加えて、「青」、「マルーン」、「ピンク」カラースタイルのアイコンを表示する他のスタイルボタン（最近改訂されたブラウザスタイルに改訂されました）をクリックします。

スタイルを変更して選択するには、優先バリエーションを選択し、ブラウザのフロントエンドに表示される保存ボタン（右上）をクリックします。

ハバーアニメーション効果を備えた代替スタイルのバリエーションとファイル名にラベルを追加することは、Gutenberg 13.0で利用できます。

ステップ1：セットアップとインストール

まず、いくつかのダミーコンテンツを備えたWordPressサイトをインストールしてセットアップします。このデモでは、新鮮なWordPressインストールを作成し、22222のテーマをアクティブにし、Gutenbergテストデータを追加しました。

この記事で説明したテーマスタイルのバリエーションとWebFonts APIには、Gutenberg 13.0プラグインまたはWordPress 6.0のインストールとアクティベーションが必要です。

ステップ2：TT2チャイルドテーマを作成します

このデモチャイルドテーマの例では、ヘッダーとフッターの色から体の色を少し変えて、すべてのサイトコンテンツが中央に配置されています。

ステップ3：JSONファイルを作成します

青、マルーン、ピンクのファイルを使用して、子供をテーマのルートフォルダーに作成 /スタイルを作成します。

 __ style.css
__ theme.json
__ functions.php
__ index.php
__テンプレート
__ ...
__パーツ
__ ...
__スタイル
__ blue.json
__ Maroon.json
__ pink.json

ログイン後にコピー

ステップ4：代替テーマJSONファイルを作成します

次に、希望のカラーパレット /スタイルフォルダーを使用して、alterate-theme.jsonファイルを作成します。このデモの例では、3つのカラーパレット（青、マルーン、ピンク）を作成しました。これがMaroon.jsonのコードです：

 {
  「バージョン」：2、
  「タイトル」：「マルーン」、
  "設定"： {
    "色"： {
      「パレット」：[
        {"Slug"： "Foreground"、 "color"： "＃7c290f"、 "name"： "Foreground"}、
        {"slug"： "background"、 "color"： "#ffffff"、 "name"： "background"}、
        {"Slug"： "Foreground-Dark"、 "color"： "＃000000"、 "name"： "Foreground Dark"}、
        {"slug"： "background-body"、 "color"： "＃ffd8be"、 "name"： "background body"}、
        {"Slug"： "Primary"、 "color"： "＃000000"、 "name"： "Primary"}、
        {"slug"： "secondary"、 "color"： "＃ffe2c7"、 "name"： "secondary"}、
        {"Slug"： "Tertiary"、 "color"： "＃55acee"、 "name"： "tertiary"}
      ]
  }、
  「タイポグラフィ」：{}
}、
「スタイル」：{
  "色"：
      {
        「バックグラウンド」：「var（ -  wp--preset  -  color  -  background-body）」、
        「テキスト」：「var（ -  wp--preset  -  color  -  foreground-dark）」
      }、
  「要素」：{
      "リンク"： {
        "color"：{"text"： "var（ -  wp--preset  -  color  -  primary）"}
      }
    }
  }
}

ログイン後にコピー

他の2つの代替blue.jsonとpink.jsonは、それぞれの青とピンクの16進数とともに、前景と背景、前景色、一次色の特性の値を交換します。

セクション2：ユースケースの例

前の記事で述べたように、私はブロックテーマに取り組んでおり、自分のプロジェクトサイトに使用しています。 GutenbergプラグインのテーマスタイルのバリエーションとWebFonts API機能に触発されて、私は代替のダークカラーモードとWebFonts APIを構成することで、進行中のブロックテーマを調整し始めました。

このセクションでは、この記事で作成された進行中のブロックテーマのデモ兄弟であるTT2 Gopherブロックの作成方法について説明します。テーマには、Gutenberg 12.8リリースで利用可能になったテーマスタイルのバリエーションとWebFonts APIを使用して作成されたMaroon、Dark、およびLight Colorモードが含まれます。

TT2 Gopherテーマのハイライトには、中央の単一列コンテンツディスプレイ、個別のヘッダーとフッター、よりユーザーフレンドリーなアーカイブ、検索ページが含まれます。

TT2 Gopherブロックのコピーは、GitHubリポジトリで入手できます。これをフォークしてカスタマイズできます。

WordPressでダークモードを作成します

まず、ダークモードの背景。 Dark Modeは個人的な好みであり、開発者はこのサイトのようなITまたは他のモードトグルスイッチを提供します。これは、ほとんどの通常の開発者にとって小さな仕事ではありません。ダークモードの作成は、このダークモードとダークモードのタイポグラフィのこの完全なガイドなど、CSS-Tricksでよくカバーされています。

WordPressサイトでは、WP Dark Modeプラグインを使用してダークモードトグルを追加できます。 WP EngineとWPBeginnerのErin Myersは、WP Dark Modeプラグインの使用方法について説明し、Brenda Barronはこのwpexplorer投稿に他のダークモードプラグインオプションをリストしています。

プラグインなしのWordPressブロックテーマでダークモードを作成するには、いくつかのステップが伴います。 1年以上前、Ari Stathopoulosは、GitHubのTT1ブロックテーマの暗いサポートを作成しました。ここの例を見ると、それはいくつかのJavaScriptの知識を含み、資産（例：Toggler、カスタマイズ、エディター - モード - サポート）、暗い色のCSS変数、および拡張functions.phpファイルを作成します。

この短いビデオでは、AutomatticのAnne McCarthyは、TT2 /StylesフォルダーにJSONスニペットのKLLEJRの要点を追加することにより、グローバルスタイルのバリエーションでTT2ブロックテーマの暗いモードを作成することがどれほど簡単かを示しています。

デモTT2 GOPHERブロックテーマを作成します

TT2 Gopherは、デフォルトの22のテーマの非常にシンプルで修正されたバージョンです。マルーン、ダーク、ホワイトの3つのテーマスタイルのバリエーションが含まれています。

各カスタマイズステップを説明することはこの記事の範囲を超えていますが、WordPress.orgのBlock Editorハンドブックの詳細については、WordPress.orgのブロックエディターハンドブックから詳細をご覧ください。

TT2 Gopherテーマの色とフォントの組み合わせの簡単な概要には、以下が含まれます。

ライトモード
- ヘッダーは白で、フッターにはスモーキーな体の背景色があります。
- オープンサンズはプライマリフォントです。
ダークモード
- ヘッダーとフッターは黒で、体の背景には明るい暗い色があります。
- Source Serif Proはプライマリフォントです。
マルーンモード
- ヘッダーとフッターはどちらも暗いマルーン色で、黄色がかった体の背景が明るいです。
- ワークサンズがプライマリフォントです。

テーマスタイルのバリエーションを作成した方法について簡単に説明します。

WebFontsの追加と構成

Gutenberg 12.8 Pluginは、著者が「パフォーマンスに優しい、プライバシーにやさしい、将来の根性の方法でローカル（バンドル）フォントをロードできるようにする新しいWebFonts APIを導入しました。この機能は、PHP Wayまたはthemson Wayをブロックテーマに実装できます。

現在、この機能はブロックテーマにバンドルされたフォントでのみ動作し、プライバシーの懸念のためにGoogleホストのフォントをサポートしていません。 WebFonts API開発の現在のステータスの詳細については、このMake WordPressコアの記事とこのWP Tavernの記事で説明しています。

ステップ1：ブロックテーマにフォントをダウンロードして追加します

TT2テーマは、ソースSerif Proフォントファイルをテーマのアセット/フォントフォルダーに追加します。 He Githubリポジトリには、2つの追加のフォント（ワークサンとパブリックサン）も提供されています。

ステップ2：WebFontsの登録

TT2テーマでは、ローカルソースSerif Pro WebFontsがそのfunctions.phpファイルでPHPに登録されています。

 function twentytwentytwo_get_font_face_styles（）{
  戻る "
  @font-face {
    font-family： 'source serif pro';
    font-weight：200 900;
    フォントスタイル：通常。
    フォントストレッチ：通常。
    font-display：swap;
    src：url（ '"。get_theme_file_uri（' assets/fonts/sourceserif4variable-roman.ttf.woff2 '）。"'）format（ 'woff2'）;
  }
  @font-face {
    font-family： 'source serif pro';
    font-weight：200 900;
    フォントスタイル：イタリック;
    フォントストレッチ：通常。
    font-display：swap;
    src：url（ '"。get_theme_file_uri（' assets/fonts/sourceserif4variable-italic.ttf.woff2 '）。"'）format（ 'woff2'）;
  }
  ";
}

ログイン後にコピー

Gutenberg 12.8は、Theme.jsonファイルでローカルWebフォントを登録する機能を導入しました。デモTT2 GopherテーマのJSONスニペットは、ローカルワークのsans Webフォントがマルーンテーマスタイルのバリエーションに登録されている方法を示しています。

 「タイポグラフィ」：{
  「フォントファミリー」：[
    {
      「fontfamily」： "'work sans'、-apple-system、blinkmacsystemfont、 'helvetica neue'、 'helvetica'、sans-serif"、
      「ナメクジ」：「ワークサンズ」、
      「名前」：「ワークサンズ」、
      「フォントフェイス」：[
        {"fontfamily"： "work sans"、 "fontdisplay"： "block"、 "fontweight"、 "fontstyle"： "normal"、fontstretch "：" normal "、" src "
        {"fontfamily"： "work sans"、 "fontdisplay"： "block"、 "fontweight"： "700"、 "fontstyle"： "normal"、fontstretch "：" normal "、" src "
        {"fontfamily"： "work sans"、 "fontdisplay"： "block"、 "fontweight"： "400"、 "fontstyle"： "italic"、 "fontstretch"： "normal"、 "SRC"
        {"fontfamily"： "work sans"、 "fontdisplay"： "block"、 "fontweight"： "700"、 "fontstyle"： "italic"、 "fontstretch"： "normal"、 "src"
      ]
    }
  ]
}

ログイン後にコピー

ブロックテーマでローカルWebフォントを登録および使用する方法に関する追加情報については、このチュートリアルとこのWP Tavernの記事で説明しています。

テーマスタイルのバリエーションを作成します

前のセクションで説明した手順に従って、Theme.jsonファイルの2つの代替バージョン（white.json and black.json）を作成しました。

この機能には、theme.jsonのバージョン2が必要です。 Gutenberg 12.5であるため、タイトルをTheme.jsonに追加して、サイトエディターまたはファイル名にスタイルラベルを表示することもできます（拡張機能なし）デフォルトで表示されます。

これがwhite.jsonの例です：

 {
  「バージョン」：2、
  「タイトル」：「白」、
  "設定"： {
    "色"： {
      「パレット」：[
        {"slug"： "foreground"、 "color"： "＃000000"、 "name"： "Foreground"}、
        {"slug"： "background"、 "color"： "＃f2f2f2"、 "name"： "background"}、
        {"slug"： "background-header"、 "color"： "#ffffff"、 "name"： "background header"}、
        {"Slug"： "Primary"、 "color"： "＃0d0d0d"、 "name"： "Primary"}、
        {"slug"： "secondary"、 "color"： "＃f0ee6"、 "name"： "secondary"}、
        {"Slug"： "Tertiary"、 "color"： "＃eb3425"、 "name"： "tertiary"}、
        {"Slug"： "Quaternary"、 "color"： "＃7c7e83"、 "name"： "Quaternary"}
      ]
    }、
    「タイポグラフィ」：{
      「フォントファミリー」：[
        {
        「fontfamily」： "\" public sans \ "、sans-serif"、
        「名前」：「パブリックサンズ」、
        「ナメクジ」：「パブリックサンズ」、
        「フォントフェイス」：[
          {"fontfamily"： "public sans"、 "fontdisplay"： "block"、 "fontstyle"： "normal"、 "fontstretch"： "normar"、 "src"：["file：。assets/fonts/publicsans/publicsans-variablefont_wght.tf.woff2"]}
          {"fontfamily"： "public sans"、 "fontdisplay"： "block"、 "fontstyle"： "italic"、 "fontstretch"： "normal"、 "src"：["file：./ fonts/publicsans/publicsans-italic-variable_wght.tf.woff2"]}
        ]
      }
    ]
  }
}、
「スタイル」：{
  「ブロック」：{
    「コア/イメージ」：{
      「フィルター」：{"duotone"： "var（ -  wp--preset  -  duotone  -  default-filter）"}
    }、
    「コア/ポストタイトル」：{
      「タイポグラフィ」：{"fontfamily"： "var（ -  wp--preset  -  font-family-cublic-sans）"、 "fontweight"： "700"、 "fontsize"： "var（ -  wp-- custom--ティプグラフィー - フォントサイズ -  gigantic）"}
    }、
    「コア/クエリタイトル」：{
      「タイポグラフィ」：{"fontfamily"： "var（ -  wp--preset  -  font-family-cublic-sans）"、 "fontweight"： "300"、 "fontsize"： "var（ -  wp-- custom--ティプグラフィー - フォントサイズ -  gigantic）"}
    }、
    「コア/ポストフィーチャード - イメージ」：{
      「フィルター」：{"duotone"： "var（ -  wp--preset  -  duotone  -  default-filter）"}
    }、
    「Core/Site-Logo」：{
      「フィルター」：{"duotone"： "var（ -  wp--preset  -  duotone  -  default-filter）"}
    }、
    「コア/サイトタイトル」：{
      「タイポグラフィ」：{"fontfamily"： "var（ -  wp--preset  -  font-family-cublic-sans）"、 "fontsize"： "var（ -  wp-- preset  -  font-size----非正規）、" fontweight "：" normal "}
    }
    }、
    "color"：{"background"： "var（ -  wp-preset  -  color  -  background）"、 "text"： "var（ -  wp--preset  -  color  -  foreground）"}、
    「要素」：{
      「H1」：{
        「タイポグラフィ」：{"fontfamily"： "var（ -  wp--preset  -  font-family-cublic-sans）"、 "fontsize"： "600"、 "fontsize"： "var（ -  wp- custom--ティプグラフィー - フォントサイズ -  colossal）"}
      }、
      「H2」：{
        「タイポグラフィ」：{"fontfamily"： "var（ -  wp--preset  -  font-family--public-sans）"、 "fontweight"： "600"、 "fontsize"： "var（ -  wp- custom--ティプグラフィー - フォントサイズ -  gigantic）"}
      }、
      「H3」：{
        「タイポグラフィ」：{"fontfamily"： "var（ -  wp--preset  -  font-family-wublic-sans）"、 "fontweight"： "300"、 "fontsize"： "var（ -  wp- custom--ティプグラフィー - フォントサイズ -  huge）"}
      }、
      「H4」：{
        「タイポグラフィ」：{"fontfamily"： "var（ -  wp--preset  -  font-family-cublic-sans）"、 "fontweight"： "300"、 "fontsize"： "var（ -  wp--preset-- font-size-x-large）"}
      }、
      「H5」：{
        「タイポグラフィ」：{"fontfamily"： "var（ -  wp--preset  -  font-family-cublic-sans）"、 "fontweight"： "700"、 "Text Transform"： "fotpercase"、 "fontsize"： "var（ -  wp-- preset-font-size-medium）"}
      }、
      「H6」：{
        「タイポグラフィ」：{"fontfamily"： "var（ -  wp--preset  -  font-family-cublic-sans）"、 "fontweight"： "400"、 "Text Transform"： "fotpercase"、 "fontsize"： "var（ -  wp--- preset- font-size-medium）"}
      }、
      "リンク"： {
        "color"：{"Text"： "var（ -  wp  -  custom  -  color-color-foreground）"}
      }
    }、
    「タイポグラフィ」：{"fontfamily"： "var（ -  wp--preset  -  font-family--public-sans）"、 "fontsize"： "var（ -  wp--preset-- font-size---正規）"}
  }
}

ログイン後にコピー

このコードは、Theme.jsonからカラーパレットを交換し、ローカルパブリックSANSフォントファイルを登録および定義します。

Black.jsonも非常によく似ており、functions.phpファイルに登録されているソースSerif Proフォントを使用しています。

テーマスタイルのバリエーションを備えたブロックテーマの例

Twenty22 - スタイルのバリエーションを含む最初のデフォルトテーマ。 WordPress 6.0にバンドルされた更新された1.2には、「青」、「ピンク」、「スイス」の3つのスタイルのバリエーションが含まれており、ユーザーは異なるビジュアルスタイル間ですばやく交換できます。
霜 - 暗いテーマスタイルのバリエーションを備えた実験ブロックテーマ。
Alara - 100を超えるアクティブなインストールがあり、7つのスタイルのバリエーションが含まれています。
WABI - Power Rich TaborのWebサイトには、3つのスタイルのバリエーションと300のアクティブなインストールが含まれています。
Brisky - 600を超えるインストールと1つの暗いテーマスタイルのバリエーションがあります。
ペンダント - GitHubで開発中のAutomatticテーマチームによるテーマには、3つのテーマスタイルのバリエーションが含まれています。

このWP Tavernの記事では、ジャスティンは、この新しい機能がサイト訪問者の設定に縛り付けることでテーマの著者によって利用される可能性があることを推測していますが、一部のユーザーは季節またはイベントベースのデザインの外観を与えるサイトを微調整することを好むかもしれません。これはおそらく少し早いですが、この強力な機能がテーマの著者とユーザーの両方によってどのように利用されるかがわかります。

まとめます

さまざまなタイポグラフィと色の組み合わせを備えたブロックテーマのスタイルバリエーションの作成は、プラグインを使用せずに大幅に簡素化されています。これは、私の個人的なプロジェクトで応募する予定のブロックエディターの私のお気に入りの機能の1つです。

私の意見では、テーマスタイルのバリエーションは間違いなくブロックテーマのゲームチェンジャーであり、この便利な機能により、子供のテーマや多くのクッキーカッターブロックテーマを必要としないかもしれません。 Automatticテーマチームのブロックカンバスまたはブロックベース（GitHubでの進行中のベースブロックテーマ）に似たいくつかの適切に設計されたベースブロックテーマは、テーマスタイルのバリエーションでカスタマイズできます。