WordPress ビジュアルエディタのススメ クライアント様の編集精度をアップ!

  • このエントリーをはてなブックマークに追加

 WordPressの投稿画面で実際のテーマに近いデザインで、投稿編集したい・・・

これは毎月更新などを頻繁に行う場合、結構必須な要素となってきます。クライアント様は、エディタの画面が、こういうもんだと思って編集をされているので、これがテーマに近い内容で提供できると、更新するクオリティが上がるというか、失敗せずに綺麗に編集ができます。

テーマのCSSを適用し実際の表示に合わせる!

まずは、スタイルシートのファイルを別に用意します。こちらのCSSファイルは、ヘッダーやサイドバー・フッターなどは存在しないのでメイン部分のみとなります。Body に width 指定した作りでも問題ありません。

editor-style.cssを作成する

editor-style.cssがビジュアルエディタのCSSになります。必要な要素を配置してカスタマイズします。

あとは、function.phpにeditor-style.cssを読み込ませる為のコードを記述しておきます。

functions.php
1
add_editor_style("editor-style.css");

他にも、ビジュアルエディタのプラグインで有名な TinyMCEAdvanced を入れている場合は、ボタンのスタイルの中に汎用のCSSが入ってくるのでとても便利です。

スクリーンショット 2015-06-03 15.29.27

スクリーンショット 2015-06-03 15.29.43

1行目の Load ths CSS ~~~~のところにチェックを入れておきます。

スクリーンショット 2015-06-03 15.31.45

  • このエントリーをはてなブックマークに追加

コメントを残す

%d人のブロガーが「いいね」をつけました。