WordPressでビジュアルエディタの見出しをテーマの見出しと揃える方法

Tweet

237

ブログの見た目に出来るだけ近い状態でビジュアルエディタが使えたほうが、実際に表示される時との違いが少なくて言いに決まっているのですが、ビジュアルエディタはテーマのCSSを読み込んでくれては居ないようです(pre等の一部を除いて)

とくに重要なのはPタグ、HタグのCSSかと思います
利用しているテーマ用のエディタ向けCSSの用意とテーマfunctions.phpに書き加えるだけで呼び出せるようです
横幅もフォントも指定できるので実際のWEBサイトと同じ表示に出来ます

※作業前にテーマのバックアップを取っておきましょう

ビジュアルエディタ用のCSSを用意する

CSS名は何でもOKです、テーマフォルダ内に作成します
今回はedit.cssとします

CSSの内容は直接的なCSSの書き方に変えてある必要があります

例

/*テーマのCSS*/
.single h2 {
 font-size:20;
 color:#fff;
}
 
 
/*ビジュアルエディタ用に*/
h2 {
 font-size:20;
 color:#fff;
}

クラス名やID名で指定せずに直接タグを指定してやりましょう
Pタグやaタグも同様に

あとはbodyにフォントやマージン、横幅を指定できます

使っているテーマのどのCSSがそうなのかわかりにくい場合は
Chromeのデベロッパーツール(F12)やIEのデベロッパーツール(F12)でHTMLから該当のCSSを簡単に確認することが出来ます

functions.phpにコードを足して用意したCSSを読み込ませる

テーマフォルダにあるfunctions.phpに次のコードを入れます

<?php

PHPタグの間に入れてください

?>

追加するコード

// ビジュアルエディタ用CSS
add_editor_style('edit.css');
function custom_editor_settings( $initArray ) {
 $initArray['body_class'] = 'editor-area';
 return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

1行目のedit.cssがビジュアルエディタ用に追加したものです

参考ページ▼
http://unsolublesugar.com/20120826/092812/

Tweet

短縮URL:

2014年02月11日 WEB制作系 CMS WordPress WordPressテーマWordPress管理画面