WordPressのテーマ開発では、theme.jsonファイルを使用することで、PHPに大きく依存するプロセスを効率化することができます。そしてtheme.json内では、CSS変数（正式にはCSSカスタムプロパティ）を活用することも可能です。
今回の記事ではCSS変数について取り上げ、WordPressやtheme.jsonとの連携についてご説明します。まずは、theme.jsonとフルサイト編集（FSE）の概要、そしてこの新たなデザインアプローチにおけるCSSの役割について簡単に見ていきます。
theme.jsonとWordPressの連携
WordPress 5.8で初めて登場したtheme.jsonは、JSON構文を使って設定ファイルを構築することで、画期的なWordPressテーマの開発を可能にします。また、WordPressではこのファイルを読み込んで結果を適用するため、PHPやCSS、JavaScriptの使用量が削減されます。
フルサイト編集のグローバル設定とスタイルは、テーマのさまざまな視覚的側面を制御します。これには、カラーパレットやタイポグラフィはもちろん、レイアウトオプションや個々のブロック、要素のスタイルも含まれます。
フルサイト編集は直感的かつ高性能で、適応性にも優れますが、theme.jsonはエンドユーザーと開発者の技術のギャップを埋めてくれる存在です。theme.jsonで設定するほぼすべてのオプションは、サイトエディターでも確認可能です。
theme.jsonを使ったWordPressテーマを構築には、以下のような利点があります。
- テーマのデザイン設定を一元管理できるため、管理や更新が簡単になる
- フロントエンドのエクスペリエンス、サイトエディターとテーマのコードベースの間の複雑さが緩和される
- 今後のWordPress開発とデザインに対応できる
- WordPressの標準機能を使用することで、カスタムCSSの必要性が削減される
続いて、theme.jsonとフルサイト編集のグローバル設定およびデザインの関係性を見てみましょう。
フルサイト編集のグローバル設定とスタイル
フルサイト編集は、WordPressテーマ開発の新時代を象徴する機能であり、グローバル設定とスタイルがその中心的要素となります。ユーザーはサイトエディター上で直感的にサイトの外観のほぼすべての側面を編集できます。
これまで、CSSやサードパーティのページビルダープラグインが必要だった機能を使用して、テーマのレイアウトを簡単に調整することができます。余白や線などの多数の細かな変更を適用可能です。
この機能の多くは、theme.json（またはブロック独自のblock.jsonファイル）で有効または無効にすることができるため、全体的なサイトデザインと並行してUIのカスタマイズも可能です。
このように、幅広い設定を行うことができますが、特にテーマをゼロから構築する場合は、すべての要件を完全に満たしてくれるとは限りません。そこで一役買ってくれるのが、CSS変数です。
CSS変数を理解する
PHPやJavaScriptをはじめ、ほぼすべてのプログラミング言語では、変数を使ってコード内のさまざまな要素の値を保持します。たとえば、名前、日付、数値などの値を保存して、プログラム全体で使用することができます。
CSS3の変数は現在、ほとんどのブラウザでサポートされています（Internet ExplorerとOpera Mini以外のすべての主要ブラウザ）。
CSS変数はスタイルシート全体で再利用可能な値を保存するため、より動的で柔軟なCSSを作成することができます。1つの値を変更するだけで、複数のスタイルルールを更新できます。
CSS変数の概念は真新しいものではなく、たとえばSassプリプロセッサも同様の機能を使用しています。
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color以下はCSSの一般的な処理です。
body {
font: 100% Helvetica, sans-serif;
color: #333;
}しかしCSS変数は、これを直接ブラウザに伝えるという特徴があり、これには以下のような利点があります。
- 動的な更新：多くのプリプロセッサ変数とは異なり、JavaScriptを使ってCSS変数をリアルタイムで更新できる
- カスケードの特性：変数がCSSカスケードに従って更新されるため、より柔軟でコンテクストを考慮したスタイリングが可能
変数はコードの冗長性も減らしてくれるため、パフォーマンスも改善されます。スタイルシートは小さければ小さいほど、読み込みが速くなります。
CSS変数の構文
一般的なプリプロセッサ変数と同様、CSS変数の構文は単純です。プロパティを指定するには、ドル記号（$）ではなくダブルハイフン（–）を使用します。
:root {
--primary-color: #007bff;
}ここから、var()を使用してプロパティを要素に割り当てます。
.button {
background-color: var(--primary-color);
}また、@プロパティを使って変数を割り当てることも可能ですが、WordPressではこのプロセスを簡素化してくれます。
CSS変数を使用できる場所
CSS変数は汎用性が命。WordPressとtheme.jsonでは、以下で使用できます。
- プリセット：色、フォント、予約のプリセットを定義
- ブロックスタイル：個々のブロックに使用してスタイルの一貫性を保つ
- グローバルスタイル：サイト全体のデザインにも役立つ
いずれにしても、自由に変数を作成できます。theme.jsonで変数をどのように使用するのか、例を挙げてみます。
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"line-height": {
"body": 1.5,
"heading": 1.2
}
}
},
"styles": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--body)"
},
"blocks": {
"core/heading": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
}
}
}上記では、カラープリセットを定義し、customプロパティを使って、ページの見出しと本文にline-heightの値を定義しています。WordPressは、customを使って定義した要素のCSSプロパティを生成します。さらに、これらの変数をさまざまなスタイル、設定、ブロックなどに割り当てることができます。
CSS変数を使用するメリット
テーマを開発にCSS変数がどのように役立つのか、すでにお分かりいただけたかもしれませんが、注目したい利点は多数あります。
モジュール性と再利用性についてはすでに触れていますが、変数として定義するすべての共通値は一貫性を促進し、冗長性を減らしてくれます。これにより、結果としてテーマの潜在的なパフォーマンスが向上します。
エンドユーザーにとっても、以下のような利点があります。
- カスタマイズの簡素化：複雑なCSSの知識がなくても、ユーザやサイト所有者がテーマをカスタマイズできる。
theme.jsonで変数を公開すれば、サイトエディターから設定にアクセスできる。 - フルサイト編集との互換性の向上：変数はフルサイト編集の原則に沿うため、より柔軟で動的なテーマデザインを作成できる。
- メンテナンスと更新の簡素化：テーマ全体に共通する値を更新する必要がある際には、一箇所で変更できるため、メンテナンスが効率化され、更新や調整を管理しやすくなる。
全体として、CSS変数はテーマ開発のワークフロー改善に役立ち、一般的な変数よりも簡単に使用できます。
theme.jsonでCSS変数を定義する方法
theme.jsonでCSS変数を定義する方法を見ていきましょう。まずは書き方についてご説明します。
構文と命名規則
WordPressが提供しているcustomプロパティは、@プロパティや擬似クラス内の定義よりも扱いやすく、標準的なキー/値形式を使用します。
{
"settings": {
"custom": {
"property-name": "value"
}
}
}WordPressがこの定義を処理し、二重ハイフン（–）を使用したCSS変数を生成します。
--wp--custom--<custom-element>--wp--custom--は常にCSS変数の一部になり、キャメルケース（単語の区切りを大文字にして書くスタイル）は使用しません。例えば、lineHeightを変数として定義した場合、WordPressではケバブケース（ハイフンで単語をつなぐスタイル）に変換されます。
--wp--custom--line-height命名規則に関してはキャネルケースを使用することもできますが、可読性と処理エラーの低減を考慮して、WordPressの命名規則に揃えてケバブケースを使用することをお勧めします。
注）CSS変数に二重ハイフン（–）を使用しているのは、W3CのCSS Working Groupが、Sass（プロパティの定義にドル記号を使用）の使用を推奨しているためです。これにより、CSS変数とSassの変数が競合することがなく、より柔軟にデザインやスタイルを管理できます。
WordPressでは、すでにいくつかの変数が定義されているため、明示的な宣言なしにtheme.jsonでCSS変数を見ることができます。
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "var(--wp--preset--color--primary)",
"name": "Primary"
}
]
},
"custom": {
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--medium)"
}
}
}上の例では、既存のプリセットカラーを使って原色を定義しています。次にいくつか独自の余白プロパティを定義し、var() を使って設定します。
これは、theme.jsonに値をハードコーディングする必要がないことを意味します。さらに、エンドユーザーはサイトエディターでこれらの値を更新して、テーマ全体に反映することができます。
プリセットと変数
もちろん、theme.jsonでは、色、フォントサイズのような一般的なテーマ要素にプリセットを定義することもできます。その一方で、テーマ全体で再利用したい値には変数を使用します。
プリセットと変数の最大の違いは、命名規則とアクセシビリティにあります。サイトエディターで変数にアクセスするには、ユーザー側の操作が必要です。プリセットを使用すると、WordPressは変数を処理する方法に似たCSSを生成します。
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"fontFamily": {
"base": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"headings": "'Helvetica Neue', Helvetica, Arial, sans-serif"
}
}
}
}WordPressでの処理を見ると、本質的な違いがわかります。
--wp--preset--primary: #007bff;
--wp--custom--font-family--base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
--wp--custom--font-family--headings: "'Helvetica Neue', Helvetica, Arial, sans-serif";なお、さらにプロパティを入れ子にする場合は、キャメルケースをケバブケースに変換した後でも二重ハイフンが使用されます。
グローバルCSS、ブロック固有CSS、CSS変数の比較
従来のWordPressでは、テーマ内の要素をデザインするためにフロントエンドで追加のカスタムCSSを使用していました。これはtheme.json、フルサイト編集でも同じですが、そのアプローチはCSS変数とは異なります。
サイトエディターの「スタイル」パネルには、「追加CSS」セクションがあります。従来のカスタムCSSパネルに似ています。
これは、テーマ全体にカスタムCSSを追加する手順ですが、ユーザーにCSSを追加する機能を提供する方法でもあります。また、スタイルシート全体ではなく、細かな変更を行うために使用することも可能です。
theme.json内では、cssプロパティを使用して、追加するCSSを定義します。
{
"version": 3,
"styles": {
"css": "margin: 0"
}
}なお、CSS文の最後にセミコロン（;）を使用する必要はありません。ブロックにもカスタムCSSを設定可能です。
{
"version": 2,
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
}
}
}
}theme.jsonでこのようにCSSを設定すると、サイトエディターの「追加CSS」フィールドに表示されるようになります。ただし、cssを使って宣言したものは、CSS変数としては機能しません。
アンパサンド（&）セレクタの使用
Sassと同様に、WordPressもアンパサンド（&）をサポートしており、入れ子になった要素やプロパティをターゲットするのに便利です。これは個々のブロックに対してCSS変数を宣言する場合に関連する可能性があります。
例えば、以下のように使用します。
…
"styles": {
"blocks": {
"core/table": {
"css": "color:#333 & th{ background:#f5f5f5; }"
}
…テーブルのヘッダー要素にテキスト色と背景色を定義します。WordPressが処理すると、きれいでプレーンなCSSを取得できます。
.wp-block-table > table {
color: #333;
}
.wp-block-table > table th {
background: #f5f5f5;
}&セレクタは、特定のCSSを拡張したい場合に有用で、CSS要素を分離することができます。例を見てみます。
{
"version": 3,
"styles": {
"blocks": {
"core/avatar": {
"css": "& img {border-radius: 999px}"
}
}
}
}上はアバターに角を丸くするスタイルを適用すると、期待通りのCSSが出力されます。
.wp-block-image img {
border-radius: 999px;
}しかし、&なしではWordPressが宣言を連結してしまいます。
…
.wp-block-imageimg
…CSS変数を扱う際には、このように&セレクタを多用することになります。
最新のWordPress開発を支えるKinstaのホスティング
ホスティング選びは、コーディング言語やプリプロセッサのような、技術的要素と同じくらい重要です。優れたホスティングサービスを利用しなければ、theme.jsonやフルサイト編集のパフォーマンスと機能を活用することはできません。
Kinstaでは、ワークフロー全体の中核となるような独自の開発ツールDevKinstaを提供しています。Dockerコンテナを使用してWordPressサイトを分離するローカル開発環境ツールです。
便利な機能として、ローカルマシンとKinstaステージング環境間でデータを反映およびインポートすることができます。
これにより、配布を開始する前に本番サイトに限りなく近い環境でテーマをテストすることができます。CSS変数を使用する場合は、異なるコンテキスト間で確実に動作させることが可能です。また本番環境に反映する準備が整ったら、Kinsta APIを使用してCI/CDパイプラインをサポートすることも。
Kinstaのアーキテクチャのその他の側面も、開発ワークフロー全体に役立ちます。例えば、KinstaではGitをサポートしているため、theme.jsonを含むテーマファイルのバージョン管理が簡単です。カスタムプロパティを反復したり、単に異なる設定をテストしたりする場合には、ロールバック機能も便利です。
また、エッジキャッシュにより、theme.jsonのパフォーマンスが最大80%向上させることができます。ブラウザを問わずサイトが高速で動作することで、カスタム要素も高速で表示されます。
まとめ
柔軟で保守性の高いWordPress テーマの開発を支えるtheme.jsonに加えて、CSS変数もワークフローに欠かせない要素です。今回は、サイトエディターで実現できない要素の編集に対して、独自のCSSを作成して適用する方法をご紹介しました。この方法は、独自のブロックを構築する場合や、高度なカスタマイズ性を備えたWordPressテーマの開発にも重要になります。さらに、作成したCSSをサイトエディターを通してユーザーに提供することも可能です。
コメントを残す