HOME  /WordPress(応用)
 /TinyMCEのeditor-style.cssの制限と回避方法
2017年10月30日

TinyMCEのeditor-style.cssの制限と回避方法

WordPressのビジュアルエディタを使い易くするためには一般的にTinyMCEプラグインを使うことが推奨されており、本サイトもこれを採用しています。

ここではTinyMCEのeditor-style.cssの仕様と問題点、及びその回避方法を解説します。

1.editor-style.cssの仕様と問題

TinyMCEの最大ポイントはeditor-style.cssに色々なスタイルを登録しておくと下記ボタンで色々なスタイルが利用できる所にあります。

しかしTinyMCEは、インストール環境により挙動が異なりなす。

独自テンプレートにインストールする場合

②利用するテンプレートにeditor-style.cssがない場合

③利用するテンプレートにeditor-style.cssがある場合(Twenty Twelveはこのケースになります)

①②は問題ないのですが③の場合は子テーマに登録したスタイルに加えて、親テーマのスタイルが表示される問題が発生します。

これはTinyMCEの下記仕様によるものです。

 メモ

editor-style.cssは親テーマ→子テーマの順番で呼ばれます。

よって親テーマのスタイルの下に自分が登録したスタイルが表示される事になります。

その為、スタイルが見づらくなります。

これを回避する方法を下記に解説します。

2.親テーマのeditor_styles.cssの削除方法

上記の問題を解決する為には既存の「editor-style.css」をリムーブして、新しい名前の「editor-style.css」を利用する宣言が必要になります。

functions.phpに下記を記述します。

//editor-style.cssを変更する
function my_styles() {
  remove_editor_styles(); //親テーマのスタイルシートのリムーブ
  add_editor_style( 'my_editor-style.css' );} //子テーマのスタイルシートの追加
add_action( 'admin_init', 'my_styles' );

※1.remove_editor_styles()でeditor-style.cssがリムーブされます。

※2.新しい名前のスタイルシートは××editor-style.cssの形式になります。
××の所は任意でeditor-style.cssは固定です。
そこでこのサイトでは××の所をmy_にしています。

※3.その結果、my_editor-style.cssは親テーマにないので親のスタイルは表示されなくなります。
但し、親テーマのstyle.cssをリムーブしたのでないので注意してください。

 

子テーマフォルダに「my_editor-style.css」を追加してください。

この中にビジュアルエディタで使うスタイルを登録していきます。

3.ファイル名に関する補足事項

 メモ(名称作成ルール)

WordPressではeditor-style.cssの様に「-(ハイフン)」は、同種の物を識別する区切り記号として使っており、特別な意味を持っています。

そこで私は区切り記号として「_(アンダーバー)」を使い、「-(ハイフン)」はWordPressのルール内でしか利用しない方針でプログラムを開発しています。