bbPressの返信部ビジュアル<Body>へChildからStyle適用方法

前提・実現したいこと

bPressプラグインのフォーラム返信を行うビジュアル入力画面<BODY>部の<P>タグへ
子テーマstyle.cssよりスタイルを当てたい。

321321へ子テーマフォルダにあるstyle.cssからスタイルを当てる。(取り合えず赤文字)

発生している問題・エラーメッセージ

Chromeから見た時、iframe#bbp_reply_content_ifr配下の#document - html - head - bodyに
対してstyle.cssが上手く取得できていない為に<p>へのスタイルが適用できないと思われる。
style.cssへiframe#bbp_reply_content_ifr{display: none !important;}の記述で<BODY>の非表示は出来ている。
取り合えず文字列を赤くするためのコードを当てみたが、
ビジュアル入力画面を除いた<BODY>部しか適用されなかった。
body{color: red !important;}
＃tinymce{color: red !important;}
body#tinymce{color: red !important;}
.mce-content-body.bbp_reply_content.post-type-topic.post-status-publish.page-template-default.locale-ja.mceContentBody.webkit.wp-editor.html5-captions{color: red !important;}

'===========================================
【　追記　】
'===========================================
時間経過しましたが、その後の状況を追記します。
wp-content.cssを直接変更するとStyleは当たりました。
しかし、Updateで戻ると思うので、別の方法を模索しています。

wp-includes\js\tinymce\skins\wordpress\wp-content.css

CSS
1body {
2	font-family: "ＭＳ Ｐゴシック","ＭＳ Ｐ明朝";
3	font-size: 20px;       
4	color: red;            
5    font-style: italic;
6}

(試した事-No1)
/* lightning_childのstyle.cssを当ててみたが入力欄変化なし */
iframe#bbp_reply_content_ifr{
background-color:skyblue !important;
color: blue !important;
}
(試した事-No2)
lightningからlightning_childへpage.php複写して下記追加。
(page.php名称はShow Current Templateプラグインより取得)

<?php if ( have_posts() ) { この手前へJavaScriptを、追加してみましたが変化なし。 ```script <script> jQuery(function ($) { $('#bbp_reply_content_ifr').on('load', function(){ $('#bbp_reply_content_ifr').contents().find('#tinymce').css('color','blue'); }); }); </script> ```

行動規範の内容に同意します

回答2件

ベストアンサー

iframe を使っているので、iframe を呼び出している側(WordPress テーマ側)のCSSでは iframe 内に CSS の適用はできません。

プラグイン側のソースコードを変更せずに対処するには、iframe の内側に対して、jQuery 等で、CSS を設定するしか無いと思います。

稼働している環境がないので、試していませんが...

たとえば、ページの </body> の前あたりで、jQuery を使って下記のような感じで iframe のコンテンツに対して、CSS を指定すると適用されないでしょうか？

<script>
jQuery(function ($) {
  $('#bbp_reply_content_ifr').on('load', function(){
    $('#bbp_reply_content_ifr').contents().find('#tinymce').css('color','red');
  });
});
</script>

投稿2020/05/14 13:05

CHERRY

総合スコア25171

tosi

2020/05/14 17:47

ご回答有難う御座います。大変参考になりました。現在、学習中の身のため、ご指摘頂いた内容にて修正試験が出来る技術に達していません。時間掛かると思いますが、解決しましたらフォロー上げたいと思っております。今後とも宜しくお願い申し上げます。 p.s. 3冊参考書買いました。じっくり読んで進めて行きたいと思います。

tosi

2020/06/23 08:17

出来ました。有難う御座います。

行動規範の内容に同意します

先ほどVBAで回答を頂いたものです。
ありがとうございました。
ベテランではないのと、
こちらのプラグインは使ったことはないのですぐには分かりませんが、
CSSの記述内にPタグ指定の項目はありますか？
もし、なければPタグに指定して効果を反映させられないかと思いました。

style.css内できちんとPタグ指定で限定的に記述されている場合は、
実際に見てみないと何とも言えませんが、
応急処置で、Pタグにクラスを設定してあげればCSSを反映させることはできると思います。

お礼にと思い回答させて頂きましたが、的外れでしたらすみません。

投稿2020/05/14 06:19

name1224

総合スコア8

tosi

2020/05/14 07:55

ご回答有難う御座います。 style.cssへ下記適用しましたが変わりませんでした。 (ビジュアル以外のPタグには適用され赤くなります。) p{color: red !important;} ============================== ----------------------------- 現状の状況を記載致します。 ----------------------------- CSSは下記ファイルより適用されている様です。変更すると変わりました。 (バージョンアップ時に更新されるため直接の修正は不可) /wp-includes/js/tinymce/skins/wordpress/wp-content.css これから追っていきますと、こちらのファイルからCSS来ている様です。 wp-includes/class-wp-editor.php ------------------------------------ private static function default_settings() { global $tinymce_version; ・・・ $settings['content_css'] = includes_url( "css/dashicons$suffix.css?$version" ) . ',' . includes_url( "js/tinymce/skins/wordpress/wp-content.css?$version" ); return $settings; } ------------------------------- こちらは、Wordpressの標準設定と推測します。多分、bbPress側に設定が無いため、標準Styleが勝手に採用されていると思われます。今後は、 1.bbPressのphpテンプレートを探して追加変更して行く。 2.function.phphへ一時的な入れ替えの記述をする。という方向で進もうと考えております。色々とWeb情報の見てますがWordPressに関しては情報自体多いですが、関係ない物が多く時間ばかり取られている感じです。何か、有望な情報等御座いましたら宜しくお願い申し上げます。

name1224

2020/05/14 12:36

＞CSSは下記ファイルより適用されている様です。変更すると変わりました。＞(バージョンアップ時に更新されるため直接の修正は不可) ＞/wp-includes/js/tinymce/skins/wordpress/wp-content.css なるほど、ビジュアル部分のみ別のCSS（標準style）が反映している状態なのですね。反映しているcssを直接修正できないとなると難しいですね。＞1.bbPressのphpテンプレートを探して追加変更して行く。 1の方法で何とかなりそうな気がしますが、具体的な方法を示せずお力になれずにすみません。

行動規範の内容に同意します

あなたの回答