22とWordPressのブロックテーマの詳細

公開: 2021-12-20

当初の計画より少し遅れていますが、新しいWordPressのデフォルトテーマを取得しています。 その名前は22です!

新しいWordPressのデフォルトテーマは、次のWordPress5.9リリースに付属しています。 新しいテーマについてもっと知りたいと思ったので、WordPress5.9を実行しているローカル開発環境にTwentyTwenty-Twoをインストールしてテストしました。

新しいWordPressテーマの詳細を説明するために、考えをまとめる前に結果を示します。

22プレビュー
新しいWordPressのデフォルトテーマであるTwentyTwenty-Twoのプレビュー(画像ソース:WordPress.org)

Twenty Twenty-Twoは、これまでで最も柔軟で、軽量で、カスタマイズ可能なデフォルトのテーマになるように設計されています。 ブロック、パターン、およびテンプレートをテストするための優れた遊び場を提供します。

ブロックテーマであるため、フルサイト編集、グローバルスタイル、ナビゲーションブロック、およびWordPress5.9で最も待望されている機能である新しい画像ギャラリーをよりよく探索するのに役立ちます。

Twenty Twenty-Twoが最初のデフォルトのブロックテーマであるとすぐに言わなければなりません!

新しいテーマの最も野心的な目標の1つは、ユーザーに力を与えることです。 箱から出して利用できる非常に多くのパターンとテンプレートにより、ユーザーは数回クリックするだけで複雑なレイアウトを構築できます。 残りはスタイルのカスタマイズです。

技術的な観点から、Twenty Twenty-Twoについて書くことは、WordPress5.9に付属する最新かつ最も強力な機能について書くことと大差ありません。 しかし、Twenty Twenty-Twoは、新しいサイト編集機能をよりよく理解し、プラットフォームの将来についてよりよく理解するための虫眼鏡を提供してくれます。

そこで、ここでは新しいテーマを紹介します。

最初に、ユーザーがWordPress5.9とTwentyTwenty-Twoで体験する新しいサイト編集フローについて説明します。

その後、TwentyTwenty-Twoで実装されているメインブロックのテーマ機能について詳しく説明します。 グローバルスタイルブロックパターンテンプレート、およびテンプレートパーツについて知ることができます。

しかし、TwentyTwenty-TwoとWordPressのブロックテーマについてはまだまだ多くのことが言えます。 そこで、ボーナスの章として、 theme.jsonファイルを利用してTwentyTwenty-Twoの機能を拡張する方法の概要を簡単に説明します。

さあ、仕事に取り掛かり、新しいTwentyTwenty-TwoWordPressのデフォルトテーマに飛び込みましょう。

22は新しいサイト編集フローをもたらします

いくつかのフルサイト編集機能がWordPress5.9のコアに組み込まれています。 Twenty Twenty-Twoなどのブロックテーマがインストールされた最新のWordPressバージョンを使用しているサイト所有者は、間もなく次のことができるようになります。

  • より多くのブロックとパターンを使用して投稿とページを作成および編集します
  • グローバルスタイルインターフェイスを介してtheme.jsonファイルで定義された設定とスタイルをカスタマイズします
  • ページと投稿のテンプレートを作成および編集する
  • ヘッダー、フッター、およびその他のテンプレート領域のテンプレートパーツを作成および編集します

これらすべての機能がコアに統合されたため、WordPressのコア貢献者は、情報アーキテクチャの進化について話し合い、サイト編集フロー全体を再設計しました。

Twenty Twenty-Twoをアクティブにすると、最初に気付くのは、サイトエディターへのエントリポイントがWordPressダッシュボードのメインメニューに配置されておらず、[外観]メニューの下に移動されていることです。

エディターメニュー
WordPress5.9の新しい外観メニュー

テンプレートとスタイルの編集機能を同じ外観メニューに含めると、編集エクスペリエンスが合理化されます。 アクセスしている機能がページの表示に関連していることを理解しやすくする必要があります。

新しい22のテーマに飛び込む準備はできましたか? もう探す必要はありませんクリックしてツイート

[エディター]メニュー項目は、サイトのホームページテンプレートを開きます。 読書設定に応じて、これは最新の投稿ページまたは静的ページのいずれかになります。

