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 5.0 リリースで注意するべきこと
  2. スマホで動画編集 Adobe Premiere Rush CC編-テロップはPC…
  3. スマホ動画を作るときの手順とアプリ
  4. Internet Explorerの終わり-Microsoftが公式に使用をやめ…
  5. Webが苦手な初心者対象。ゼロから作るWordPressワークショップ

関連記事

  1. WordPressカスタマイズ

    WordPressの基礎

    WordPressのユーザー権限

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

  2. WordPressカスタマイズ

    WordPressカスタマイズ

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

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

  3. WordPressカスタマイズ

    ログイン画面の背景を変える

    body.login の背景を設定するget_template…

  4. WordPressカスタマイズ

    WordPressカスタマイズ

    管理画面で不要な表示オプションを非表示にする

    WordPressの投稿画面や固定ページ作成画面は、一般のユーザーには…

  5. WordPressカスタマイズ

    WordPressカスタマイズ

    寄稿者にメディアアップロード権限を付与

    組織などで記事を公開するときに上長の承認が必要な場合、権限設定にちょっ…

  6. WordPressカスタマイズ

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

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

ピックアップ

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

    動画

    Adobe Premiere Rush CCが超スゴイ!スマホでもPCでもシーム…
  2. SEO

    プッシュ通知を配信するプラグイン
  3. PHP

    背景色に対して文字色は白か黒か
  4. cf7 google sheet connector

    WordPressカスタマイズ

    フォームメールを自動でGoogleスプレッドシートに保存するプラグイン「CF7 …
  5. WordPressカスタマイズ

    WordPressカスタマイズ

    管理画面で不要な表示オプションを非表示にする
PAGE TOP