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. Webが苦手な初心者対象。ゼロから作るWordPressワークショップ
  3. Adobe Premiere Rush CCが超スゴイ!スマホでもPCでもシーム…
  4. 日程追加!Webが苦手な初心者対象。ゼロから作るWordPressワークショップ…

関連記事

  1. SEO

    無料セッション!ホームページ・WordPressのお悩み解決

    自分の本来の仕事や好きなことに集中したいのに、集客のためにブログ書いた…

  2. WordPressカスタマイズ

    WordPressカスタマイズ

    レビュー待ちの投稿がされた場合、管理者にメールを送る

    想定としては、ブログ記事の公開に上長や責任者の商人が必要な場合。…

  3. cf7 google sheet connector
  4. WordPressカスタマイズ

    WordPressカスタマイズ

    アイキャッチ画像が設定項目がないとき

    テーマテンプレートがサポートしていない時function.phpに…

  5. WordPressカスタマイズ

    WordPressの基礎

    WordPressのRSSフィードにアイキャッチ画像を入れる

    WordPressが発行するRSSフィードは、デフォルトではアイキャチ…

  6. PHP

    背景色に対して文字色は白か黒か

    W3Cで公開されているアルゴリズムを利用してみる。例えば、…

ピックアップ

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

    WordPressカスタマイズ

    レビュー待ちの投稿で管理者権限のユーザーにメールを送る
  2. WordPressカスタマイズ

    WordPressの基礎

    WordPressのRSSフィードにアイキャッチ画像を入れる
  3. cf7 google sheet connector

    WordPressカスタマイズ

    フォームメールを自動でGoogleスプレッドシートに保存するプラグイン「CF7 …
  4. api

    Google Chart API を使用したQRコード生成
  5. WordPress初心者ワークショップ 名古屋開催

    WordPressプラグイン

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