TwentyTwenty-Twoのサイトエディター
TwentyTwenty-Twoを使用したWordPress5.9のサイトエディター

ここで、左上隅のWordPressアイコンをクリックすると、サイトテンプレート、テンプレートパーツの3つのメニュー項目を含む新しいサイトエディターのナビゲーションメニューが表示されます。

よく見てみましょう。

エディタのナビゲーションメニュー
エディタのナビゲーションメニュー

[サイト]オプションは、ホームページテンプレート(最新のブログ記事または静的ホームページ)を開きます。

[テンプレート]メニュー項目から、使用可能なテンプレートのリストを取得します。 リスト内の任意のテンプレートをクリックして、エディターで起動できます。

この記事の執筆時点で、TwentyTwenty-Twoは11のテンプレートを提供しています。

22個のテンプレート
22のテンプレート。

右側の省略記号( )アイコンをクリックすると、カスタマイズをクリアできます。

テンプレートのカスタマイズをクリアする
テンプレートのカスタマイズをクリアする

テーマテンプレートとは異なり、カスタムテンプレートは名前の変更または削除のみが可能です(ただし、カスタムテンプレートは投稿エディターで編集できます)。

カスタムテンプレートの名前を変更または削除する
カスタムテンプレートの名前変更/削除

[テンプレートパーツ]メニュー項目には、カスタマイズのためにエディターで開くことができる使用可能なテンプレートパーツが一覧表示されます。

デフォルトでTwentyTwenty-Twoに4つのテンプレートパーツが追加されています。 変更したテンプレートにカーソルを合わせると、テンプレートがカスタマイズされたことを知らせるツールチップが表示されます。

22個のテンプレートパーツ
22個のテンプレートパーツ。

右側の省略記号( )アイコンをクリックすると、これらのカスタマイズをクリアできます。

テンプレートパーツのカスタマイズをクリアする
テンプレートパーツのカスタマイズをクリアする

テンプレートとテンプレートパーツの編集

エディタは、テンプレートとテンプレートパーツの構造をカスタマイズするためのインターフェイスを提供します。

ここでは、ブロックやパターンを簡単に追加または編集でき、変更はそのテンプレートを使用するすべてのページに自動的に適用されます。

単一投稿テンプレートの編集
単一投稿テンプレートの編集

以下の画像は、エディタの404ページのテンプレートを示しています。 これは、見出し、段落、検索ボックスのみを含む非常にシンプルなテンプレートです。 それでも、UIがどのように機能するかをよく理解できます。

404ブロックテンプレート
テンプレートエディタの22の404ブロックテンプレート

ここでは、ニーズに最も合うように編集したり、テンプレートをカスタマイズしたりできます。 たとえば、画像投稿のグリッドパターンを追加して、訪問者のエンゲージメントを高め、Webサイトのコンテンツを閲覧するように招待することができます。

画像投稿のグリッド
TwentyTwenty-Twoの404ブロックテンプレートのカスタマイズ

テンプレートエディタの上部にあるヘッダードロップダウンには、使用可能なテンプレート領域のリストが表示されます。 同じリストが[設定]サイドバーの[テンプレート]タブに表示されます。

22のテンプレート領域
22のテンプレート領域

テンプレート領域(ヘッダーなど)をクリックすると、編集するテンプレート部分に直接移動します。

右側の省略記号アイコンをクリックすると、分離テンプレートパーツエディタにアクセスできます。

分離されたテンプレートパーツエディタ
省略記号アイコンは、分離されたテンプレートパーツエディタを起動します

テンプレートパーツエディタには、ドラッグ可能なハンドルのペアも用意されており、さまざまな画面解像度でテンプレートがどのように動作するかを確認できます。

テンプレートパーツのプレビュー寸法を調整する
テンプレートパーツのプレビュー寸法を調整する

変更に満足したら、編集内容を保存し、メインのテンプレートエディタに戻って最終結果を確認します。

新しい情報アーキテクチャをさらに深く掘り下げたい場合は、次の記事を確認することをお勧めします。

  • サイト編集IAの概念:新機能を表示してアクセスする方法
  • サイト編集iAの概念–パート2

