WordPressカスタマイズ

WordPressのビジュアルエディタ表示を公開されるページ表示に近づける

手順だけを簡単に説明すると

    1. エディタ用のCSSを用意する
    2. CSSを読み込む

基本的にはこれだけです。

エディタ用のCSSを用意する

通常のスタイルシートとは別にビジュアルエディタで入力したコンテンツに適用するスタイルシートを準備します。

テーマフォルダ直下にエディター用のスタイルシートを置いても良いのですが、追加改造するときに迷子にならないように「css」フォルダを作りその中に「custom-editor-style.css」を作ります。
editor-style.cssに投稿するコンテンツに反映するCSSをコピーしていきます。

この時の注意点としては、サイトの表示エリアで使っているclassなどは取り除く必要があります。
たとえば、「.contents」とか、「.main」とか、「.article」など。

今回は、以前の記事で書いたオリジナルクイックラグで追加した書式について、ビジュアルエディタで編集集の画面でも反映するようにします。

上記を css/custom-editor-style.css として保存。

functions.phpでスタイルシートを読み込ませる

css/custom-editor-style.css を作ったら、次はfunctions.phpでスタイルシートを読み込ませる設定をします。

add_editor_style で読み込みたいスタイルシートを指定します。
これで、実際の表示と近くなるはずです。

応用編:複数のスタイルシートを読み込ませる

例えば、サイトにアイコンフォントの Font Awesome を使っていて、それも反映いさせたいとかいう時は、先ほどのcssフォルダに Font Awesome のスタイルシートを保存します。
そして、add_editor_style で配列にして読み込めば反映されるはずです。

配列を増やせば、他のスタイルシートも読み込めます。

add_editor_style について

今回は、add_editor_style の引数にスタイルシート名を指定しましたが、デフォルトではテーマフォルダー直下の「editor-style.css」を読みに行きます。
エディター用のスタイルシートが1つだけの時は、テーマフォルダー直下に editor-style.css を作って、引数なしで add_editor_style() とやれば、エディター用のスタイルシートを読み込みます。

こっちを先に書くべきだったですね。

リファレンス add_editor_style

ピックアップ記事

  1. WordPress初心者ワークショップをやりました。次回は2月20日
  2. Internet Explorerの終わり-Microsoftが公式に使用をやめ…
  3. Googleの日本語Webフォント
  4. 日程追加!Webが苦手な初心者対象。ゼロから作るWordPressワークショップ…
  5. Webが苦手な初心者対象。ゼロから作るWordPressワークショップ

関連記事

  1. 常時SSL化はお済ですか

    SEO

    サイトの常時SSL化はお済ですか?

    ちょっと前から、サイトを常時SSL化しないと、検索順位が下がるよなんて…

  2. WordPressカスタマイズ

    Googleの日本語Webフォント

    WordPressやホームページ制作で、もっとオシャレなフォントを使い…

  3. WordPressカスタマイズ
  4. WordPressカスタマイズ

    カスタム投稿タイプの投稿もSNSに自動投稿したい

    WordPress.orgの公式プラグインのJetPackを入れると、…

  5. WordPressカスタマイズ
  6. WordPressカスタマイズ

    WordPressの基礎

    WordPressのユーザー権限

    権限グループ 管理者 administrator 編集…

ピックアップ

  1. さよならインターネットエクスプローラー
  2. WordPress初心者ワークショップ 名古屋開催
  3. wordpress5.0リリース
Webが苦手な人でもできるようになる。ゼロから自分で作るワードプレスワークショップ名古屋開催 デメニギスの30分無料セッション
  1. WordPressカスタマイズ

    トップに動画が使えるWPテーマ
  2. HTML/CSS

    蛍光マーカーのように表示するCSS
  3. 今日の出来事

    作業と仕事を分ける。
  4. WordPressカスタマイズ

    WordPressカスタマイズ

    寄稿者にメディアアップロード権限を付与
  5. WordPress初心者ワークショップ 名古屋開催

    WordPressプラグイン

    Webが苦手な初心者対象。ゼロから作るWordPressワークショップ
PAGE TOP