logo

小さなお店や女性向け店舗等の
ホームページを作成しております

blog

ブログ

WordPressビジュアルエディターにcssを反映する

今回は、ビジュアルエディターにcssのスタイルを反映する方法をメモしておきます。
クライアントワークなどで、あらかじめ設定してあげているととても親切♪


目次

    1. 1.まずfunction.phpに変更を加える
    2. 2.次にeditor-style.cssを新規で作成し、記述する
    3. 3.注意点く

私たちwebデザイナーやプログラマーを仕事としてwordpressを触る場合は、ビジュアルエディタはあまり使用しないかもしれません。
でもPCがあまり得意でないクライアントもまだまだ多く、そんな方はビジュアルエディタでブログなどを記述する人も多いでしょう。
そんなときに、記述中も目に見えてスタイルが反映されていると、とてもわかりやすいですよね。

ビジュアルエディタの反映は、意外と簡単でした。
ただ、何回か反映されずに困ったので、注意点も忘れないようにメモに残します。

1.まずfunction.phpに変更を加える

function.phpに下記を追加します。そのままコピペで大丈夫です。

2.次にeditor-style.cssを新規で作成し、記述する

ブログ内で使用したい要素(h2やh3など)にcssを加える。
例えばこんな感じです。
*通常style.cssに記載があるもののはずなので、それのコピペで大丈夫です。

これでファイルを更新すればビジュアルエディターにスタイルが反映されて表示されるはず。
ちなみにブロックエディター(グーテンベルク)でもクラシックエディタ―でもどちらでも反映されます。

3.注意点

私が上手くいかなかった理由は、実際のcss内では、.blog h3 {~} のように、親要素を指定してcssを書いていたので、
editor-style.cssにも同じように記述していた為、反映されませんでした。
style.css と editor-style.css は全く別物、editor-style.css に記述した内容は、他のファイルには影響せず、
ビジュアルエディターにのみ反映される、ということです。
(たしかにstyle.cssしかhead内で読み込んでいないので、そりゃそうですね。。)

あともう一点は、設定後一度キャッシュを削除してみましょう。
WordPressを編集している方はもう何度も行っている作業かもしれませんが、念のためメモしておくと、
(googleChromeの場合です)
Chromeの右上の三つ・が縦に並んでいるボタンをクリック

設定

閲覧履歴データの削除

「キャッシュされた画像とファイル」にチェックを入れて「データを削除」ボタンを押下

ちなみにショートカットキー Ctrl+Shift+Del で「閲覧履歴データの削除」の画面が開きます。
覚えておきましょう♪