WordPressの「ビジュアルエディタ」に子テーマに定義したクラス（class）を反映させる方法！！

WordPressを約3か月間使用してきて全く気付かずにいたのだが、子テーマのスタイルシート（style.css）に定義した内容を「テキストエディタ」でクラスを適用させるのは良いのだが、なんで「ビジュアルエディタ」にそれが反映されないのか、ふと疑問を感じてしまった。

実際にタグなどを直接「テキストエディタ」へ打ち込むのは良いのだが、編集中に少しでも実際に表示されるスタイルがわからないまま編集するのって如何なものなのか？

やはり実際に表示される画面に近い方が、作業効率が良いに決まっている。「TinyMCE Advanced」を利用しているのだが、これで文字の装飾なんかをするのはスタイルシートの内容ではなく、直接HTMLソースへ埋込しているので「ビジュアルエディタ」に反映されるのである。

それじゃ、どうすれば良いのか？

ビジュアルエディタにスタイルシートを反映させる方法

あくまでも子テーマのスタイルシートに定義したものだけでも良いので「ビジュアルエディタ」へ反映させたい！

今のバージョンのWordPressでは「@import」を使用して、親テーマのスタイルを反映させる方式を推奨していないので、せめて子テーマに定義したスタイルシートだけでも「ビジュアルエディタ」に反映させたい。これが本音です。これができるだけでも編集中に完成イメージが近づくはず。

これ非常に簡単なことです。

子テーマーのスタイルシートをエディタに読み込んでしまえば良いのです。

エディタに子テーマのスタイルシートを読み込む方法

子テーマの「function.php」に次のコードを記述して保存してみてください。

// ビジュアルエディターにスタイルをそのまま反映させる
add_editor_style("style.css");

たった1行の指令文を記述するだけで、エディタ自体に子テーマのスタイルシートが反映されます。

他サイトで調べると、わざわざエディタ用のスタイルシートを作成する方法で説明がされています。しかし、スタイルシートを別に定義すること自体が編集ミスを発生しやすくする可能性を高めるような気がします。もしもそのようなやり方をするのであれば、エディタ用のスタイルシートには「@import」しか記述しませんね。結局そんなことをするのであれば、直接子テーマのスタイルシートを反映させた方が良くありませんか？

どうですか？

些細な事ですが、クラス「class」がエディタに反映された方が作業効率が良いと思いませんか？

興味のある方は是非やってみてください。

【A8.netに登録しよう！】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
⇒アフィリエイトならA8.net