theme.jsonを使って簡単に独自のカラーパレットを作る方法

公開日:2022(令和4)年5月3日/最終更新日:

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPress5.8から追加された、「theme.json」という機能。

私も当初からそんなのあるのね~とは思っていたものの、どうせブロックテーマ(FSE対応テーマ)のお話でしょ!とスルーしていました。

でも、従来のテーマ(いわゆるクラシックテーマ)でも、テーマフォルダ内に「theme.json」というファイルを置くだけで、WordPress5.8以降であれば自動で適用できることを知りました。

そこで、今までいろいろごちゃごちゃと書いていた独自カラーパレットを、theme.json使って実装してみたら、あら簡単!!だったので、theme.json初歩の初歩ということで紹介しておきます。

「theme.json」を使って独自のカラーパレットを作る方法

まず大前提としてテーマ(親または子テーマ)のフォルダ直下(style.cssと同じ場所)へ、theme.jsonというファイルを追加します。

基本的にこれだけでtheme.jsonを読み込んでくれるようになります

そして、以下のコードをそのままtheme.jsonへコピペしてください。

{
"version": 1,
	"": "カラー設定",
	"settings": {
		"color": {
			"palette": [
				{
				"slug": "red",
				"color": "#e60033",
				"name": "Red"
				},

				{
				"slug": "pink",
				"color": "#e95295",
				"name": "Pink"
				},

				{
				"slug": "purple",
				"color": "#884898",
				"name": "Purple"
				},

				{
				"slug": "deep",
				"color": "#55295b",
				"name": "Deep"
				},

				{
				"slug": "indigo",
				"color": "#1e50a2",
				"name": "Indigo"
				},

				{
				"slug": "blue",
				"color": "#0095d9",
				"name": "Blue"
				},

				{
				"slug": "light-blue",
				"color": "#2ca9e1",
				"name": "Light Blue"
				},

				{
				"slug": "cyan",
				"color": "#00a3af",
				"name": "Cyan"
				},

				{
				"slug": "teal",
				"color": "#007b43",
				"name": "Teal"
				},

				{
				"slug": "green",
				"color": "#3eb370",
				"name": "Green"
				},

				{
				"slug": "light-green",
				"color": "#8bc34a",
				"name": "Light Green"
				},

				{
				"slug": "lime",
				"color": "#c3d825",
				"name": "Lime"
				},

				{
				"slug": "yellow",
				"color": "#ffd900",
				"name": "Yellow"
				},

				{
				"slug": "amber",
				"color": "#ffc107",
				"name": "Amber"
				},

				{
				"slug": "orange",
				"color": "#f39800",
				"name": "Orange"
				},

				{
				"slug": "deep-orange",
				"color": "#ea5506",
				"name": "Deep Orange"
				},

				{
				"slug": "brown",
				"color": "#954e2a",
				"name": "Brown"
				},

				{
				"slug": "grey",
				"color": "#949495",
				"name": "Grey"
				},

				{
				"slug": "dark-black",
				"color": "#000000",
				"name": "Black"
				},

				{
				"slug": "bibid-white",
				"color": "#ffffff",
				"name": "White"
				},

				{
				"slug": "watery-blue",
				"color": "#f3fafe",
				"name": "Watery Blue"
				},

				{
				"slug": "watery-yellow",
				"color": "#fff7cc",
				"name": "Watery Yellow"
				},

				{
				"slug": "watery-red",
				"color": "#fdf2f2",
				"name": "Watery Red"
				},

				{
				"slug": "watery-green",
				"color": "#ebf8f4",
				"name": "Watery Green"
				}

			]
		}
	}
}

終わったら、投稿編集画面を開いて、文字の色や背景の色など何か変更(カラーパレットを表示させる)してみてください。

今までと違う色の一覧が表示され、変更され、モバイルやタブレットのプレビューでもきちんと適用されていればこれで終わりです(早すぎ..)。

前述した色設定のコードはこのサイトでも配布している【HABONE】のものそのままなので、任意に変更してください。

カラーパレットの色を追加・変更する方法

上記コードの中で、以下の部分が1つの色を示す塊になります。

{
"slug": "watery-green",
"color": "#ebf8f4",
"name": "Watery Green",
}

それぞれの設定項目は以下のようになります。

slugカラーパレットの中で一意に使うIDです
color実際の色コードを指定します(HEXでもRGBでも可)
name色をマウスオーバーしたときに表示される文字列を指定します

注意点としては、この部品の並びの最後はコード末尾の「,」をなしにするということ位です(これはPHPの条件指定などでも同じでしょう)。

カラーパレットの動作を細かく制御する方法

