WordPressのエディタ内でもCSSを反映させるエディタースタイルの適用方法
WordPress案件のクライアントワークでも、お客さんからのご要望として時々上がってくるのが、エディタ内にもスタイルを適用させる、エディタースタイルを使うケースなのですが、ついつい忘れがちになるので備忘録として残しておきたいと思います。
エディタースタイルは、WordPressのエディタ内で適用させるCSSのことで、該当するCSSファイルを用意して、指定することで適用されるようになります。まず、エディタースタイルが適用されていない場合、つまりデフォルトの表示ではこのようになります。
編集する人のリテラシーによっては、なかなか取っ付きにくいと思われるかもしれませんね。そこで、このエディタ内の表示にもCSSが適用されるようにしていきます。まずは「functions.php」に下記の通り記述し、エディタースタイルを有効化させます。この時に独自のCSSを使う場合には該当するファイルのパスとファイル名を直接引数へと指定します。
【functions.php】
エディターには比較的簡単にスタイルを適用させることができますので、必要に応じて気軽に対応できそうですね。 (参考にさせて頂いたサイト) Editor Style - WordPress Codex 日本語版

add_editor_style(); // 独自ディレクトリおよびファイルを指定 add_editor_style('PATH/FILE_NAME.css');ちなみにですが、デフォルトの場合はテーマファイル直下の「editor-style.css」を参照する形になっています。ここではデフォルトの仕様で進めていきます。そこで、下記のようにテーマファイル直下に「editor-style.css」を用意します。
wp-content ┗ themes ┗ USER_THEME ┗ editor-style.css「editor-style.css」には実際にエディタ内で適用させるスタイルを記述していきます。この時に確実に適用させるためにも、WordPressのエディタ要素に付与されているclass名をセレクタに追記しておくことをオススメします。下記の例では「.wp-editor」になります。 【editor-style.css】
.wp-editor h1 { background: #ccc; font-weight: bold; margin-bottom: 30px; }これで改めてエディタを確認すると、、こんな感じでCSSが適用されて、よりブログのイメージに近づけることができます。(サンプルはモノクロのため少しわかりにくいのですが、、)

エディターには比較的簡単にスタイルを適用させることができますので、必要に応じて気軽に対応できそうですね。 (参考にさせて頂いたサイト) Editor Style - WordPress Codex 日本語版
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories