Wordpress

WordPress ビジュアルエディターにCSSを適用する方法

WordPress

WordPress入門記事一覧

WordPress ビジュアルエディターと完成の表示が違うんだけど、いちいちプレビューで確認するの面倒。同じにする方法はある？

WordPressのビジュアルエディターにCSSを適用します。

WordPressのビジュアルエディターにCSSを適用する方法を紹介します。

WordPress ビジュアルエディターにCSSを適用

  • 完成系と近いデザインになり編集しやすい
  • プレビューを使わなくても実際のサイト表示を確認できる

WordPress ビジュアルエディターにCSSを適用する方法

ファイル構成例
public_html
├ドメイン
　├wordpress
　　├wp-content
　　　├themes
　　　　├twentyseventeen:親テーマ
　　　　├twentyseventeen_child:子テーマ
　　　　　├editor-style.css：スタイルシート作成
　　　　　├functions.php：スタイルシート読み込み

Step1.editor-style.css ファイル作成

WordPressテーマフォルダにeditor-style.css ファイルを作成します。

editor-style.css に書き込んだCSSがビジュアルエディターに反映されます。

editor-style.css に書き込んだCSSは、実際のサイト表示には影響を与えません。

Step2.functions.phpファイル編集

functions.php に editor-style.css のスタイルシートを読み込む設定をします。

// ビジュアルエディター用CSSファイル使用を宣言
add_editor_style();
// ビジュアルエディター用CSSファイル読み込み
add_editor_style("editor-style.css");

Step3.ブラウザのキャッシュをクリアする

ブラウザのキャッシュをクリアします。ブラウザにキャッシュが残っている場合、設定は正しくてもうまくCSSが適用されない場合があります。

Googleクロームのキャッシュクリア：
ウィンドウ右上「⋮」>「設定」>「詳細設定」>「閲覧データを消去する」>「キャシュされた画像とファイル」>「閲覧データを消去する」
詳細：ブラウザキャッシュを削除する方法 chrome・Firefox
WordPress入門

シェア！

RECOMMENDこちらの記事も人気です。

RECOMMENDこちらの記事も人気です。