WordPress

2016.05.19

WordPressのビジュアルエディタ―をカスタマイズして、実際の見え方と同じに

WordPressで投稿を編集するとき、ビジュアルエディタ―と実際のページの見え方が大きく違うと、編集しにくいですね。テーマにビジュアルエディタ―用のスタイルシートを追加すると、ほぼ同じ見え方で記事の編集ができるようになります。

専用スタイルを設定する前のビジュアルエディタ―

専用スタイルを設定する前のビジュアルエディタ―画面

専用スタイル設定後のビジュアルエディタ―

専用スタイルシート設定後のビジュアルエディタ―画面


※FTPソフト等を使ってWordPressのテーマ内ディレクトリに自分でファイルをアップロードできることが前提です。

やり方を順にご紹介します。

functions.phpを編集します

まずはビジュアルエディタ―用のスタイルシートが使えるように以下のコードをfunctions.phpに追記します。

// ビジュアルエディタ―用スタイルシートを有効化
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

Googleフォントを使っている場合

テーマスタイルにGoogleフォントを使っている場合は、そのままだとビジュアルエディターには反映されません。

functions.phpへ以下のように追記が必要です。

//ビジュアルエディタ―にGoogleフォントを有効化
function wpdocs_theme_add_editor_styles() {
    $font_url = str_replace( ',', '%2C', '//fonts.googleapis.com/css?family=フォント名' );
    add_editor_style( $font_url );
}
add_action( 'after_setup_theme', 'wpdocs_theme_add_editor_styles' );

『フォント名』にはテーマで利用しているGoogleフォント名を入れます。


 

custom-editor-style.cssを作成します

HTMLエディターでも、メモ帳などのテキストエディタでもいいので、custom-editor-style.cssというファイルを作成します。

テーマと同じ内容を引き継ぐ場合は、

@import url( 'style.css' );

とだけ記述すればOKです。

ただ、IDやクラス名の付け方によってはビジュアルエディタ―に反映されないものが出てくる場合があります。その場合は必要に応じて上書き用のスタイルを追記します。

/*上書き例*/
body {
        width:860px;
	background: url(images/contents_bg.png) top center repeat-y #657400;
}

更に強くスタイルを上書きしたい場合、ビジュアルエディタ―は ”mce-content-body” というクラスがbodyに付与されているので、

/*さらに強い上書き例*/
body.mce-content-body {
        width:860px;
	background: url(images/contents_bg.png) top center repeat-y #657400;
}

などとします。


 

custom-editor-style.cssをアップロード

出来上がったビジュアルエディタ―用のスタイルシートは、テーマフォルダにアップロードします。

WordPressのインストールディレクトリ/wp-content/themes/テーマディレクトリ

の中ですね。アップロードできたら編集画面を確認してみましょう。

投稿タイプごとに違うスタイルを適用させたい場合

投稿タイプごとに違うスタイルをビジュアルエディタ―にも適用させたい場合の方法も関数リファレンスには記されています。詳しくは以下をご覧ください。

関数リファレンス/add editor style


関連記事

LINE STAMPLine Stamp

樋口こたつ&ミノムシのラインスタンプ、絶賛販売中です❤ スタンプキャラによる漫画もpixivにて超不定期連載中!!お暇なお嬢ちゃんお坊ちゃん方は是非お立ち寄りくださいッ

スライドショー内のスタンプをクリックすると、LINEストア内のスタンプページにジャンプします。