コアとなる22: theme.jsonの概要

Twenty Twenty-Twoとブロックテーマ(Bricksyなど)がどのように機能するかを完全に理解するために、 theme.jsonファイルに基づく新しいテーマ構成とスタイル設定メカニズムを見てみましょう。

WordPress 5.8で導入されたこの新しいメカニズムにより、テーマ開発者はエディターを構成し、中央の構成ポイントから機能サポートを追加できます。

Twenty Twenty-Twoでは、 theme.jsonファイルの構造は次のとおりです。

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

各セクションを簡単に見てみましょう。

バージョン

versionフィールドには、現在2である仕様バージョンが記述されています。

設定

settingsセクションでは、グローバルレベルまたはブロックレベルで設定を定義します。 トップレベルで定義された設定はすべてのブロックに影響しますが、ブロックはグローバル設定を個別にオーバーライドできます。 Twenty Twenty-Twoには、次の設定があります。

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

設定のデフォルトはプリセットと呼ばれ、特定の命名規則に基づいてCSSカスタムプロパティとクラス名を生成するために使用されます。

  • CSSカスタムプロパティ: --wp--preset--{preset-category}--{preset-slug}
  • CSSクラス名: .has-{preset-slug}-{preset-category}

テーマでプリセットを定義したら、対応するCSSカスタムプロパティを使用して、 stylesセクションのブロックと要素のスタイルを設定できます。

スタイル

stylesセクションは、テーマがブロックと要素のデフォルトスタイルを定義する場所です。 たとえば、コアButtonブロックについては次の22のスタイルを参照してください。

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

プロパティ宣言で使用されているCSSカスタムプロパティに気付くでしょう。

カスタムテンプレート

customTemplatesセクションは、テーマがカスタムテンプレートを宣言する場所です。 nametitleのフィールドは必須です。 テーマは、 postTypesプロパティを設定することにより、どの投稿タイプがテンプレートを使用できるかを宣言することもできます。

Twenty Twenty-Twoは、4つのカスタムテンプレートを提供します。

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

対応する.htmlファイルはblock-templatesフォルダーにあります。

tt2block-templatesフォルダー
TwentyTwenty-Twoのblock-templatesフォルダー

テンプレートパーツ

templatePartsセクションには、テンプレートパーツの定義が含まれています。

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

nametitleのフィールドは必須です。 テーマは、テンプレート部分がエディターでレンダリングされるarea用語を宣言することもできます。

22個のテンプレートパーツ
22個のテンプレートパーツ

テンプレートパーツの.htmlファイルは、 template-partsフォルダーにあります。

Twenty Twenty-Twoのtheme.jsonについて詳しく理解できたので、テーマの機能と新しい編集インターフェイスをさらに詳しく調べることができます。

TwentyTwenty-Twoのグローバルスタイルに飛び込みましょう。

22のグローバルスタイル

Twenty Twenty- Two'style.cssを見ると、CSS宣言の数が最小限であることに気付くと驚くかもしれません。 その理由は、スタイルがブロックベースのテーマのtheme.jsonファイルで宣言されているためです

WordPress 5.9はさらに一歩進んで、ブロックテーマのユーザーがグローバルスタイルと呼ばれるユーザーインターフェイスからサイト要素の外観をカスタマイズできるようにする新機能を導入します。

グローバルスタイルインターフェイスには、エディタの右上隅に配置された新しいスタイルアイコンからアクセスできます(グローバルスタイルインターフェイスも参照)。

そのアイコンをクリックすると、3つの別々のパネルを含む新しいスタイルサイドバーが表示されます。

  • カスタマイズのプレビューを表示するプレビューパネル
  • タイポグラフィレイアウトのコントロールの特定のグループへのアクセスを提供するグローバルスタイルパネル
  • ブロックレベルのスタイル設定へのアクセスを提供するブロックアイテム
スタイルサイドバー
TwentyTwenty-Twoのスタイルサイドバー

二十二十二のカラーパレット

[]パネルは、使用可能なパレットを編集したり、背景テキスト、またはリンクの色を割り当てたり変更したりするのに役立ちます。

