WordPressのビジュアルエディタにCSSを反映させる方法
WordPressのビジュアルエディタで、文章を書いていて、デザインのCSSを反映されていると、見やすいというか、公開時にどうなるかがわかってわかりやすいですね。
ということで、WordPressのビジュアルエディタにCSSを反映させる方法について書いておきます。
WordPressのビジュアルエディタにCSSを反映させる方法
1 「function.phpへのコード追加」
2 「ビジュアルエディタ用のCSS作成」
この2つで、スタイルを反映させることができますね。
function.phpへのコード追加
// ビジュアルエディタ用CSS
add_editor_style('editor-style.css'); こちらのコードを、function.phpに追加します。
「editor-style.css」を、エディターのスタイルとして指定するということですね。
ビジュアルエディタ用のCSS作成：editor-style.css
そして、editor-style.cssを作成して、テーマに追加します。
子テーマを使っているときは、子テーマに追加します。
それから、現在自分が使用しているテーマのCSSから、ビジュアルエディタで適用したいスタイルをコピペします。
1 「function.phpへのコード追加」、2 「ビジュアルエディタ用のCSS作成」。
この2つを行えば、ビジュアルエディターで、ブログのデザインと同じような感じで、記事を編集できますね。
記事を編集中に、どんな感じの記事のデザインになるかがわかる
記事を作成中、編集中に、どんな感じになるのかがわかるので、一手間ですが、かけておくと、自分の記事がだいたいどんな感じかを公開前、更新前にわかるので良いと思います。
こういったところをやるか、やらないか。
ちょっとした違いですが、効率などに関係するので、やっておきたいですね。
シェア
フォロー
関連記事
