ここでは親テーマのビジュアルエディタのCSSが「editor-style.css」の場合の設定について解説しています。
親テーマがどの様なCSSを使っているか？は下記を参照してください。
1.TinyMCE Advancedのスタイル機能とは
TinyMCE Advancedプラグインをインストールすると下記の様なボタンが追加されます。
このボタンをビジュアルエディタのメニュに配置して下さい。
このスタイルをクリックした時に表示されるメニュのデフォルトは下記になります。
しかし「TinyMCE Advanced」の設定で下記項目に✔をつけると、CSSのクラスメニュが使える様になります。
メモ
CSSクラスメニュとはタグ（p、div、img、table等）に付けたクラスメニュです。
例えばimgタグに「.×××」というクラスをつけたメニューという事です。
例えば下記の様なクラスメニュを「editor-style.css」に設定します。
img.waku0 { padding:2px; border-radius:0; border:1px solid #8b8682;} img.waku5 { padding:5px; border-radius:0; border:1px solid #8b8682;}
そうするとスタイルメニュをプルダウンすると、設定したクラスが表示されます。
下記の例ではimgが選択されている時に「.waku0」と「.waku5」のクラスを追加する事ができる様になります。
CSSのクラスはBootstrap等のクラスでも、任意設定のクラスでもOKです。
2.親テーマが「editor-style.css」の時の問題点
CSSクラスメニュは下記の順番で呼ばれます。
①親テーマの「editor-style.css」
②子テーマの「editor-style.css」
例えば
上記の様に表示させたいのに、親テーマの「editor-style.css」中に記載されている「タグ＋CSSクラス」が「img.waku0」の上にごみの様に表示されます。
このままではあまり使い易いCSSクラスメニュにならないので下記対策をします。
3.対策方法
既存の「editor-style.css」をリムーブして、新しい名前の「my-editor-style.css」等を利用する宣言により解決させます。
3-1.editor-style.cssのファイル名を変更します。
上記では「my-editor-style.css」というビジュアルエディタ用のCSSを新規作成しています。
新しい名前のスタイルシート名は何でも良いです。
3-2.functions.phpに下記を加えます。
//editor-style.cssを変更する function my_styles() { remove_editor_styles(); //親テーマのスタイルシートは読み込まない add_editor_style( 'my-editor-style.css' );} //子テーマの指定したスタイルシートを読み込む add_action( 'admin_init', 'my_styles' );
①remove_editor_styles()で親テーマの「editor-style.css」は読み込みません。
②add_editor_styleで新しいスタイルシートは「my-editor-style.css」を読み込みます。
※add_editor_styleで「editor-style.css」に指定すると。親テーマのスタイルシートが「editor-style.css」の場合は、親のスタイルシートも読み込まれます。
よって親テーマのスタイルシートが何かによって、記述方法が異なります。
3.その他の補足事項
3-1.CSSクラスメニュに区切りをつける。
設定したいクラスメニュが増えると区切り文字が無いと選択がしづらくなります。
下図をみて下さい。
上図は所々に区切り文字が入っています。
これを実現する為には、下記の様な形でCSSを記述すると上図の様に表示されます。
//クラスメニュの設定 .____img_________{} //イメージ関連のCSSクラスメニュの設定
3-2.文字列の区切り文字
文字列の区切り文字として「-(ハイフン)」と「_(アンダースコア又はアンダーバー)」があり、どの様な時に何を使うか？を悩みます。
＜確かな事＞
■関数名や変数名に「-(ハイフン)」を利用するとエラーになります
■GoogleはURLの文字区切りに「-(ハイフン)」を推奨しています。
そこで「ファイル名」や「URL名」の区切り文字は「-(ハイフン)」、プログラムの中での「変数名」や「関数名」の区切り文字は「_(アンダースコア)」で考えると良いと思います。