上記コードで問題なく独自のカラーパレットへの置き換えができたら、以下のオプションについても検討しましょう。

“defaultPalette”: false,デフォルトのカラーパレットを非表示にする
“background”: false,背景色の設定をできないようにする
“link”: false,リンク色の設定をできないようにする
“text”: false,文字色の設定をできないようにする
“custom”: false,色の任意設定をできないようにする

追加するのは、先に紹介したコード中の「color」と「palette」の間です。

{
"version": 1,
	"": "カラー設定",
	"settings": {
		"color": {
           ここに制御するためのコードを挿入する
			"palette": [

その他ブロックの種類ごとの設定や、デュオトーンの設定など挙げだすときりがないので、以下のページを参考にしてみてください(英語ですがすごく丁寧に書かれています)。

参考:Theme.json color options

カラーパレット追加後に編集画面が左よりになってしまうときは

恐らく公式サイトで配布されているテーマであれば、上記で紹介したコードを追加するだけで独自カラーパレットの置き換えは問題なく完了すると思います。

しかしながら、独自(自作)テーマなどでは、theme.jsonでカラーパレットを追加した後、投稿(固定ページ)編集画面が左寄りになってしまうことがあるようです。

対応策が2つありますので紹介しておきます。

どちらかの方法のみにしないと余分な調整が必要となることがありますので注意しましょう

テーマのfunctions.phpへ追記して対応する方法

以下のコードをテーマのfunctions.phpへ追加します。

function ha_custom_theme_support() {
add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'ha_custom_theme_support' );

追加した後、投稿編集画面を開いて確認してください。

ページ幅に標準幅とワイド幅があるテンプレートを持つテーマでは、双方の幅でリロードして表示に問題がないかも確認してください。

参考:add_theme_support(string  $ feature、 mixed  $ args  )

テーマ内に既にこの指定があるかどうかが不明な場合は、「String Locater」プラグインなどを使ってテーマ内のコード検索を行うとよいでしょう。

theme.jsonへ追記して対応する方法

前述したadd_theme_supportをtheme.jsonでグローバルスタイルとして定義する方法です。せっかくtheme.jsonを使うので、こちらの方法のほうがよいかもしれません。

先ほど紹介した、カラーパレットのコードを以下と入れ替えます。

{"version": 1,
	"": "カラー設定",
	"settings": {
		"color": {
			"palette": [
				{
				"slug": "red",
				"color": "#e60033",
				"name": "Red"
				},

				{
				"slug": "pink",
				"color": "#e95295",
				"name": "Pink"
				},

				{
				"slug": "purple",
				"color": "#884898",
				"name": "Purple"
				},

				{
				"slug": "deep",
				"color": "#55295b",
				"name": "Deep"
				},

				{
				"slug": "indigo",
				"color": "#1e50a2",
				"name": "Indigo"
				},

				{
				"slug": "blue",
				"color": "#0095d9",
				"name": "Blue"
				},

				{
				"slug": "light-blue",
				"color": "#2ca9e1",
				"name": "Light Blue"
				},

				{
				"slug": "cyan",
				"color": "#00a3af",
				"name": "Cyan"
				},

				{
				"slug": "teal",
				"color": "#007b43",
				"name": "Teal"
				},

				{
				"slug": "green",
				"color": "#3eb370",
				"name": "Green"
				},

				{
				"slug": "light-green",
				"color": "#8bc34a",
				"name": "Light Green"
				},

				{
				"slug": "lime",
				"color": "#c3d825",
				"name": "Lime"
				},

				{
				"slug": "yellow",
				"color": "#ffd900",
				"name": "Yellow"
				},

				{
				"slug": "amber",
				"color": "#ffc107",
				"name": "Amber"
				},

				{
				"slug": "orange",
				"color": "#f39800",
				"name": "Orange"
				},

				{
				"slug": "deep-orange",
				"color": "#ea5506",
				"name": "Deep Orange"
				},

				{
				"slug": "brown",
				"color": "#954e2a",
				"name": "Brown"
				},

				{
				"slug": "grey",
				"color": "#949495",
				"name": "Grey"
				},

				{
				"slug": "dark-black",
				"color": "#000000",
				"name": "Black"
				},

				{
				"slug": "bibid-white",
				"color": "#ffffff",
				"name": "White"
				},

				{
				"slug": "watery-blue",
				"color": "#f3fafe",
				"name": "Watery Blue"
				},

				{
				"slug": "watery-yellow",
				"color": "#fff7cc",
				"name": "Watery Yellow"
				},

				{
				"slug": "watery-red",
				"color": "#fdf2f2",
				"name": "Watery Red"
				},

				{
				"slug": "watery-green",
				"color": "#ebf8f4",
				"name": "Watery Green"
				}

			]
		},
		"layout": {
           "contentSize": "840px",
           "wideSize": "1260px"
       }
	}
}

先に紹介したコードの下部にレイアウトという要素を加えたものになります。

contentSizeは通常テンプレートの場合の幅、wideSizeは幅広テンプレートがある場合の幅になりますから、お使いのテーマの幅に合わせて調整してください。

こちらは、「.entry-content」というCSSクラスに対してそれぞれのテンプレート幅を編集画面と表示画面両方に適用するものですので、テーマ本文のCSSクラスに「.entry-content」を使っていなければ表示画面側には何も影響はありません。

逆に「.entry-content」を使っている場合には、この設定により表示幅が変わってしまう場合がありますので、調整が必要となる場合があります。

QA Analytics QA Analytics

従来のカラーパレット置き換えとの違い

従来(theme.jsonが使える前)は、以下のような段取りでカラーパレットを変更する必要がありました。

  1. カラーパレットを作成するコードを書いてテーマ内へ適用する
  2. カラーパレットに応じたCSSを追加する
  3. ブロックエディタのプレビューでも適用されるようにする

さらっと書きましたが、特に3では、editor-style.cssを作って、add_theme_supportを使って適用させ、通常のCSSと同じコードを書かないときちんと適用されないことがあるので面倒ですし、同じデザインコードを2か所に書くことから変更時には最低2か所変更しなければならないので面倒でした。

これが、theme.jsonを使ったら..前述したコードを「theme.json」へ書けば終了。

もう使わない手はないですね。

従来の方法で追加したコードやデザインコードは、多少なりとも動作に影響しますから、WordPress5.8より前のバージョンを使用することがないなら不要となりますので、削除するなり、コメントアウトして停止するなりするとよいでしょう。

参考:On layout and content width in WordPress 5.8

theme.jsonで追加したコンテンツはどうなる?

ここまでtheme.jsonのほうが独自のカラーパレット作成が簡単ということを説明してきました。

では、実際に文字色などを指定したときにどうなるのか?他のテーマへ変更したり、theme,jsonからカラーパレットの設定を削除したらどうなるのか?について触れておきます。

カラーパレットに限らず、theme,jsonに記述した内容共通のものと考えていいと思います

まず、theme.jsonはエディタ側とフロントエンド側に共通のものを出力することでCSSコードの記述を減らすというのが目的です。

特にFSE(フルサイトエディット)では、編集画面と閲覧画面が共通であることが望ましい(というか最低条件)ので、それを実現させるための画期的な機能だといえます。

実際にtheme.jsonへ設定した独自カラーパレットを使って以下のように赤系の色を指定すると

この段落は独自カラーパレットで赤くしています

と表現されます。ここでブロックとしてどうふるまっているかを知るには、上の色を付けた段落をHTMLとして編集に切り替えるとはっきりわかります。

以下は試しに上の赤い文字の段落をHTML編集に切り替えたときのコードです。

<p><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-red-color">この段落は独自カラーパレットで赤くしています</mark></p>

一目瞭然ですね。通常のp(段落)タブに対して、markタグが追加され、has-red-colorという文字に対するクラスが付加されています。

つまり、このhas-red-colorに対するCSSコードが割り当てられて、文字が赤くなるということなんですね。

前述して紹介したtheme.jsonのコード例上では、この赤色を「”slug”: “red”」で指定しています。これに対して実際には「has-〇〇-color」という風に書き換えられていることに注意が必要ですが、切り替え後のテーマのtheme.jsonへカラーパレットの部分を移植するか、以下のように「has-inline-color has-〇〇-color」に対する色を割り当てることで移行可能ということになります。

以降コードの例:redの場合

theme.jsonのコード

{
"slug": "red",
"color": "#e60033",
"name": "Red"
},

別テーマでも同じ色で表示させるためにCSSへ追記するコード

.has-inline-color .has-red-color{
color:#e60033;
}

CSSへ追記する場合は、テーマによっては、編集画面用の「editor-style.css」と閲覧画面用の「style.css」の両方へ追記する必要があります

本記事の更新(変更)履歴

更新日更新内容
2022年 5月 3日記事を公開しました
2022年 5月 4日カラーパレットの動作を細かく制御する方法を追加しました
2022年 5月 7日エディタが左寄せになってしまう問題の対処方法を追加しました
2022年 5月24日独自カラーパレットで色を指定した部分の動きと他テーマへの流用方法のヒントを追加しました

本ページの機能は当サイトで無料配布しているテーマ【HABONE】2.1より実装しています。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
特定のショートコードが本文内にあるかどうかによって処理を分岐する方法