WordPressCocoon

【Cocoon】ブロックエディタに好きな色を登録する方法

以前にWordPressの新エディタ「Gutenbergの文字・背景色にカスタムカラーを登録する方法」を書いたんですが、この方法だとCocoonのブロックエディタでは反映されません。

そこで今回はCocoonのブロックエディタでもカスタムカラーを登録できるコードを紹介します。

【追記】Cocoonのブロックエディタは設定が細かいので、こちらのコードだけだとCocoon独自のパーツに反映されませんでした。Cocoonの場合はデフォルトカラーを残しつつ、文字色などを好きな色にしたい場合などにお使いください。

旧エディタ(Classic Editor)はこちらの記事をどうぞ↓

functions.phpにコードを追加する

functions.phpは少しでもコードが間違っているとサイトが真っ白になります。編集は慎重にやりましょう。

Cocoonの場合はテーマ独自の関数を上書きしないと反映されないので、カスタムカラーを登録するコードは以下のようになります。functions.phpにコピペしてくださいね。

add_action('after_setup_theme', 'cocoon_editor_color_palette_setup');
if ( !function_exists( 'cocoon_editor_color_palette_setup' ) ):
function cocoon_editor_color_palette_setup() {
    // カラーパレットの設定
    add_theme_support('editor-color-palette', array(
        array(
            'name' => __( 'キーカラー', THEME_NAME ),
            'slug' => 'key-color',
            'color' => get_editor_key_color(),
        ),
        array(
            'name' => __( '赤色', THEME_NAME ),
            'slug' => 'red',
            'color' => '#e60033',
        ),
        array(
            'name' => __( 'ピンク', THEME_NAME ),
            'slug' => 'pink',
            'color' => '#e95295',
        ),
        array(
            'name' => __( '紫色', THEME_NAME ),
            'slug' => 'purple',
            'color' => '#884898',
        ),
        array(
            'name' => __( '深紫色', THEME_NAME ),
            'slug' => 'deep',
            'color' => '#55295b',
        ),
        array(
            'name' => __( '紺色', THEME_NAME ),
            'slug' => 'indigo',
            'color' => '#1e50a2',
        ),
        array(
            'name' => __( '青色', THEME_NAME ),
            'slug' => 'blue',
            'color' => '#0095d9',
        ),
        array(
            'name' => __( '天色', THEME_NAME ),
            'slug' => 'light-blue',
            'color' => '#2ca9e1',
        ),
        array(
            'name' => __( '浅葱色', THEME_NAME ),
            'slug' => 'cyan',
            'color' => '#00a3af',
        ),
        array(
            'name' => __( '深緑色', THEME_NAME ),
            'slug' => 'teal',
            'color' => '#007b43',
        ),
        array(
            'name' => __( '緑色', THEME_NAME ),
            'slug' => 'green',
            'color' => '#3eb370',
        ),
        array(
            'name' => __( '黄緑色', THEME_NAME ),
            'slug' => 'light-green',
            'color' => '#8bc34a',
        ),
        array(
            'name' => __( 'ライム', THEME_NAME ),
            'slug' => 'lime',
            'color' => '#c3d825',
        ),
        array(
            'name' => __( '黄色', THEME_NAME ),
            'slug' => 'yellow',
            'color' => '#ffd900',
        ),
        array(
            'name' => __( 'アンバー', THEME_NAME ),
            'slug' => 'amber',
            'color' => '#ffc107',
        ),
        array(
            'name' => __( 'オレンジ', THEME_NAME ),
            'slug' => 'orange',
            'color' => '#f39800',
        ),
        array(
            'name' => __( 'ディープオレンジ', THEME_NAME ),
            'slug' => 'deep-orange',
            'color' => '#ea5506',
        ),
        array(
            'name' => __( '茶色', THEME_NAME ),
            'slug' => 'brown',
            'color' => '#954e2a',
        ),
        array(
            'name' => __( '灰色', THEME_NAME ),
            'slug' => 'grey',
            'color' => '#949495',
        ),
        array(
            'name' => __( '黒', THEME_NAME ),
            'slug' => 'black',
            'color' => '#333',
        ),
        array(
            'name' => __( '白', THEME_NAME ),
            'slug' => 'white',
            'color' => '#fff',
        ),
        array(
            'name'  => __( 'カラー1', 'genesis-sample' ),
            'slug'  => 'color1',
            'color' => '#e36b6d',
        ),
        array(
            'name'  => __( 'カラー2', 'genesis-sample' ),
            'slug'  => 'color2',
            'color' => '#6b9de3',
        ),
        array(
            'name'  => __( 'カラー3', 'genesis-sample' ),
            'slug'  => 'color3',
            'color' => '#7d6be3',
        ),
        array(
            'name'  => __( 'カラー4', 'genesis-sample' ),
            'slug'  => 'color4',
            'color' => '#e3836b',
        ),
        array(
            'name'  => __( 'カラー5', 'genesis-sample' ),
            'slug'  => 'color5',
            'color' => '#de81ce',
        ),
    ));
}
endif;

