ワードプレスのカラーパレットの色を変更

ワードプレスのデフォルトカラーパレットを自分のパレットに変えるのに、①カスタムパレットを追加する、②テーマで既に指定されているカスタムパレットを自分のカスタムパレットに差し替える。の2パターン経験したので備忘録。

カスタムパレットを追加するだけの場合

参考資料：「add_theme_support」「Block Color Palettes」

流れは、テーマサポートのカラーパレットをfunctions.phpに追加して、実際の色をCSSに書き加える感じです。

functions.phpにパレットを作成

外観 → テーマエディタ → 子テーマを選択 → functions.phpに下のコードをコピペ

とりあえず5色分。

<?php
add_theme_support( 'editor-color-palette',
array(
	array(
		'name'  => __( 'Reference', 'generic' ),
		'slug'  => 'reference',
		'color' => '#ffffe0',
	),
	array(
		'name'  => __( 'Translation', 'generic' ),
		'slug'  => 'translation',
		'color' => '#efe0ff',
	),
	array(
		'name'  => __( 'tips', 'generic' ),
		'slug'  => 'tips',
		'color' => '#e5fff2',
	),
	array(
		'name'  => __( 'Important', 'generic' ),
		'slug'  => 'important',
		'color' => '#ffe5e5',
		),
	array(
		'name'  => __( 'Notes', 'generic' ),
		'slug'  => 'notes',
		'color' => '#d6ffff',
	),
)
);
?>

色の数を減らしたり、増やしたりしたいときは、↓が一色分なので、これを足したり引いたりしたらいいと思います。

array(
		'name'  => __( 'Important', 'generic' ),
		'slug'  => 'important',
		'color' => '#ffe5e5',
		),

色を変えたい時は、’color’の中の部分を色見本などで好きな色を選んで別の色に変えたらいいと思います。

‘name’と’slug’の部分は、自分で命名。色の名前を付けている人が多いっぽいです。このブログでは定期的にテーマを変える時に、新しいテーマの配色に合わせやすいように色ではなく機能で命名しました。

CSSに表示色を指定

外観 → カスタマイズ → 追加CSSに下のコードをコピペ

下記、functions.phpにて指定したパレットと呼応。

.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;
}

「.has-パレット名-background-color」がブロックの背景色。

「.has-パレット名-color」がブロックの文字色。

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

上記が1パレット分です。背景の方は、色を変えるだけじゃなくて、枠をつけたり、グラデーションをつけたり、角を丸めたりもできるハズですけど、私はモノグサなので、いつも色だけです。あはは。

テーマのカスタムパレットを差し替えたい場合

インストールしたテーマが既にカラーパレットのテーマサポートを使っちゃっている場合に、自分のカスタムパレットと差し替えたいときのfunctions.phpはこちら。

<?php add_action( 'after_setup_theme', 'replace_parent_palette', 11 );
function replace_parent_palette() {
remove_theme_support( 'editor-color-palette' );
add_theme_support( 'editor-color-palette',
array(
	array(
		'name'  => __( 'Reference', 'generic' ),
		'slug'  => 'reference',
		'color' => '#dfe5f5',
	),
	array(
		'name'  => __( 'Translation', 'generic' ),
		'slug'  => 'translation',
		'color' => '#efdff5',
	),
	array(
		'name'  => __( 'tips', 'generic' ),
		'slug'  => 'tips',
		'color' => '#e5f5df',
	),
	array(
		'name'  => __( 'Important', 'generic' ),
		'slug'  => 'important',
		'color' => '#f5dfe5',
		),
	array(
		'name'  => __( 'Notes', 'generic' ),
		'slug'  => 'notes',
		'color' => '#dff5ef',
	)
)
);
}
?>

前述とCSSは同じ。

これが一番スマートな方法かどうかは、わかりませんので、悪しからず。