【WordPress】テキスト色・背景色のパレットの追加・編集

WordPressで記事を作成していると、エディタのデフォルトにはない文字色を使いたい!
ってことありませんか?

パレットの下部の「カスタム」で追加できますが、次に記事を書こうとすると保持されていない。
オリジナルで色を追加するには、function.phpに追記をするか、プラグインを使用する必要があります。

function.phpに追記する方法をご紹介します。
下記コードで、文字色・背景色共通で変更されます。

テキスト色・背景色のパレットの追加

function.phpに下記を追加

//エディタに文字色・背景色の追加
function my_mce4_options( $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 = '
"e36b6d", "Color 1",
"62cc99", "Color 2"
';
$init['textcolor_map'] = '['.$default_colors.','.$custom_colors.']';
$init['textcolor_rows'] = 6;
return $init;
}
add_filter( 'tiny_mce_before_init', 'my_mce4_options' );

編集箇所の説明

色の追加
"e36b6d", "Color 1"

"#なしカラーコード", "色の名前(なんでもOK)"

行の追加
$init['textcolor_rows'] = 6;

カラーパレットが表示されている行を追加します。
デフォルトで40色(5行×8)まで追加できますが、
それ以上の色を追加したい場合は個々の数字を変更してください。

最低限の色だけを登録する

正直、使うのって3色くらい・・・3色あれば十分だなと思う方には、デフォルトカラーを消し、使用する色だけを登録しておくのもオススメです。

//エディタに文字色・背景色の追加
function my_mce4_options( $init ) {
$custom_colors = '
"ea1e5b", "ピンク",
"539bad", "ブルー",
"ff790c", "オレンジ"
'; 
$init['textcolor_map'] = '['.$custom_colors.']';
$init['textcolor_rows'] = 1;
return $init;
}
add_filter( 'tiny_mce_before_init',
'my_mce4_options' );
おすすめの記事
【独学WEBデザイン】LESSON1
WEB
▶︎下記サンプルサイトをPotoshopでトレース(再現)してみましょう! ▶︎作成後コーディングしてみよう! 使用機能例 【ヘッターエリア...