WP:TinyMCEにて増やしたスタイルにcssで色づけなどはできませんか？

Question

ビジュアルエディタのここの部分なのですけれど

「スタイル」で増やした部分にもcssで何が反映されるのかわかりやすくしたいです。
自分で調べてみたのですが、まさにこれと同じ事象のものを探せれませんでした。

テキストエディタで色づけさせているようにビジュアルエディタでも処理したいです。

開発者ツールですが、下記の画像のようなものを作りたいです。

これを実装する方法を教えてください。

―――――――――――――――――――――――――――――――――――――――――――――――――
このようにしたいです。

Answer 1

skin.min.cssファイルを作って、サーバーにアップし、
functions.phpに（アップしたディレクトリーに合わせて）、たとえば

function admin_css() {
	echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo( "template_directory" ).'/skin.min.css">';
}
add_action( 'admin_head', 'admin_css' );
```とコードを記入し、
デベロッパーツールで変更したいところのIDを確認して、希望のcssを記入してみてください。
たとえば、
```ここに言語を入力
#mceu_125 {
	background: blue;
}
```とりあえず、わたしの環境ではこれでできました。

追記
---
寝ログさんのコードに、つけたいスタイルを記入して、たとえば
```ここに言語を入力
styles => array( 'color' => 'red')

実はわたしのも回答を書く前にこれを試していたのですが、
反映されなかったので上記の回答をしました。
で、kei344さんのリンクをみて一部修正したらコードがいきました。

【Custom styles for TinyMCE 4.0 in WordPress 3.9 – Kathy is Awesome】
https://www.kathyisawesome.com/custom-styles-for-wordpress-3-9/

この記事のなかのリンクに

http://wordpress.stackexchange.com/questions/112210/tinymce-format-dropdown-no-longer-showing-style-previews/116790#116790

というのがあって、デフォルトではcolorやbackgroundなどのスタイルは適用できないみたいです。
それで、それらを追加すればいいとのことなのです。

function initialize_tinymce_styles($init_array) {

$init_array['preview_styles'] = 'background background-color color font-size font-family font-weight text-decoration text-transform';
//あとは同じ

わたしはうまく追加できなかったので（もともとのものが効かなくなった）
とりあえず必要なスタイルをすべて追加しました。

これで、<span>にスタイルを追加して希望のスタイルにできるはずです。

Comments

[makoto-n]

できました。
ありがとうございます。

[makoto-n]

すみません。
出来たと思ったのですが、ちょっと動作が安定しないです。

[8-0_nyan5]

どんな感じに不安定なんでしょう？

[makoto-n]

更新するたびにidが変わったりして、色づけが出来たり出来なかったりしていました。

[8-0_nyan5]

申し訳ないのですが、原因はわかりません。

[makoto-n]

いいえ、返信ありがとうございます。
もう少し調べてみますね！

[makoto-n]

修正ありがとうございます！！
少し試してみます。

[makoto-n]

$init_array['preview_styles'] = 'background background-color color font-size font-family font-weight text-decoration text-transform';

の記述を追加するだけで、以前こちらで解決させていただいたcssが自動で追加されていました。

https://teratail.com/questions/66258

本当にありがとうございました！

Answer 2

【Wordpressのビジュアルエディター（TinyMCE）に独自タグ挿入用のスタイル選択ボックスを追加するカスタマイズ】
https://nelog.jp/wordpress-tinymce-custom

---

追記：

書いて有ると思ったのですが、書いて無かったですね。⇒ 'styles'

【Custom styles for TinyMCE 4.0 in WordPress 3.9 – Kathy is Awesome】
https://www.kathyisawesome.com/custom-styles-for-wordpress-3-9/

【tinymce advanced のスタイル変更。functions.phpで。 - Qiita】
http://qiita.com/mrk461/items/4256492e937545bc2729

【TinyMCE | Content Formatting】
https://www.tinymce.com/docs/configure/content-formatting/#style_formats

【TinyMCE - style_formats】
http://archive.tinymce.com/wiki.php/Configuration:style_formats

Comments

[makoto-n]

回答ありがとうございます。
なのですが、私が実装したいのとは少し違います。
質問分の最後に掲載してある画像のように「スタイル」を押したらでてくるプルダウンメニューにcssを適用させたいです。

[makoto-n]

すみません。
https://nelog.jp/wordpress-tinymce-custom
こちらの書き方でのスタイルシートの割り当て方はわかりませんか？
styles => array( 'color' => 'red')
などと記述しても反映されませんでした。

根本的な記述法から変更した方がいいでしょうか？

[8-0_nyan5]

kei344さんのリンクを参考にすれば寝ログさんのコードでできますよ。

[makoto-n]

8-0_nyan5さん、ありがとうございます。

[makoto-n]

'fontWeight' => 'bold'は設定して変更できるのですが、
今回重要な'color' => '#ff0000'が設定できません。
何度もすみません。

[8-0_nyan5]

回答に追記してみました。