パレットパネ​​ルでは、テーマパレットまたはデフォルトパレットをカスタマイズしたり、カスタムパレットを作成したりすることもできます。

TT2カラー設定
TwentyTwenty-Twoの色設定

カラーコントロールを生成するコードをもう見つけましたか?

そうでない場合は、お気に入りのコードエディタでTwentyTwenty-Twoのtheme.jsonを開きます。 次のカラーパレット宣言があります。

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

下の画像は、上のコードがTwentyTwenty-Twoのカラーパレットとどのように一致するかを示しています。

tt2カラーパレット
TwentyTwenty-Twoのカラーパレット

ここで、特定のブロックのデフォルトの背景色を変更するとします。 ブロックの背景に別の色を選択すると、要素のbackground-colorプロパティに別のCSS変数が割り当てられるだけです。 以下の画像はその例を示しています。

TT2カスタムプロパティ
背景色として使用される22の原色

そしてそれがすべてです! カスタマイザーにカスタムCSSコードを1行追加したり、そのための子テーマを作成したりする必要はありません。

しかし、いくつかの追加の例を使用して、TwentyTwenty-Twoのグローバルスタイルを探索し続けましょう。

タイポグラフィ設定

タイポグラフィパネルでは、Webサイトのテキスト要素とリンク要素のタイポグラフィスタイルをグローバルレベルでカスタマイズできます。

各アイテムは、フォントファミリ、サイズ、および行の高さをカスタマイズするためのコントロールのグループへのアクセスを提供します。

TT2タイポグラフィ設定
TwentyTwenty-Twoのタイポグラフィ設定

どのコードがこれらのコントロールを生成するのか疑問に思っていますか?

Twenty Twenty-Twoのtheme.jsonを開き、 typographyのセクションを見つけます。 次の設定が表示されます。

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

上記のコードから、2つのフォントファミリと5つのフォントサイズが表示されると予想される場合があります。 そして、あなたは正しく推測したでしょう。

上記のコードがグローバルスタイルのタイポグラフィ設定にどのように変換されるかを次に示します。

TT2のフォントファミリとフォントサイズ
TwentyTwenty-Twoのタイポグラフィスタイル

どの設定が線の高さコントロールを生成するかを推測できます。 Twenty Twenty-Twoでは、いくつかの設定宣言のショートカットであるappearanceToolsプロパティによって有効になっているため、特定の設定は見つかりません(次のセクションを参照)。

レイアウトおよび外観ツール

グローバルスタイルサイドバーの最後の要素はレイアウトです。 この記事の執筆時点では、 paddingコントロールのみが含まれています。

TwentyTwenty-Twoのレイアウト設定
TwentyTwenty-Twoのレイアウト設定

Twenty Twenty-Twoでは、レイアウトパネルはappearanceTools設定プロパティによって有効になります。これは、一度に複数の設定を有効にするために使用できるブール値です。

 { "settings": { "appearanceTools": true } }

"appearanceTools": trueは、次の宣言ブロックを置き換えるだけです。

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

OK —これで、 theme.jsonファイルで宣言された設定が対応するグローバルスタイルコントロールとどのように一致するかを理解できたと思います。

新しいWordPressのデフォルトテーマの全体像を把握するために欠けているパズルのピースがまだ1つあります:ブロックパターン

22の22のブロックパターン

Twenty Twenty-Twoは、ほとんどがパターンのコレクションであると言えます—そしてそれはほとんどそうです。 Twenty Twenty-Twoには、すぐに使用できる大量のブロックパターンがあり、Webページのネストされたブロックの驚くべき予測不可能な構造を構築するために選択できます。

ここでの重要な用語は、ユーザーのエンパワーメントです。 HTMLやCSSの知識がなくても、ブロックパターンを使用すると、魅力的なポートフォリオから1ページのプロモーションWebサイトまで、あらゆる種類のものを構築できるため、これは適切です。

また、WordPress 5.9は、フルスクリーンモーダルでパターンを参照できるツールである新しいパターンエクスプローラーを使用して、パターンシステムに大幅な改善をもたらします。

クライアントサイトに超高速、安全、そして開発者に優しいホスティングが必要ですか? KinstaはWordPress開発者を念頭に置いて構築されており、豊富なツールと強力なダッシュボードを提供します。 私たちの計画をチェックしてください

