Snowmonkeyはサイト制作のテーマとしては使いやすいです。しかし、Snowmonkeyを使ったサイトは見た目や色がいかにもSnowmonkeyって感じがします。
それが気に入っている人はいいのですが、デザインよりも機能で選んでいる人が多いと思うのでデザインが嫌な人も少なくないでしょう。
Snowmonkeyと言えば高いカスタマイズ性とブロックエディタ対応が売りですが、カスタマイザーなどからブロックエディタのカラーパレットは簡単に変更できるようになっていません。
背景色を白以外にしている時などよく使う色をカラーパレットに登録したいと思う人も多いでしょう。
また、カラーパレットを変更できれば、snowmonkey臭さが少しでも抜け、オリジナリティを出せるはずです。
この記事では、Wordpressのブロックエディタ、特にSnowmonkey使用時のカラーパレットを変更する方法をまとめておきます。
普通の方法だとカラーパレットが変更できなかった
少し知識がある人なら、カラーパレットを変更するのは面倒なのでは?と思う人が多いと思います。
実は結構簡単に変更できます。
こちらの参考記事を参考にカラーパレットを変更してみましたが、なんとsnowmonkeyの場合は反映されませんでした。
参考:https://qiita.com/Fujix/items/593599ee62595ed22ce9
snow_monkey_editor_color_paletteフックで書き換える
Snowmonkeyは、ソースを確認すると、snow_monkey_editor_color_paletteフックでカラーパレットを上書きできるようでした。
/**
* Return editor color palette settings.
*
* @return array
*/
public static function get_color_palette() {
$settings = \WP_Theme_JSON_Resolver::get_core_data()->get_settings();
$color_palette = isset( $settings['color']['palette']['core'] )
? $settings['color']['palette']['core']
: [];
return apply_filters(
'snow_monkey_editor_color_palette',
array_merge(
[
[
'name' => __( 'Text color', 'snow-monkey' ),
'slug' => 'text-color',
'color' => '#333',
],
[
'name' => __( 'Dark gray', 'snow-monkey' ),
'slug' => 'dark-gray',
'color' => '#999',
],
[
'name' => __( 'Gray', 'snow-monkey' ),
'slug' => 'gray',
'color' => '#ccc',
],
[
'name' => __( 'Light gray', 'snow-monkey' ),
'slug' => 'very-light-gray',
'color' => '#eee',
],
[
'name' => __( 'Lightest gray', 'snow-monkey' ),
'slug' => 'lightest-grey',
'color' => '#f7f7f7',
],
[
'name' => __( 'Accent color', 'snow-monkey' ),
'slug' => 'accent-color',
'color' => get_theme_mod( 'accent-color', '#cd162c' ), // On after_setup_theme, default value not set yet.
],
[
'name' => __( 'Sub accent color', 'snow-monkey' ),
'slug' => 'sub-accent-color',
'color' => get_theme_mod( 'sub-accent-color', '#707593' ), // On after_setup_theme, default value not set yet.
],
],
$color_palette
)
);
}
参考:https://blog.photosynthesic.jp/2020/03/custom-color-config-snippet/
snow monkeyでカラーパレットを変更するスニペット
フックを通せば、通常と同じJSONデータ形式でカラーパレットを変更することができます。
エディタでも色が反映されますし、CSSも反映されます。
<?php
$colors = array(
array(
'name' => __( 'strong magenta', 'themeLangDomain' ),
'slug' => 'strong-magenta',
'color' => '#a156b4',
),
array(
'name' => __( 'light grayish magenta', 'themeLangDomain' ),
'slug' => 'light-grayish-magenta',
'color' => '#d0a5db',
),
array(
'name' => __( 'very light gray', 'themeLangDomain' ),
'slug' => 'very-light-gray',
'color' => '#eee',
),
array(
'name' => __( 'very dark gray', 'themeLangDomain' ),
'slug' => 'very-dark-gray',
'color' => '#444',
),
);
add_filter(
'snow_monkey_editor_color_palette',
function ($arr) use ( $colors ) {
return $colors; // 置き換える場合
//return array_merge($colors,$arr); //先頭に付け足す場合
}
);
まとめ
Snowmonkeyは正直ブログを書くのに向いてないと思います。利用者の意識が高すぎる。ブログメインで書きたい人はSwellやSANGO、Cocoonなどを使う方が良いと思います。