WordPress TinyMCE(WYSIWYGエディタ)のカラーパレットに色を追加するカスタマイズ

WordPress

2021.07.14

WordPressのWYSIWYGエディタにはTinyMCEが使われていますが、テキストカラーを変更するためのカラーパレットに任意の色を追加することが出来ます。

デフォルトのカラーパレット
任意の色を追加する
1. カラーパレットカスタマイズ
2. 追加後のカラーパレット
動作環境情報

デフォルトのカラーパレット

デフォルト状態のTinyMCEのカラーパレットは以下のような状態です。

任意の色を追加する

上記のデフォルトのカラーパレットに DarkTurquoise #00CED1 / MediumSlateBlue #7B68EE / LemonChiffon #FFFACD の３色を追加したいと思います。

カラーパレットカスタマイズ

以下のコードを functions.php 等に追加することで任意の色を追加することが出来ます。

/**
 * WYSIWYGエディタ（TinyMCE）：カラーパレットカスタマイズ
 */
function custom_tiny_mce_before_init( $init )
{
    //デフォルトのカラーコード
    $default_colors = '
        "000000", "Black",
        "993300", "Burnt orange",
        "333300", "Dark olive",
        "003300", "Dark green",
        "003366", "Dark azure",
        "000080", "Navy Blue",
        "333399", "Indigo",
        "333333", "Very dark gray",
        "800000", "Maroon",
        "FF6600", "Orange",
        "808000", "Olive",
        "008000", "Green",
        "008080", "Teal",
        "0000FF", "Blue",
        "666699", "Grayish blue",
        "808080", "Gray",
        "FF0000", "Red",
        "FF9900", "Amber",
        "99CC00", "Yellow green",
        "339966", "Sea green",
        "33CCCC", "Turquoise",
        "3366FF", "Royal blue",
        "800080", "Purple",
        "999999", "Medium gray",
        "FF00FF", "Magenta",
        "FFCC00", "Gold",
        "FFFF00", "Yellow",
        "00FF00", "Lime",
        "00FFFF", "Aqua",
        "00CCFF", "Sky blue",
        "993366", "Brown",
        "C0C0C0", "Silver",
        "FF99CC", "Pink",
        "FFCC99", "Peach",
        "FFFF99", "Light yellow",
        "CCFFCC", "Pale green",
        "CCFFFF", "Pale cyan",
        "99CCFF", "Light sky blue",
        "CC99FF", "Plum",
        "FFFFFF", "White"
    ';
    
    //追加カラーコード
    $custom_colors = '
        "00CED1", "DarkTurquoise",
        "7B68EE", "MediumSlateBlue",
        "FFFACD", "LemonChiffon",
    ';
    
    /* ▼カスタマイズ内容上書き▼ */
    //カラーパレット
    $init['textcolor_map'] = '['.$default_colors.','.$custom_colors.']';
    //行数設定
    $init['textcolor_rows'] = 6;
    
    //
    return $init;
}
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_before_init' );

追加後のカラーパレット

デフォルト状態に３色が追加されていることが確認出来ます。

動作環境情報

動作環境情報
"エックスサーバー" x10
"PHP" 7.4.13
"MySQL" 5.7
"WordPress" 5.7.2
"Classic Editor" 1.6