22のパターンエクスプローラー
22のパターンエクスプローラー

新しいツールを使用すると、パターンディレクトリから直接ブロックパターンをすばやく簡単にインポートすることもできます。 これにより、WordPressユーザーと開発者の両方に新しい可能性が開かれるため、将来的にはその使用量が大幅に増える可能性があります。

WordPressパターンディレクトリ
WordPressパターンディレクトリ

Twenty Twenty-Twoには、5つのカテゴリにわたる多くのパターン(65以上)が含まれています。

22のパターンカテゴリ
22のパターンカテゴリ

この堅実なパターンのセットは、新しいデフォルトテーマに付属するテンプレートやテンプレートパーツと完全にペアになり、本当に素晴らしい編集体験を実現します。

デュオトーンのレイヤード画像
デュオトーンのレイヤード画像
ヘッダーと詳細を含むビデオ
ヘッダーと詳細を含むビデオ
テキスト付きの2つの画像
テキスト付きの2つの画像

ブロックパターンをまだ試す機会がない場合は、簡単な例を使用して、ブロックパターンがこのような強力なツールと見なされる理由を説明します。

インデックステンプレートとシングルポストテンプレートからデフォルトのフッターを削除し、それを別の22ブロックパターンに置き換えたいとします。

[外観]メニューまたはWordPressフロントエンドツールバーボタンからサイトエディターを起動して、インデックステンプレートをカスタマイズします。

[インデックス]ボタンをクリックして、ページで使用可能なテンプレート領域のリストを示すヘッダードロップダウンを表示します。 [フッター]の横にある省略記号ボタンをクリックしてから、[フッター編集]をクリックします。

テンプレートインスペクター
テンプレートインスペクター

上記のように、これにより、分離されたテンプレートパーツエディタが起動します。

分離されたテンプレートパーツエディタ
分離されたテンプレートパーツエディタのデフォルトの22フッター

次に、ブロックインサーターを開き、[パターン]をクリックします。

新しいパターンエクスプローラーツールを起動し、[ 22フッター]カテゴリを選択して、選択したフッターを選択します。

TwentyTwenty-Twoのパターンエクスプローラー
TwentyTwenty-Twoのパターンエクスプローラー

次に、必要に応じてブロックを追加および編集します。

分離されたテンプレートパーツエディタでフッターを編集する
分離されたテンプレートパーツエディタでフッターを編集する

ヘッダーを保存し、変更に満足したらサイトを再確認します。

次の画像は、ヘッダーとフッターをカスタマイズした3つのテンプレート(インデックス、シングルポスト、セパレータなしのシングルポスト)を比較しています。

異なる22のテンプレートで比較されたヘッダーとフッターのカスタマイズ
異なる22のテンプレートで比較されたヘッダーとフッターのカスタマイズ

子をテーマにした22を拡張する

ブロックテーマの子テーマの作成は、クラシックテーマの子テーマの作成とはまったく異なります。

ただし、ブロックテーマの構造を十分に理解すれば、TwentyTwenty-Twoまたはその他のブロックテーマの子テーマを作成するのは難しくありません。

それでは、22ベースのWebサイトのルックアンドフィールをカスタマイズする方法を考えてみましょう。

1.22の子テーマを設定する

/ wp-content / themesディレクトリに、新しいフォルダを作成し、好きな名前を付けます(テーマ開発標準に従って)。 この例では、子テーマフォルダーを22-childと呼びました。

次に、 style.cssファイルが必要です。 お気に入りのコードエディタを開き、次のスタイルシートを作成します。

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

いつものように、必要に応じてフィールドを編集できます。

これで、子のテーマをプレビューできます。 [外観]>[テーマ]管理画面でアクティブ化できます。

2.グローバル設定のカスタマイズ

WordPress 5.9以降、 theme.jsonファイルを持つ子テーマは親テーマの設定を継承します。 子のtheme.jsonが一連のスタイルを定義している場合、それらのスタイルは親のスタイルの上に適用されます。

したがって、元の選択をすべて再定義するのではなく、設定とスタイル定義の小さなカスタムブロックのみを含むtheme.jsonファイルを作成できます。

