bodyタグに追加したクラスを、エディター内のbodyタグにも追加したい

0
いいねをした人: 居ません
  • このトピックには7件の返信、3人の参加者があり、最後にSNM-FUNにより2年、 2ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #108119
    SNM-FUN
    閲覧者
    20

    【お使いの Snow Monkey のバージョン】16.5.4
    【お使いの Snow Monkey Blocks のバージョン】15.0.6
    【お使いの Snow Monkey Editor のバージョン】 7.0.1
    【お使いのブラウザ】Chrome

    【当該サイトのURL】
    ローカル環境

    ### 実現したいこと
    ページごとに独自のCSSを当てるため、my-snow-monkey.php内にて、フィルターフックbody_classを利用して、bodyタグにslug-{スラッグ名}といったクラスを追加しているのですが、Gutenbergエディター内のbodyタグにはこの方法ではslug-{スラッグ名}クラスが追加されないため、結果的にslug-{スラッグ名}クラス経由で追加したスタイルは、エディター内には反映されません。そこでslug-{スラッグ名}クラスをエディター内にも追加し、エディターにもスタイルを反映させたいと考えております。

    ### 試したこと
    ネットにて情報収集を行ったものの、調べ方が悪いせいか上記設定について言及している記事を見つけられませんでした。お手数お掛けし恐れ入りますが、ご教示いただけますと幸いです。何卒宜しくお願い申し上げます。

    0
    いいねをした人: 居ません
    #108133
    Olein_jp
    参加者
    561

    実際に試していませんが、 admin_body_class などのフックで良しなにすると実現できそうな気がします。よかったらお試しください。

    1
    いいねをした人:
    #108224
    SNM-FUN
    閲覧者
    20

    Olein_jp様

    ご返信いただき誠にありがとうございます。
    ご教示いただきましたadmin_body_classフックを利用することでエディター内のbodyタグにもページごとで固有のslug-{スラッグ名}クラスを追加することができました。
    ただし、追加はできたもののslug-{スラッグ名}クラスを経由して指定したスタイルはやはりエディターには反映されておりませんでした。よく考えてみると、現状CSSファイル内でslug-{スラッグ名}クラスを経由してスタイルを設定する際、以下のようにセレクタを組んでいるのですが、

    body.slug-{スラッグ}{
    ...
    }
    

    エディター側では、editor-styles-wrapperクラスが自動的に挿入されますので、上記のセレクタは以下のように自動的に置換されるかと思います。

    .editor-styles-wrapper.slug-{スラッグ}{
    ...
    }
    

    ただし、slug-{スラッグ名}クラスはbodyタグのクラスであるため、.editor-styles-wrapper.slug-{スラッグ}というセレクタは存在せず、結果的にslug-{スラッグ名}クラスを経由して指定したスタイルはエディタには反映されていないのかと思います。

    そのため解決策として、エディター側ではbodyタグにslug-{スラッグ名}クラスを追加するのではなく、editor-styles-wrapperクラスを持つdivタグにslug-{スラッグ名}クラスを追加することで、上記のセレクタの置換が行われたとしても、エディタ側にフロントと同じスタイルが反映されるようにしようかと考えておりますが、調べたところなかなかこの手の情報がヒットせず、未だ解決に至っておりません。

    どなたか「editor-styles-wrapperクラスを持つdivタグに任意のクラス(slug-{スラッグ名}クラスetc)を追加する方法」をご存知の方はいらっしゃいますでしょうか?

    お手数お掛けし大変恐れ入りますが、ご教示いただけますと幸いです。
    何卒宜しくお願い申し上げます。

    0
    いいねをした人: 居ません
    #108225
    SNM-FUN
    閲覧者
    20

    申し訳ございません。
    上記と同じコメントを誤って再び送信してしまいましたので、2度目に送信したコメントの文章を削除し、本コメントを送信致しております。

    0
    いいねをした人: 居ません
    #108238
    アバター画像キタジマ タカシ
    参加者
    2371

    .editor-styles-wrapper にクラスを追加するオフィシャルな方法は無いと思います。

    body.slug-{スラッグ} ではなく .slug-{スラッグ} にしたら良いのではと思ったのですがどうですかね?

    どうしても body.slug-{スラッグ} にする必要があるのであれば、追加 CSS や add_editor_style() ではなくて、enqueue_block_editor_assets で wp_enqueue_style() すればクラスの置換が行われずに読み込めますよ。

    0
    いいねをした人: 居ません
    #108244
    SNM-FUN
    閲覧者
    20

    キタジマ タカシ様

    ご教示いただき誠にありがとうございます。

    .editor-styles-wrapper にクラスを追加するオフィシャルな方法は無いと思います。

    そうなのですね。承知致しました。

    body.slug-{スラッグ} ではなく .slug-{スラッグ} にしたら良いのではと思ったのですがどうですかね?

    そうですね。bodyを必ずしも入れなければいけないというわけではないのですが、セレクタを.slug-{スラッグ}のみにした場合、以下のように置換がなされます。

    .editor-styles-wrapper .slug-{スラッグ}{
    ...
    }

    ただし、.slug-{スラッグ}は現状bodyタグのクラスであり、エディター内のHTML構造上.editor-styles-wrapperはbodyタグの内側に含有されておりますので、.editor-styles-wrapper .slug-{スラッグ}というセレクタは存在せず、やはりこれでも結果的にエディターにフロントのスタイルは反映されません。

    どうしても body.slug-{スラッグ} にする必要があるのであれば、追加 CSS や add_editor_style()ではなくて、enqueue_block_editor_assets で wp_enqueue_style()すればクラスの置換が行われずに読み込めますよ。

    ありがとうございます。確かにご教示いただいたこの方法でクラスの置換が行われなくなるため、.editor-styles-wrapperセレクタを意識せずにCSSを記述しても、フロント側同様のスタイルをそのままエディターに反映させられるようになるのですが、.editor-styles-wrapperの自動置換が無くなることで、今度は管理画面上のブロックエディター外の部分にもスタイルが反映されるようになるため、この方法を少し躊躇っていました。
    その上で、やはり現状「ページごとに個別のCSSをフロントとエディタ側両方に同様に反映させる」ためにはご教示いただいた上記の方法しかなさそうでしょうか?

    0
    いいねをした人: 居ません
    #108265
    アバター画像キタジマ タカシ
    参加者
    2371

    そうですね。bodyを必ずしも入れなければいけないというわけではないのですが、セレクタを.slug-{スラッグ}のみにした場合、以下のように置換がなされます。

    あーそうか!確かにそうですね、失礼しました。

    確かにご教示いただいたこの方法でクラスの置換が行われなくなるため、.editor-styles-wrapperセレクタを意識せずにCSSを記述しても、フロント側同様のスタイルをそのままエディターに反映させられるようになるのですが、.editor-styles-wrapperの自動置換が無くなることで、今度は管理画面上のブロックエディター外の部分にもスタイルが反映されるようになるため、この方法を少し躊躇っていました。

    もしかしたらもっと上手い方法があるかもですが、僕は add_editor_style()enqueue_block_editor_assets で読み込む用の CSS をそれぞれ用意しておいて、適用させたい箇所によって書き分けていますねー。

    1
    いいねをした人:
    #108312
    SNM-FUN
    閲覧者
    20

    キタジマ タカシ様

    ご返信いただき誠にありがとうございます。
    現状、管理運用の手間を減らすためエディタ用とフロント用とを分けずにセレクタを指定しており、かつ最終的に読み込むCSSファイルは1つまとめております。その上でいただきましたご意見を踏まえ、さらに検討した結果、add_editor_style()enqueue_block_editor_assetsフックの両方で同じ1つのCSSファイルを読み込むことにいたしました。
    これによって、CSSファイル側では.editor-styles-wrapperクラスが挿入されることなど特段何も考えずにセレクタ指定をしても、フロント・エディタ側両方で同様のスタイルが反映されるようになりました。
    2度同じファイルを読み込むという悪影響もございますが、この方法ではフロントへの表示には大きな影響がなく、影響はエディタ画面が表示されるときだけなので、CSS作成時の手間の軽減とそれによって生じる悪影響・デメリットとを天秤にかけ、手間軽減のメリットの方が大きいと考え一旦この方法を採用しました。
    備忘録として残しておきます。

    お力添えいただき誠にありがとうございました。大変助かりました。
    重ねてお礼申し上げます。
    トピック閉じておきます。

    1
    いいねをした人:
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「bodyタグに追加したクラスを、エディター内のbodyタグにも追加したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。