6〜110行目まではCocoonのデフォルトのカラー設定と同じになっていますが、必要なければ削除しても大丈夫です。

上記コードだと111〜135行目までが新しく追加登録しているカラーの部分になります。

下記コードの●●●の部分を好きなカラー名と、カラーコードに変更してください。カラー名はマウスを乗せた時に表示される名前なので適当でオッケーです。「slug」もcolor1、color2みたいな感じで適当に追加しましょう。

array(
    'name'  => __( '●●●', 'genesis-sample' ),
    'slug'  => 'color1',
    'color' => '●●●',
),

上の5行のコードをどんどん足していけば好きなだけ追加できます。

カラーコードはこういうサイトを参考にどうぞ↓

HTMLカラーコード
HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

カラーピッカーも表示されるよ

ちなみにCocoonのブロックエディタはデフォルトだとカラーピッカーが表示されませんが、今回紹介した方法で上書きするとピッカーも表示されるようになります。

Cocoon ブロックエディタ

WordPress5.2からカスタムカラーの表示が変わったようで、アイコンじゃなくてテキストになってます。

ということでCocoonのブロックエディタに好きな色を登録する方法でした。簡単なのでぜひお試しくださいませ。ではまた〜♪

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. いずき より:

    DICE様

    この度は、前記事の質問コメントに対し、新たに記事をご執筆いただく形で対応下さいまして、誠にありがとうございます。

    早速試させて頂いたところ、無事解決をすることが出来ました。

    DICE様のホームページはWordPressのテーマについて、特にCocoonのカスタマイズに関してとても詳しく解説されているので、いつも参考にさせて頂いております。

    おかげさまで、「うぇぶあしびさん」と少し似たデザインになってしまいましたこと、お許し下さい。
    今後、HTMLやCSSを勉強しつつ、少しずつ自分なりのデザインに仕上げて行きたいと思っております。

    また、どうしてもわからない事がございましたら、その際はコメントをさせて頂きたく思います。

    どうぞ、よろしくお願い申し上げます。

    • DICE DICE より:

      お役に立てて何よりです。
      色んなコードを参考にしているうちに、だんだんと応用もきくようになってくるので頑張ってくださいね。

  2. いずき より:

    DICE様

    度々のご連絡で恐縮です。

    ブロックエディター内のカラーパレットに自分で設定した色は表示され、文字や文字背景に対しては適用されるのですが、Cocoonブロックのボックス等の枠に対しては設定した色が反映されません。(デフォルトカラーは適用されます。)

    【適用される要素】
    ・各ブロック内の文字色、文字背景色
    ・付箋風ボックス

    【適用されない要素】
    ・ボタンの背景色
    ・タブボックスの枠
    ・白抜きボックスの枠
    ・囲みボタンの背景色
    ・トグルボックスの枠
    ・タブ見出しボックスの枠
    ・見出しボックスの枠
    ・ラベルボックスの枠
    ・マイクロコピーバルーンの背景色

    こちらに関しては何か特別な設定が必要なのでしょうか。

    お忙しいとは思いますが、お手すきの際に検証して頂けますと幸いです。

    よろしくお願い申し上げます。

    • DICE DICE より:

      ほんとですね!ありがとうございます。
      Cocoonのブロックエディタは細かい設定が多くて複雑なので変更しないでデフォルトで使ったほうが良さそうです^^;
      ここまでやっといて申し訳ないです〜

      • いずき より:

        DICE様

        お忙しい中、ご確認くださいましてありがとうございます。

        ご案内通り、デフォルト設定でしばらくは様子を見たいと思います。

        少しスッキリしました! ありがとうございました。

        • DICE DICE より:

          こちらこそお手数おかけしました。
          好きな色で編集したい場合は「AddQuicktag」でオリジナルのボックスやパーツを登録する方法が良さそうですね。

タイトルとURLをコピーしました