カテゴリー
Twenty Nineteen

Twenty Nineteenにカラーパレットを追加

Twenty Nineteenでは、親テーマでカスタムカラーパレットがその他のテーマサポートと抱き合わさった状態で「after_setup_theme」で実行されています。つまり、既にテーマ上に通常のカスタマイズが施されているので、他の方法でそれを上書きするしかありません。

まず、カラーパレットというのは、Gutenbergエディタの記述ブロックに背景をつけるためのパレットです。

Twenty Nineteenのカラーパレット

Twenty Nineteenでは、親テーマでカスタムカラーパレットがその他のテーマサポートと抱き合わさった状態で「after_setup_theme」で実行されています。

つまり、既にテーマ上に通常のカスタマイズが施されているので、他の方法でそれを上書きするしかありません。

通常ののGutenbergエディタへのカラーパレット追加方法

Block Editor Handbookの「Block Color Palettes」に書いているコードを子テーマのfunction.phpに追記したあと、CSS追記て色の指定をします。

Twenty Nineteenでは親テーマに追記…

おり、子テーマでそこだけキャンセルする腕がなく、仕方なしにfunction.phpは親テーマに追記、CSSは子テーマに追記しました。

おススメはしませぬ。

方法メモ

親テーマのfunction.phpの中で「// Editor color palette」の文言を検索して、カスタムパレットの指定箇所を探します。

Primary、Secondary、Dark Gray、Light Gray、Whiteが指定されているので、その下に新しい色を追記。

custom color palette twenty nineteen

外観 → テーマエディタ → Twenty Nineteen → functions.php

array(
'name'  => __( 'Pale Yellow', 'twentynineteen' ),
'slug'  => 'pale-yellow',
'color' => '#ffffe0',
	),
custom color palette twenty nineteen css

外観 → CSS編集

.has-pale-yellow-background-color {
    background-color: #ffffe0;
}
 
.has-pale-yellow-color {
    color: #ffffe0;
}

んで、これ、function.phpの方は親テーマに追記しているので、テーマを更新するたびに追記しに行かなければならなくて少々面倒。

現在、抜本的な解決方法を探す根気もこれ以上スポットで配色する根気もないので、取り敢えず現状の方法をメモ。

実際に使ったコード

				array(
					'name'  => __( 'Reference', 'twentynineteen' ),
					'slug'  => 'reference',
					'color' => '#ffffe0',
				),
				array(
					'name'  => __( 'Translation', 'twentynineteen' ),
					'slug'  => 'translation',
					'color' => '#efe0ff',
				),
				array(
					'name'  => __( 'tips', 'twentynineteen' ),
					'slug'  => 'tips',
					'color' => '#e5fff2',
				),
				array(
					'name'  => __( 'Important', 'twentynineteen' ),
					'slug'  => 'important',
					'color' => '#ffe5e5',
				),
				array(
					'name'  => __( 'Notes', 'twentynineteen' ),
					'slug'  => 'notes',
					'color' => '#d6ffff',
				),
.has-reference-background-color {
    background-color: #ffffe0;
}
.has-reference-color {
    color: #ffffe0;
}

.has-translation-background-color {
    background-color: #e8d1ff;
}
.has-translation-color {
    color: #efe0ff;
}

.has-tips-background-color {
    background-color: #e5fff2;
}
.has-tips-color {
    color: #e5fff2;
}

.has-important-background-color {
    background-color: #ffd6d6;
}
.has-important-color {
    color: #ffd6d6;
}

.has-notes-background-color {
    background-color: #d6ffff;
}
.has-notes-color {
    color: #d6ffff;
}

検証資料:remove_theme_support( string $feature )Function Reference/remove theme supportFunction Reference/remove actionFunction Reference/remove filter

最後までお読みいただきありがとうございました。

作成者: のろのろ

ゲーマーで、トレッキーに片足突っこんでいる、SF好きの、雑記ブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください