WordPress5.8から導入されたTheme.jsonとは?

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. WordPress5.8から導入されたTheme.jsonとは?

WordPress5.8から導入されたTheme.jsonとは?

WordPress5.8から導入されたTheme.jsonとは?

WordPressはバージョン5からGutenbergと呼ばれるブロックエディタを利用した記事の作成ができるようになりました。

ブロックエディタでは、画像や見出し文章などをブロックという単位で挿入し、コンテンツ(記事)を作成できるようになりました。
このブロックエディタの導入によって、文字や画像の位置調整など、レイアウト変更がHTMLやCSSの知識がなくても設定できるようになり、より柔軟なコンテンツ作成が出来るようになりました。

そして、WordPressのバージョン5.8からさらにTheme.jsonというテーマを理想的に正しく管理できる仕組み(ファイル)が新しく追加されました。

このTheme.jsonで何が出来るのか、またテーマに適用する方法を紹介したいと思います。

Theme.jsonとは

WordPressは、PHPなどの知識がなくてもサイトのテーマカラーやフォントなどのデザインシステムを簡単に変更できる「フルサイト編集(FSE)」と呼ばれる仕組みを開発しており、theme.jsonはその根幹となる機能です。

Theme.jsonはテーマで使用するブロックエディターの設定をJSONファイルで定義することができます。
これまでadd_theme_support関数で設定していたカスタマイズをtheme.jsonに移行し、より管理しやすくなります。

theme.jsonで設定した項目はCSSカスタムプロパティーとしてスタイルシート内に生成され、テーマ内のブロックの見た目を簡単に制御することができるようになります。

具体的には、以下のような設定を予め設定しておくことができます。

  • 特定のブロック(例えば見出しなど)に対して、カスタマイズオプションを追加する。
  • デフォルトのテーマカラー、フォントサイズなどのスタイル。
  • ブロックエディターのデフォルトのレイアウト。(エディタの幅)

注意点として、theme.jsonを使用するためにはテーマが完全にブロックで構成されたテーマでなければなりません。完全にブロックで構成されたテーマを「ブロックテーマ」と呼び、そうでないテーマを「クラシックテーマ」と呼びます。ブロックエディタを使用しているテーマでも条件を満たしていなければ「クラシックテーマ」の扱いになるので、注意が必要です。

ブロックテーマであるための条件については、WordPress公式のブロックテーマーの作成が参考になります。

またtheme.jsonではCSSカスタムプロパティを使用するため、CSSカスタムプロパティ(CSS変数)に対応していないブラウザ(IE11など)では正しく機能しません。

Theme.jsonの使い方

theme.jsonの機能は、使用しているテーマディレクトリの直下にtheme.jsonファイルを追加することで有効化されます。

theme.jsonで設定できる一番大きなフィールドは下記の5つがあります。
version以外はさらに細かく値を指定していきます。

この内customTemplatestemplatePartsを利用するためには、GutenBergプラグインをインストール/有効化する必要があります。
今回はこの2つを省いたフィールドの内容を書きたいと思います。

version

versionはtheme.jsonのフォーマットバージョンです。
現在はまだ1しかありません。

settings

settingsではブロックエディター自体や各ブロックの機能の有効化や無効化などの設定、またカスタムカラーやカスタムフォントサイズを設定できます。

大きく以下のプロパティがあります。

  • color… 色に関する設定
  • spacing… スペース(余白)に関する設定
  • typography…文字に関する設定
  • border… ボーダーに関する設定
  • custom… CSSカスタムプロパティの生成
  • blocks… ブロック個別の機能の有効/無効の設定
  • layout… コンテンツ幅の設定

入力例

styles

サイト全体やブロックに対してインラインCSSを出力します。

サイト全体のスタイルは、stylesフィールドの直下にborder, color, spacing, typographyのプロパティを設定することで定義できます。

例えばcolor.backgroundの値をredに設定すると、サイト全体(body要素)の背景色がredになります。

また、個別のブロックに対してスタイルを適用したい場合はstylesフィールドの直下にblocksフィールドを追加し、下層にborderなどのプロパティを設定することで定義できます。

elementフィールドだと、ブロックではなく特定の要素(h1タグやaタグなど)に対してもスタイルを定義できます。

これからのWordPressのアップデート

現在WordPress5.9では、今回紹介したtheme.jsonのバージョン2が組み込まれているようです。
今後はtheme.jsonでテーマ全体のデザインやレイアウトの管理を強化できるようになっていきそうですね。

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら
Webデザイナー、Webプログラマ募集中!