お問い合わせはコチラから

Luxeritasのeditor-style.cssの使い方

サイト運営

WordPressでCSSをカスタマイズしても、TinyMCEビジュアルエディタ(編集画面)の見た目はそのままという状態で使ってる人が多いと思います。

CSSをカスタマイズしてスタイルを大量に追加し始めると編集時と公開時の見た目を揃えないと、訳が分からなくなってきます。

ということで、ビジュアルエディタにCSSを宛てる方法を調べたんですが、例によって少しハマったのでメモしておきたいと思います。

ビジュアルエディタにCSSを充てるにはeditor-style.cssを使えばよい

WordPressのビジュアルエディタはeditro-style.cssというスタイルシートを読み込みます。

ということなので、editor-style.cssを用意し、自分でカスタマイズしたstyle.cssと同じようなスタイルをeditor-style.cssに記入すればエディタの編集画面で公開時と同じような見た目になるというわけです。

editor-style.cssの設置場所

親テーマしか使ってない場合

テーマ直下にeditor-style.cssを置きます。

子テーマを使っている場合

子テーマの直下に置きます。

editor-style.cssの記載内容の注意点

style.cssに書かれているスタイルには、テーマが追加するセレクタ(クラス名、IDなど)がくっついていると思いますが、ビジュアルエディタではそのセレクタが無いので、取り除かないといけません。

style.cssに以下の記述があったら、

.post h2{ .... }

editor-style.cssでは、以下のようになります。

h2{ .... }

editor-style.cssを有効にするには?

色々調べると、editor-style.cssを置いただけではダメで、function.phpに以下の記述を追加しないと有効にならないと書かれています。

add_editor_style();

editor-style.cssが反映されない場合

自分のトラブル事例

自分がやったときは、editor-style.cssに書き込んでも全く反映されず、Tiny MCE AdvancedをOFFにしたら反映されて、Tiny MCE Advancedの影響なのかといろいろ調べたのですが、原因はブラウザのキャッシュでした。

chromeの検証ツールなどでビジュアルエディタで使われているCSSを見て、自分で書いたCSSを読み込んでいる形跡がない場合はブラウザのキャッシュを疑いましょう。

キャッシュの削除方法は、Chromeの場合は検証ツールを表示させてブラウザのリロードボタン上で右クリックするとキャッシュ削除のメニューが表示されるので、それを使うのが簡単です。

より進んだ対策

いちいちキャッシュを削除するのが面倒であれば以下の記事にあるPHPコードをfunction.phpに追加してもよいでしょう。

function extend_tiny_mce_before_init( $mce_init ) {

$mce_init['cache_suffix'] = 'v='.time();

return $mce_init;
}
add_filter( 'tiny_mce_before_init', 'extend_tiny_mce_before_init' );

とここまで書いて、Luxeritasと関係ないやんと思ったので、真面目に書きます。

Luxeritasでeditor-style.cssを使う場合

Luxeritasの場合は簡単です。

editor-style.cssの場所

Luxeritasでは親テーマ、子テーマともにeditor-style.cssがテーマ直下に予め用意されているので、それを編集すればよいです。

editor-style.cssの編集は、Luxeritasの管理メニューの中からできません。外観 → テーマの編集 と進んで 子テーマのeditor-style.cssを編集します。

Luxeritas 3.13で大きな変更がありました。

editor-style.cssは、Luxeritas管理メニューの『子テーマの編集』に進み、『ビジュアルエディタ』の項目でeditor-style.cssを編集できます。

Luxeritas 3.13では、そもそもeditor-style.css自体いじらなくても、style.cssの内容が有効になるようになってます。

editor-style.cssを有効にするには?

Luxeritasでは、editor-style.cssを編集するだけで有効になります。もともと自動的に読み込む仕様のようです。

Luxeritasでは、function.phpへの記述は不要です。

Luxeritas 3.13からこの記事いらなくなってます。

まとめ

やってみると簡単なのですが、簡単なものほどトラブルが起きた時には原因がわからずいろいろ調べて傷口を広げるパタンになりがちです。わからなかったらキャッシュを削除というよくあるトラブルでした。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました