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. スマホ動画を作るときの手順とアプリ
  2. 無料セッション!ホームページ・WordPressのお悩み解決
  3. Adobe Premiere Rush CCが超スゴイ!スマホでもPCでもシーム…
  4. WordPress初心者ワークショップをやりました。次回は2月20日
  5. WordPress 5.0 リリースで注意するべきこと

関連記事

  1. WEB技術

    お問合せフォームの送信通知をLINEで受け取る

    どのホームページにも、お問合せフォームは必ずあります。WordPr…

  2. SEO

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

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

  3. WordPressカスタマイズ

    Googleの日本語Webフォント

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

  4. WordPressカスタマイズ

    ログイン画面のアイコンを変えてみる

    WordPressのログイン画面のロゴ部分のHTMLを見てみると、…

  5. SEO

    オススメのWordPressテンプレート 2018

    WordPRessには無料で使えるテンプレートが多数用意されています。…

  6. WordPressカスタマイズ

    WordPressカスタマイズ

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

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

ピックアップ

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

    SEO

    Googleアナリティクスとサーチコンソールの違い
  2. WordPressカスタマイズ

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

    蛍光マーカーのように表示するCSS
  4. WordPressプラグイン

    WPでいつも使うプラグイン(メモ)
  5. ブログの書き方

    ブログのリンクを貼るときの注意
PAGE TOP