ビジュアルエディタを使って編集する時に、実際のテーマと同じに表示させる方が、編集画面が見やすくなり効率的です。
ビジュアルエディタに独自のスタイルを適用させる主な手順は以下の３つの手順です。
- テーマ（子テーマ）フォルダ内にeditor-style.cssファイルを作成する
- 作成したeditor-style.cssファイルにスタイルを書き込む
- functions.phpファイルに独自スタイル用のコードを追加する
以上の手順で、簡単にビジュアルエディタに独自のスタイルを反映させることができます。
目次
ビジュアルエディタ用のCSSを作成する
editor-style.cssを作成する
テーマのファイルの中にeditor-style.cssが見当たらない場合は、editor-style.cssを作成します。
FTPを使って、style.cssをコピーします。
- WordPressのホルダー下のwp-content＞themesで使っているテーマまたは、子テーマを探します。
- テーマ（子テーマ）のホルダーの中のstyle.cssをコピーしてeditor-style.cssファイルを作成します。
または、wp-content＞themesにある他のテーマのeditor-style.cssをコピーして、使っているテーマの下にeditor-style.cssファイルを作成します。
editor-style.cssを編集します。
style.cssのスタイルを、editor-style.cssにそのまま貼り付けても、同じような表示にはなりません。
他のテーマのeditor-style.cssをコピーして、editor-style.cssファイルを作成した場合は、以下の記述は関係ありません。CSSはそのままでも動作しますが、更にカスタマイズすることもできます。
ビジュアルエディターで使えない書き方
style.cssなどでは、特定のエリアだけに反映するスタイルシートなので、以下のように書かれていることが多いからです。
|
#maim h2{
background-color: red;
}
|
上記は、#mainカラム内のH2見出しに反映されるように書かれています。
ただ、ビジュアルエディタには#mainカラムは存在していませんので、スタイルが呼び出されず、上記のスタイルは反映されません。
ビジュアルエディター用の書き方
ビジュアルエディタに反映させるには、以下のように修正します。
|
h2{
background-color: red;
}
|
もしくは以下のように、body#tinymce.wp-editor配下に適用する形で書きます。
|
body#tinymce.wp-editor h2{
background-color: red;
}
|
function.phpを開いて下記の内容を文末に追記します。
| add_editor_style( ‘editor-style.css’ ); |
以上で、ビジュアルエディタにテーマのCSSが反映されます。
