天城スタジオ

ビジュアルモードと表示結果を限りなく近くする。

 

ワードプレスで記事を書く時、

ビジュアルモードでもプレビューするとかなり違いが出ます。

結果、何度も見直して修正を行う手間が増えてしまいます。

 

ワードプレスの知識がある程度ある方なら予測で書き込みができますが、

それが、クライアント様になると問題があります。

「全然違う」と言われると、

理解してもらうのに数時間、

もしかすると分かり合えない場合もあります。

 

ビジュアルにもCSSを適応させよう！

方法は二通りです。

1、ワードプレスのCoreFileを直接修正する。

2、function.phpとeditor-style.cssを作成する。

 

「1、ワードプレスのCoreFileを直接修正する」は、

ワードプレスのエディタのCSSにあたるファイルを探して追加・修正します。

ワードプレス3.9.1の場合

wordpress/wp-includes/js/tinymce/skins/wordpress/wp-content.css

場所にCSSが格納されています。

そのbodyがビジュアル内のCSSになるので、

適宜書き込むと、

つまり投稿部のwrap部のセレクタ名を消して、そのままCSSをコピペすれば、CSS反映されます。

画像のURLも変更すると画像も反映されます。

 

「2、function.phpとeditor-style.cssを作成する。」は、

1bit::memo様の

「WordPressのビジュアルエディタ上の表示と実際の投稿の表示を合わせる方法」

で詳しく解説されていますので、参考にさせていただきました。

ありがとうございます。

 

これはfunction.phpに書き換えようの命令文を書き、

editor-style.cssを作成して反映させる方法です。

 

wordpressのバージョンで構文が変わるようですが、

最新の3.5.1以降では

 

add_editor_style();

 

の一文をfunction.phpに記入するだけで反映されるようです。

そしてeditor-style.cssを作成してテーマのindex.php

やstyle.cssと同じ階層にUPロードすれば完了です。

CSSの書き方は、

 .post-metaの中が記事のビジュアルのスタイルになるので、

 .post-meta以下のスタイルを、 .post-metaを消して記入します。

例

.post-meta h2 →h2

.post-meta .red →.red

 

.post-metaがビジュアルのbody(wrap)になっているので、

書体などの変更はbody{}

でスタイルを決めてeditor-style.cssをindexと同じ階層にUPすると、

限りなく見た目が近い投稿作成欄（ビジュアルモード）になります。

 

結局どうなの？

wordpressのバージョンが上がると、

どちらにしても修正が必要な場合が出てくるようです。

推奨なのは、function.phpを使う方ですが、

納品する場合は、coreFileを修正した方が早いような気もします。

納品する場合は不具合が起きないようバージョンを上げない様に話したり、

設定で上げられたにようにしておくからです。

しかもcoreFileなのでテーマが変わっても同じように使えます。

※テーマよってはwrapのセレクタ名が違うので駄目ですが…※

 

状況によって使い分ける方がいいでしょうね。

 

もちろん自己責任です！

カスタマイズする時は、必ずバックアップをしましょう！

 

「ワードプレスのビジュアルエディタにCSSを適応する」でした。