Gutenberg完全対応のSANGO Gutenberg について

ブロックエディターのカラーパレットに独自のカラーコードを追加するための方法

SANGO GutenbergではSANGOカスタムブロックのカラーパレット対してカラーコードを追加できる機能を提供しています。以下のようにデフォルトのカラーコードは11種類ありますが、カラーコードを追加すると、それに加え自分で追加したカラーコードが末尾に追加されていきます。

サイトのテイストにあった色をいくつか追加しておけば、統一感が出て素敵なサイトになると思いますので、ぜひこの機会にカラーパレットにオリジナルのカラーを追加してみましょう。

SANGO カスタムブロックに対するカラーコード追加

カスタムカラーの追加方法がわかりやすいように動画を用意致しましたので、まずはこちらをご覧ください。

1. カスタムカラー設定を開く

記事編集画面の右上にある、SANGOマークをクリックします。

SANGO Settings と書かれたパネルが表示されるので、その中のカスタムカラーから、+カスタムカラーを作成と書かれたボタンをクリックします。

2. カラーコードを追加する

以下のようなダイアログが表示されるので、区別しやすい名前とその名前に対するカラーコードを設定しましょう。カラーコードは16進数やRGBAで指定することが可能です。設定が終われば保存ボタンを忘れずクリックしましょう。

WordPress標準ブロックに対するカラーパレットのカスタマイズ

ただし上記のカスタマイズはSANGOのカスタムブロックに対するカラーパレットにのみ有効です。WordPressが標準で提供しているブロックでは追加したカラーが反映されません。WordPress標準のブロックに対してもカラーパレットをカスタマイズしたい場合は子テーマのfunctions.phpに以下のようなPHPを追加で記述していただく必要があります。

PHP
function my_editor_color_palette() {
  $palette = get_theme_support( 'editor-color-palette' );
  if (!empty( $palette )) {
    $palette = array_merge( $palette[0], array(
      array(
        'name'  => 'オリジナルカラー1'
        'slug'  => 'original1',
        'color' => '#EB8686',
      ),
      array(
        'name'  => 'オリジナルカラー2',
        'slug'  => 'original2',
        'color' => '#AEC4E5',
      ),
    ));
    add_theme_support( 'editor-color-palette', $palette );
  }
}

add_action( 'after_setup_theme', 'my_editor_color_palette', 11 );

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。