WordPressのビジュアルエディタにも表画面と同じcssを適用する

記事の見た目を見やすくカスタマイズしても、ビジュアルエディタはデフォルトのまま…

これだといちいちプレビューなどで確認しなければいけません。

editor-style.cssを追加してビジュアルエディタにもカスタマイズしたcssを効かせてあげましょう。

editor-style.cssファイルを作ってに記事で使用しているcssを書く。

※特定のclass名やid名を付けている場合は外しましょう。

例えば、kijiというclass名を付けていた場合

.kiji h1 {
	font-size: 2.5rem;
	border-bottom: solid 2px #e00202;
	padding-bottom: 20px;
	margin-bottom: 40px;
}
.kiji h2 {
	font-size: 2rem;
	border-left: solid 3px;
	padding: 30px 0 30px 30px;
	margin-bottom: 40px;
}
.kiji h3 {
	font-size: 1.8rem;
	background-color: #eee;
	padding: 10px 15px;
	margin-bottom: 40px;
}
.kiji h4 {
	font-size: 1.8rem;
	color: #e00202;
	margin-bottom: 30px;
}

class名を取ってeditor-style.cssに書く。

※記事内にはclass名が付かないため

h1 {
	font-size: 2.5rem;
	border-bottom: solid 2px #e00202;
	padding-bottom: 20px;
	margin-bottom: 40px;
}
h2 {
	font-size: 2rem;
	border-left: solid 3px;
	padding: 30px 0 30px 30px;
	margin-bottom: 40px;
}
h3 {
	font-size: 1.8rem;
	background-color: #eee;
	padding: 10px 15px;
	margin-bottom: 40px;
}
h4 {
	font-size: 1.8rem;
	color: #e00202;
	margin-bottom: 30px;
}

function.phpにeditor-style.cssを読み込む記述を追加

//editor-style.css　使う
add_editor_style('editor-style.css');

function.phpとeditor-style.cssを下記にアップロードして終わり。

wp-content＞themes＞使用テーマフォルダ

editor-style.cssは更新しても効かない時があります…

そんな時は下記もfaunction.phpに追加してみてください。

//TinyMCE　投稿エディタ　ビジュアルエディタ　キャッシュクリア
function extend_tiny_mce_before_init( $mce_init ) {
 
    $mce_init['cache_suffix'] = 'v='.time();
 
    return $mce_init;    
}
add_filter( 'tiny_mce_before_init', 'extend_tiny_mce_before_init' );