主题.jsonをっテーマデザインンンンWordPress网站

以下は、杰夫·翁が書いた WordPress.org网站公式ブログの記事「使用Theme.json配置主题设计”を訳したものです。

WordPress 5.8（文字出版社5.8）以降、新しいツールである “主题.json”をテーマ開発に利用できるようになりました。初めて聞いたかもしれませんし、すでにこれを試用し、テーマを開発しているかもしれません。いずれにせよ、今は WordPress（文字出版社）テーマにとってエキサイティングな時期ですので、この記事を読んでいただけて嬉しく思います。

当記事では、この新しいフレームワークを簡単に紹介し、実用的なヒントと例をいくつか共有することで、何ができるのかを説明していきます。

主题.json

術ば、主题.jsonはテーマのディレクトリのトップレベルにある単なるファイルです。

しかし、概念的に言えば、テーマの開発方法に大きな変化をもたらすものです。テーマの作成者は、サイトの作成者と訪問者に合わせて WordPress（文字出版社）での体験を調整するための一元的なメカニズムを利用できるようになりました。主题.jsonは、テーマ作者がグローバルスタイル、ブロックスタイル、ブロックエディターの設定をきめ細かく制御できる方法を提供します。

これらの設定と制御を単一のファイルで提供することにより、主题.jsonは、テーマのデザインと開発の多くの側面をまとめる強力なフレームワークとなります。そして、ブロックエディターが成熟し、より多くの機能が追加されていくにつれ、主题.jsonは、テーマとエディターが連携するためのバックボーンとして活躍するでしょう 💪 。

これを使う理由

なぜ主题.jsonを使うのか – その理由は、テーマの未来がこの方向に進んでいるからです。しかし、私も最初はそうでしたが、皆さんも納得するためにもっと具体的な何かが必要かもしれません。現在主题.jsonを使用する理由はいくつかあります。

色、タイポグラフィ、間隔、レイアウトなどのエディター設定を制御し、設定を管理する場所を一元化します。
スタイルがサイト全体のブロックと要素に正しく適用されることを保証します。
テーマが提供していた土台となる CSS公司の量を減らします。主题.jsonHale、スタイルシートを(トランジション、アニメーションなど) を与えるために CSS公司が必要になる場合もあるでしょう。ですが、テーマに必要な基本 CSS公司を大幅に減らすことができます。

使い方

この記事の残りの部分では、試すことができる主题.json設定をいくつかご紹介します。例では、今年のデフォルトテーマをベースとしたブロック版のテーマである tt1块…的主题.json をををををを

既存のテーマから始める場合は、WordPress/主题实验から主题.json@波纳作の fse教程)、ご自分のテーマのディレクトリのルートに追加します。

サイトのタイポグラフィ設定をグローバル (全体的) に変更する

“设置”：{“排版”：{“fontSize”：“30px”，...

上記の主题.jsonに変更を加えると、テーマの车身タイポグラフィスタイル (前と後) が次のように更新されます。

サイトの基本色設定をグローバル (全体的) に変更する

“样式”：{“颜色”：{“背景”：“#ffc0cb”，“文本”：“#6A1515”},...}

土的物语ブロック土的物语スペースとパディング土的物语を変更多する

“样式”：{“区块”：{“核心/代码”：{“间距”：{“填充”：{“顶部”：“3em”，“底部”：“3em”，“left”：“3em”，“右”：“3em”}}}}}

エディター内でボタンなどの特定のブロックにカスタムカラーパレットを設定する

“设置”：{“块”：{“核心/按钮”：{“颜色”：{“调色板”：[{“name”：“栗色”，“颜色”：“#6A1515”，“slug”：“栗色”},{“name”：“草莓冰淇淋”，“颜色”：“#FFC0CB”，“slug”：“草莓冰淇淋”}]}}}}

タイポグラフィ制御の有効化と無効化

次の例では、すべての見出しブロックにカスタムフォントサイズと行の高さを指定する機能を無効化しています。

“设置”：{“区块”：{“核心/标题”：{“排版”：{“customFontSize”：false，“customLineHeight”：假}}}}

これからについて

この記事を通じて、何が可能で、テーマがどこに向かっているのかが伝わっていることを祈ります。ここで紹介したのはテーマのデザイン設定でできることのほんの一例であり、テーマ作者の皆さんがこれからどのような作品を生み出すのか、とても楽しみにしています。

詳細については、主题.jsonに関する開発者向けのメモ(英語) と、ハンドブックにある主题.jsonのドキュメントをご覧ください。

鸟语投资稿をレビュー@凯勒、@圣沙波恩、@普里索尔、@安娜扎祖に感謝します。【訳者追記】また、翻訳レビューに協力してくださった@努卡加さんと@阿塔奇巴纳さん、ありがとうございました。