WordPressのビジュアルエディタ表示を公開されるページ表示に近づける

ホーム
WordPressカスタマイズ, 機能追加, 表示する
WordPressのビジュアルエディタ表示を公開されるページ表示に近づける

WordPressカスタマイズ

2018.09.19

WordPressのビジュアルエディタ表示を公開されるページ表示に近づける

手順だけを簡単に説明すると

1. エディタ用のCSSを用意する
2. CSSを読み込む

基本的にはこれだけです。

1 エディタ用のCSSを用意する
2 functions.phpでスタイルシートを読み込ませる
3 応用編：複数のスタイルシートを読み込ませる
4 add_editor_style について
5 関連

エディタ用のCSSを用意する

通常のスタイルシートとは別にビジュアルエディタで入力したコンテンツに適用するスタイルシートを準備します。

テーマフォルダ直下にエディター用のスタイルシートを置いても良いのですが、追加改造するときに迷子にならないように「css」フォルダを作りその中に「custom-editor-style.css」を作ります。
editor-style.cssに投稿するコンテンツに反映するCSSをコピーしていきます。

この時の注意点としては、サイトの表示エリアで使っているclassなどは取り除く必要があります。
たとえば、「.contents」とか、「.main」とか、「.article」など。


/* 上手く反映されない例　（エディター内にないclassが使われている）*/
.main h2{
  font-size: 24px;
  font-weight:700;
}

/* エディターに反映される書き方 */
h2 {
  font-size: 24px;
  font-weight:700;
}
h3.style_h3{
  font-size: 20px;
  font-weight:700;
  border-bottom:1px solid #999999;
}

/* 上手く反映されない例　（エディター内にないclassが使われている）*/

.main h2{

font-size: 24px;

font-weight:700;

}

/* エディターに反映される書き方 */

h2 {

font-size: 24px;

font-weight:700;

}

h3.style_h3{

font-size: 20px;

font-weight:700;

border-bottom:1px solid #999999;

}

今回は、以前の記事で書いたオリジナルクイックラグで追加した書式について、ビジュアルエディタで編集集の画面でも反映するようにします。


@charset "utf-8";

/* ----------------------------------------------------------------------
 蛍光マーカー
---------------------------------------------------------------------- */
.marker-yellow {
	background: linear-gradient(transparent 65%, #ffff66 50%);
}
.marker-pink {
	background: linear-gradient(transparent 65%, #ff99cc 50%);
}
.marker-orange {
	background: linear-gradient(transparent 65%, #ffcc99 50%);
}

/* 見出しタグ　*/
h3.dmn_h3{
	margin:3em 0 1.5em;
	padding:1.1em .2em 1em;
	font-size:22px;
	font-weight:400;
	border-top:1px solid #222222;
	border-bottom:1px solid #222222;
}
h4.dmn_h4{
	margin:2.5em 2px 1.2em;
	padding:.3em 0 .3em .8em;
	font-size:18px;
	font-weight:400;
	border-bottom:none;
	border-left:2px solid #222222;
}
h5.dmn_h5{
	margin:2em 0 1em;
	padding:.5em .8em .3em 1em;
	font-weight:700;
	font-size:18px;
	background:#f5f5f5;
	box-shadow:0px 2px 0px 0px #f2f2f2; 
}

@charset "utf-8";

/* ----------------------------------------------------------------------

蛍光マーカー

---------------------------------------------------------------------- */

.marker-yellow {

background: linear-gradient(transparent 65%, #ffff66 50%);

}

.marker-pink {

background: linear-gradient(transparent 65%, #ff99cc 50%);

}

.marker-orange {

background: linear-gradient(transparent 65%, #ffcc99 50%);

}

/* 見出しタグ　*/

h3.dmn_h3{

margin:3em 0 1.5em;

padding:1.1em .2em 1em;

font-size:22px;

font-weight:400;

border-top:1px solid #222222;

border-bottom:1px solid #222222;

}

h4.dmn_h4{

margin:2.5em 2px 1.2em;

padding:.3em 0 .3em .8em;

font-size:18px;

font-weight:400;

border-bottom:none;

border-left:2px solid #222222;

}

h5.dmn_h5{

margin:2em 0 1em;

padding:.5em .8em .3em 1em;

font-weight:700;

font-size:18px;

background:#f5f5f5;

box-shadow:0px 2px 0px 0px #f2f2f2;

}

上記を css/custom-editor-style.css として保存。

functions.phpでスタイルシートを読み込ませる

css/custom-editor-style.css を作ったら、次はfunctions.phpでスタイルシートを読み込ませる設定をします。


/* functions.php */
// ビジュアルエディタ用スタイルシートの読み込み
function custom_add_editor_styles() {
 	add_editor_style('css/custom-editor-style.css');
}
add_action( 'admin_init', 'custom_add_editor_styles' );

/* functions.php */

// ビジュアルエディタ用スタイルシートの読み込み

function custom_add_editor_styles() {

add_editor_style('css/custom-editor-style.css');

}

add_action( 'admin_init', 'custom_add_editor_styles' );

add_editor_style で読み込みたいスタイルシートを指定します。
これで、実際の表示と近くなるはずです。

応用編：複数のスタイルシートを読み込ませる

例えば、サイトにアイコンフォントの Font Awesome を使っていて、それも反映いさせたいとかいう時は、先ほどのcssフォルダに Font Awesome のスタイルシートを保存します。
そして、add_editor_style で配列にして読み込めば反映されるはずです。


/* functions.php */
// ビジュアルエディタ用スタイルシートの読み込み
function custom_add_editor_styles() {
 	add_editor_style(array('css/custom-editor-style.css', 'css/fontawesome.min.css'));
}
add_action( 'admin_init', 'custom_add_editor_styles' );

/* functions.php */

// ビジュアルエディタ用スタイルシートの読み込み

function custom_add_editor_styles() {

add_editor_style(array('css/custom-editor-style.css', 'css/fontawesome.min.css'));

}

add_action( 'admin_init', 'custom_add_editor_styles' );

配列を増やせば、他のスタイルシートも読み込めます。

add_editor_style について

今回は、add_editor_style の引数にスタイルシート名を指定しましたが、デフォルトではテーマフォルダー直下の「editor-style.css」を読みに行きます。
エディター用のスタイルシートが1つだけの時は、テーマフォルダー直下に editor-style.css を作って、引数なしで add_editor_style() とやれば、エディター用のスタイルシートを読み込みます。


/* エディター用css 「editor-style.css」がテーマフォルダー直下にある場合。*/

// ビジュアルエディタ用スタイルシートの読み込み
function deme_add_editor_styles() {
 	add_editor_style();
}
add_action( 'admin_init', 'deme_add_editor_styles' );