ieha * Web Design ieha * Web Design

WordPressのビジュアルエディタに公開画面のCSSを適用する

「コレ公開画面でどう見えんだろ」って思いつつ、プレビューが面倒だったので、ビジュアルエディタに公開画面のCSSを適用しました。便利。

今更ネタですが、ブログ書くぞ〜ちゅう意識になったってことで。

参考

関数リファレンス/add editor style – WordPress Codex 日本語版

適用方法

1.テーマのfunctions.phpに以下のコードを追加

2.custom-editor-style.cssを作成。
今回の場合「~あなたのテーマディレクトリパス~/assets/css/custom-editor-style.css」です。

3.custom-editor-style.cssを編集して、ビジュアルエディタに反映させる。

cssの作り方

custom-editor-style.cssの中身は、テーマから適用したい箇所のCSSをコピーすればいいでしょう。

自分はいつもの流れで、custom-editor-style.scssとして、アレコレ@importからのgulpコンパイル&Minifyしましたが、凝ったレイアウトでもないので、大人しく素のCSSコピペすりゃ良かったって徒労感。

ともあれ、minしたのでfunctions.phpのコードは以下でやりました。

cssの中身は普通に以下みたいな感じで。

 

その他、投稿タイプに応じてエディタ用カスタムスタイルシートを関連付けたりもできます。
ってCodexに書いてあります。

投稿タイプによるスタイルの選択

ちなみに私、シンタックスハイライトには、Crayon Syntax Highlighterを利用しています。
はっきり言ってデフォ設定のが見やすいんですけど、自分の環境に合わせ以下に設定。

  • Theme:Sublime Text
  • Font:sourcecodepro
  • Font Size:12
  • Line Height :20

Crayon Syntax Highlightern

「自分の環境に合わせ」ってまことしやかに書いてますが、読むのは訪問する方なのであり、また、ここでコーディングするわけでもなく、環境を再現する必要は無いのであって、これは私の拘り・自我・自己顕示・美意識等の発露に過ぎません。

しかし、まんま再現できるとは思わんかった。
自分は汎用的な環境で開発してるのだと知る。

コメントする

必須 が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。
※コメントは即時反映されない場合があります。

page top