ビジュアルエディタ の エディタスタイル を 使ってみる

皆さんは ビジュアルエディタ って 使っていますか??

僕は 使っていないのですが
ちょっと 新しいことを してみたいなって 思って 勉強してみました!!

今回は ビジュアルエディタ に
組み込んだコードの 始点 と 終点 を 表示させてみる
なんてことを やってみようと思います

まずは ビジュアルエディタ用に CSS を 読み込みます

add_action( 'after_setup_theme', function() {
  add_editor_style();
} );

これで テーマ内に editor-style.css という ファイルを 作れば 読み込まれます

後は 適当に CSS で 装飾してあげます

p:after,
blockquote:before,
blockquote:after,
ol:before,
ol:after,
ul:before,
ul:after,
li:before,
li:after,
hr:after,
h1:before,
h1:after,
h2:before,
h2:after,
h3:before,
h3:after,
h4:before,
h4:after,
h5:before,
h5:after,
h6:before,
h6:after,
pre:before,
pre:after {
  font-size: 10px;
  color: gray;
}

p:after {
  display: block;
  content: '[段落]';
}

blockquote:before {
  content: '[引用 開始]';
}
blockquote:after {
  content: '[引用 終了]';
}

ol:before {
  content: '[ol]';
}
ol:after {
  content: '[/ol]';
}
ul:before {
  content: '[ul]';
}
ul:after {
  content: '[/ul]';
}
li:before {
  content: '[li]';
}
li:after {
  content: '[/li]';
}

hr:after {
  content: '[hr]';
}

h1:before {
  content: '[見出し1 開始]';
}
h1:after {
  content: '[見出し1 終了]';
}
h2:before {
  content: '[見出し2 開始]';
}
h2:after {
  content: '[見出し2 終了]';
}
h3:before {
  content: '[見出し3 開始]';
}
h3:after {
  content: '[見出し3 終了]';
}
h4:before {
  content: '[見出し4 開始]';
}
h4:after {
  content: '[見出し4 終了]';
}
h5:before {
  content: '[見出し5 開始]';
}
h5:after {
  content: '[見出し5 終了]';
}
h6:before {
  content: '[見出し6 開始]';
}
h6:after {
  content: '[見出し6 終了]';
}

pre:before {
  content: '[整形済みテキスト 開始]';
}
pre:after {
  content: '[整形済みテキスト 終了]';
}

こんな感じですね

足りない分は 別途 追記していくという感じで!!