editor-style.cssをフロントにも適用させたい。

  • muro

    (@muromuro)


    5ヶ月、 3週前


    add_action("wp_enqueue_scripts", function () {
    	wp_enqueue_style("editor-style", get_theme_file_uri() . "/css/editor-style.css");
    });

    add_action('admin_init', function () {
    	add_editor_style('css/editor-style.css');
    });

    add_action('after_setup_theme', function () {
    	add_theme_support('editor-styles');
    	add_editor_style('css/editor-style.css');
    });

    管理画面側のエディターとフロントそれぞれのCSSが別々だと、両方に同じスタイルを記述しないといけないのが面倒なため、管理画面とフロントどちらにも同じcssを適用したいと考えています。

    p, h2, h3, h4, h5, h6 {
    	line-height: 1.8em;
    }

    しかし管理画面側では上記のように、上位の要素なしでpタグやh2タグなどに対して直接スタイルを指定しないと、エディターに反映されませんでした。
    このままだと、フロントで同じCSSを使うと、記事本文の以外にもスタイルが適用されてしまいます。

    .editor-styles-wrapper {
    	p, h2, h3, h4, h5, h6 {
    		line-height: 1.8em;
    	}
    }

    ブロックエディターを使用している場合、管理画面上のエディターは.editor-styles-wrapperというclassで囲われていたので、class名を入れてスタイルを指定してみましたが、なぜか反映されません。

    フロントの記事本文以外に影響を与えることなく、管理画面とフロントどちらにもeditor-style.cssを適用する方法はないのでしょうか？

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター けい (Kei Nomura)

    (@mypacecreator)

    5ヶ月、 2週前

    @muromuro さん、こんにちは。

    add_editor_style で読み込むエディターのHTML構造はフロントとは異なるので、たしかにCSSの中身をそのまま使うのは難しいですね。

    私の場合の対応例ですが、Sass（.scss）を使って、editor.scss / style.scss に、フロントとエディターの両方に適用されてほしいコンポーネント等を読み込む記述を入れています。
    それで、1箇所書き換えればフロント用のCSSとエディター用のCSSの両方のファイルに変更が反映されるようにしています。

    あとは、たとえば

    .editor-styles-wrapper,
    .c-postContent /* フロント側の親要素名 */ {
    	h2 {
    		/* ここに適用したいスタイル */

    みたいな感じにするなどで対応しています。

    なお、 サポートサイトの下記ページにこのような説明があります。

    たとえばエディタースタイル内の body { ... } は .editor-styles-wrapper { ... } に書き換えられます。ちなみにこのことはエディターのクラス名を直接 指定すべきでない ことも意味しています。

    テーマサポート – Japanese Team – WordPress.org 日本語

    ですので、同じファイルをそのまま直接両方で読み込むのはちょっと扱いが難しいのかなという印象です。

    ※このあたりのベストプラクティスは確立されていないような気がするので（私が知らないだけかもしれませんが）、他にも私はこうしてます、というような情報あれば歓迎します！

    トピック投稿者 muro

    (@muromuro)

    5ヶ月、 2週前

    回答ありがとうございます。

    たしかにSassならいけそうですが、他の人も触ることがあるサイトであり、Sassをcssに変換する環境をそれぞれの担当者に導入させるわけにもいかないので、普通のcssしか使えないという事情があります。
    .editor-styles-wrapperというクラスを指定しても、やはり管理画面側のエディターになぜか反映されないので、やはり面倒ですが管理画面とフロントでそれぞれCSSを分けて、編集のたびにコピーペーストするやり方で行くしかなさそうです。すみません…。

2件の返信を表示中 - 1 - 2件目 (全2件中)

このトピックに返信するにはログインが必要です。