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つを行えば、ビジュアルエディターで、ブログのデザインと同じような感じで、記事を編集できますね。

記事を編集中に、どんな感じの記事のデザインになるかがわかる

記事を作成中、編集中に、どんな感じになるのかがわかるので、一手間ですが、かけておくと、自分の記事がだいたいどんな感じかを公開前、更新前にわかるので良いと思います。

こういったところをやるか、やらないか。

ちょっとした違いですが、効率などに関係するので、やっておきたいですね。

WordPressでやっておきたいカスタマイズリストまとめ。これだけやれば、最低限ブログ運営はできるはず

Share
Published by
こばやしただあき