テーマカスタマイザーで保存した内容をeditor_styleに反映させたい

解決済 katz01
(@katz01)

7年、 7ヶ月前

いつもお世話になっております。
現在、テーマカスタマイザーで色や見出しのスタイルを変更し、それを投稿画面で確認できるように奮闘中なのですが、上手く行きません。
head領域にCSSを吐き出すだけでは反映されないことがわかり、editor_style.cssを上書きもしくは追記するしかないと思っております。
ただ、全くやり方がわからず調べても情報がないため、有識者の方のお力を貸して頂けると幸いです。

何卒宜しくお願いいたします。

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

천궁 메텔
(@digitmaetel)

7年、 7ヶ月前

サイトに施したスタイルを確認しながら、投稿を作成したい。と解釈してよいですか。
Colorful-life.
(@colorfullifeinfo)

7年、 7ヶ月前
こんにちは。
editor_style.cssを云々する方法ではありませんが、
tiny_mce_before_initフィルターでビジュアルエディタにスタイルを追加出来ます。

https://developer.wordpress.org/reference/functions/add_editor_style/#comment-1739
こちらの@majickさんのコメントが参考になるかと。
- この返信は7年、 7ヶ月前にColorful-life.が編集しました。
トピック投稿者 katz01
(@katz01)

7年、 7ヶ月前

熊本地震無料Wi-Fi流浪民様

お返事ありがとうございます。
テーマカスタマイザーにて編集し、保存したCSSデザインを投稿画面でも反映させたい、ということです。

Colorful-life.　様

お返事ありがとうございます。
なるほど、そのようなフックがあったのですね。
参考リンクも拝見いたしました。

同じようにコードを記載したのですが、投稿画面の.mceContentBody内のテキストエリアが全て見えなくなるという現象が起こってしまいます。

色々調べてみましたが、解決策もわからず悩んでおります。
教えて君状態で恐縮ですが、知恵をお貸しいただけますと幸いです。

Colorful-life.
(@colorfullifeinfo)

7年、 7ヶ月前

こんにちは。

@katz01さんがどの様に反映されたのか分かりませんので推測になりますが、2点ほど。

1点は、
参考として提示したリンク先のコードですが、一部誤りがあります。
wpdocs_theme_editor_dynamic_styles の引数を $mceInit としていますが、returnでは $mceinit になってしまっている。

2点目は、
[‘content_style’] に入れる文字列の中のダブルコーテーションは\エスケープする必要があり、また改行は抹消、もしくはエスケープする必要があると思います。

천궁 메텔
(@digitmaetel)

7年、 7ヶ月前

editor-style.css に style.css をインポートする。

あるいは、
将来のバージョンで仕様と成る、フロントエンドでの「投稿、編集」に慣れる機会にもいいかと思います。

nobita
(@nobita)

7年、 7ヶ月前

こんにちは、

私のテーマで使っているので、良ければ参考にしてみてください

hooks.php line:40
hooks.php line:283,284
raindrops_editor_styles_callback() line:9393

https://wordpress.org/themes/raindrops/

トピック投稿者 katz01
(@katz01)

7年、 7ヶ月前

皆様、ご返答ありがとうございます。

Colorful-life.様のご指摘いただいた内容にて無事、解決いたしました！
大変感謝しております。

まだまだWordPressを学び始めたばかりで、わからないことが多々ありますが日々成長していきたいと思います。
これにて、このトピックは解決済みといたします。

ご協力ありがとうございました！