カスタムカラーパレットを宣言する方法

Twenty Twenty-Twoの子テーマを作成する場合、最も簡単なタスクはカラーパレットを置き換えることです。 以下に示すように、子供のtheme.jsonに新しいカラーパレットを定義するだけです。

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

ファイルを保存して、サイトエディタに戻ります。 上で定義したカラーパレットは、デフォルトのTwentyTwenty-Twoのカラーパレットを置き換えているはずです。

子テーマのカラーパレット
子テーマのカラーパレット

色はパレット自体に順番に表示され、名前はGithubで説明されているベストプラクティスと命名規則に従う必要があります。

カロライナ・ナイマークによるこの詳細な概要で、 theme.jsonカラーオプションの詳細を読むことができます。

カスタムデュオトーンフィルターを宣言する方法

デフォルトのデュオトーンカラーをカスタムのフィルターセットに置き換えることもできます。

これを行うには、 paletteプロパティと同じレベルで子供のtheme.json設定に次のコードを追加するだけです。

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

ファイルを保存し、ブロックエディタで結果を確認します。 デュオトーンフィルターは1つだけ表示されます。

子テーマのデュオトーンフィルター
子テーマのデュオトーンフィルター

3.ブロックスタイルのカスタマイズ

前述したように、WordPress 5.9では、グローバルスタイルインターフェイスからtheme.jsonの設定とスタイルをカスタマイズできるようになりました。

ブロックスタイルは、ブロックが対応するblock.jsonファイルで特定の機能のサポートを宣言している場合にのみ、グローバルスタイルインターフェイスからカスタマイズできます。 ただし、子テーマのtheme.jsonのデフォルトのブロック設定をオーバーライドできます。

ここで、投稿タイトルとグループブロックスタイルを上書きするとします。 以下に示すように、追加またはオーバーライドするスタイルを定義するだけです。

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

上記の例では、 core/post-titleのフォントファミリ、背景色、パディング値、およびcore/groupの上下の余白を変更しました。

以下の画像は、公開サイトで表示される結果を示しています。

カスタマイズされた投稿タイトルブロック
カスタマイズされた投稿タイトルブロック

レビューは以上です。

この投稿の範囲を超えるため、現時点では子のテーマについて詳しくは説明しません。 その間、Githubで22の子テーマの例をさらに見つけることができます。

Twenty Twenty-Twoは、これまでで最も柔軟で、軽量で、カスタマイズ可能なデフォルトのテーマになるように設計されています。このガイドには、さらに多くの魅力があります。 クリックしてツイート

概要

新しいWordPressのデフォルトテーマであるTwentyTwenty-Twoとその機能(これまでにリリースされた中で最も柔軟なデフォルトテーマになります)を詳しく調べながら、WordPress5.9で導入された新しい情報アーキテクチャを発表しました。 新しいグローバルスタイルのインターフェースを少し覗いてみました。

途中で多くのエキサイティングな新機能があり、新しい編集環境が時間の経過とともにより堅牢で信頼性が高く、機能的になっていることは明らかです。

多くの新しいWordPress機能が進行中ですが、他の機能は消えていくか、重要性が低下しています。 多くのユーザーは、カスタマイザーに何が起こるのか、既存のテーマとの下位互換性を維持するための最善の方法について疑問を抱いています。

ただし、従来のテーマから突然飛躍して、単一の境界でテーマをブロックすることを期待するべきではありません。 現在、4種類のテーマから選択できます。

  • ブロックテーマ:FSE用に設計されたテーマ
  • ユニバーサルテーマ:カスタマイザーとサイトエディターの両方で機能するテーマ
  • ハイブリッドテーマtheme.jsonなどのFSE機能をサポートするクラシックテーマ
  • クラシックテーマ:PHPテンプレート、functions.phpなどのテーマ。

したがって、今のところ恐れることはありません。ブロックテーマに切り替える準備がまだできていない場合は、選択できるソリューションがまだたくさんあります。

そして今、それはあなた次第です! 今すぐ大きな飛躍を遂げ、ブロックテーマの使用を開始する準備はできていますか? 以下のコメントで私たちとあなたの考えを共有してください。