wordpressでビジュアルエディタ画面を実際の投稿画面と同じにする方法

2016/02/21 2016/02/23Author:BOR

費用：0円　時間：10分

wordpressというと、編集時のビジュアルエディタ画面と実際に投稿された記事画面が同じように表示されることが便利な点です。

しかし、どういうわけか実際の投稿と編集時の画面の表示が一致しないことがあります。

理由としては、style.cssやfunction.phpやプラグインによる齟齬なのですが、表示を何とか合わせたい！

ということで、ビジュアルエディタ画面と実際に投稿された記事画面を一致できるようにしましょう。

バックアップは絶対必要。

ダッシュボード＞＞テーマの編集にて、function.phpの編集を行いましょう。

どこでも構わないので、最後の行にでも以下のコードをコピペしましょう。

 add_editor_style('editor-style.css');

変な場所にコピペしてしまうと完全にバグって使えなくなるので気を付けてください。バグったらFTPから直す必要があるので( ;∀;)

stinger5ではもう既定であるのですが、ない場合はFTPなどで新規で作成しましょう。

editor-style.cssというcssファイルをutf-8形式で作成しておきます。

すると、wordpressの管理画面＞＞テーマの編集の右メニューにeditor-style.cssが表示されますよ。

されたなら、自由にビジュアルエディタ用にコードを描いていきましょう。

色々ビジュアルエディタと投稿後の記事との表示が違うという場合はstyle.cssを全部インポートしてしまうことも選択肢としてはありですが、俺はやっていません。

なぜかというと、インポートは読み込みの速度が超絶遅くなるからです。だってビジュアルエディタと関係ないコードまで読み込むからね。

だから、基本的には、

などの一部分だけをコピーするのが適切だと思いますよ。

ということで使えるようになったよね(＾◇＾)

より確認作業がいらなくなったから便利ですよ。皆さんも困ったらやってみてね！