Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

コメントの文字色が変更できなくなってし...
 
共有:
通知
すべてクリア

コメントの文字色が変更できなくなってしまった。

26 投稿
4 ユーザー
10 Likes
266 表示
maroo
(@maroo)
Active Member Registered
結合: 3か月前
投稿: 11
Topic starter  

相談内容:
他ユーザーからのコメントの文字色を変更できなくなってしまいました。

つい先日までは以下のコードを入力して編集できたのですが、本日から反映されなくなってしまいました。

「<font color="darkgray">〇〇〇</font>」

おそらくWordPress:6.0.3のアプデ後?に当不具合が発生したと思われます。

ですが、自身がログインした状態でコメントしたものはグレーで反映されたのでキャッシュ系のプラグイン等は関係ないのではないかと思っています。(他ユーザーによるコメントのみ文字色が変わらない状況)

今まで起きた現象で地味に一番困っていまして、どうにか直す方法はございませんでしょうか・・・?

 

 

不具合の発生手順:

①「メニュー」→「コメント」より、他ユーザーからのコメントを編集する際、

<font color="darkgray">〇〇〇</font>

と入力し、更新ボタンを押しても反映されず、再度編集ボタンをクリックすると文字色は黒のままコードが消え「〇〇〇」の部分だけ残ってしまう。

 

解決のために試したこと:

・キャッシュ系プラグインの停止

・他サイトでも同じことを実行。(同じ現象が起こりました)

・cocoonでのキャッシュ削除

・Chromeでのキャッシュ削除

 

 

 

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

テーマ名:Cocoon
バージョン:2.5.0
カテゴリ数:5
タグ数:1987
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:2420バイト
functions.phpサイズ:278バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:1
Retina:1
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.6.1
Ad Invalid Click Protector 1.2.7
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
All in One SEO 4.2.6.1
Autoptimize 3.1.2
BackWPup 3.10.0
Broken Link Checker 1.11.18
Cache Clear for お名前.com 1.0.0
Category Order and Taxonomy Terms Order 1.7.1
Check & Log Email 1.0.6
Code Snippets 3.2.1
Comment Report Button 1.0.1
Comments Like Dislike 1.1.7
Contact Form 7 5.6.3
Easy Table of Contents 2.0.34
EWWW Image Optimizer 6.9.1
FooGallery 2.2.16
Google XML Sitemaps 4.1.5
Really Simple SSL 5.3.5
Regenerate Thumbnails 3.1.5
Search Regex 3.0.6
Shortcodes Ultimate 5.12.2
Simple Custom CSS 4.0.6
SiteGuard WP Plugin 1.7.2
Site Kit by Google 1.85.0
Smart Slider 3 3.5.1.11
WebP Express 0.25.5
Word Balloon 4.19.1
WordPress Popular Posts 6.0.5
WP-Optimize - Clean, Compress, Cache 3.2.9
WP Downgrade | Specific Core Version 1.2.5
WP Multibyte Patch 2.9
----------------------------------------------

 

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

This topic was modified 3か月前 3回 by maroo

   
引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4666
 

WordPressの仕様が変わったようです。

WordPress公式テーマ(今回は「Twenty Twenty-One」にて確認)でも、同様のことが起きます。

WordPress 6.0.2では、入力できたタグ(spanタグにstyle属性でcolorを指定した)も、WordPress 6.0.3ではspanタグ毎、除去されてしまいます。

試しにiタグにstyle属性でcolorをつけてみましたが、iタグは残るのですが、style属性は除去されてしまいました。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4666
 

WordPress 6.0.3のアップデード情報がありますが・・・。

https://wordpress.org/support/wordpress-version/version-6-0-3/

以下の部分?

Stored XSS in WordPress Core via Comment Editing – Third-party security audit and Alex Concha from the WordPress security team

コメント編集を介して WordPress コアに XSS を保存 – サードパーティのセキュリティ監査と WordPress セキュリティ チームの Alex Concha

 

以下の部分が影響しているようです。

WordPressの変更履歴
https://core.trac.wordpress.org/changeset/54537/branches/6.0/src/wp-includes/comment.php

ここまでしか言えないです。


   
maroo and わいひら reacted
返信引用
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1207
 

● 原因

意図した動作なのかは分かりませんが、WordPress 6.0.3 からの仕様みたいです。

参考:Comments: Apply kses when editing comments.

コメントを投稿した者が unfiltered_html 権限を持っていないと、そのコメントの編集時にも許可された HTML タグ以外は使えないようになっています。

6.0.3 の説明に  XSS in WordPress Core via Comment Editing とあるので、この対策だと思います。

コメントの編集時に許可されている HTML は、以下で確認できます。

https://github.com/WordPress/WordPress/blob/master/wp-includes/kses.php#L384-L412

尚、<font> は WordPress とは関係なく随分前から非推奨になっていますので、使ってはいけません。

参考:<font> - HTML: HyperText Markup Language | MDN

● 質問

<font> は、具体的にどのようなケースでお使いなのでしょうか?

場合によっては、CSS で対応できると思います。


   
わいひら reacted
返信引用
maroo
(@maroo)
Active Member Registered
結合: 3か月前
投稿: 11
Topic starter  

@mk2_mk2 返信ありがとうございます!やはりそうだったんですね、、、となると現状手段は無いといった感じなのでしょうか・・・。


   
返信引用
maroo
(@maroo)
Active Member Registered
結合: 3か月前
投稿: 11
Topic starter  

@akira 返信ありがとうございます!

<font>を使う際は、コメントの文字色を変える時にしか使用しておりません。

「<font color="darkgray">コメント</font>」

ただこれだけを直接入力して反映させておりました。

 

 

” 場合によっては、CSS で対応できると思います。”

>>CSSを使ってみるやり方ですが、いくつか調べながらやってみた結果、自分ではどうともできませんでした・・・。(HTMLを記入した時点で『更新』→『消えてしまう』現象が発生)

 

別の指定等でCSSを使って対応できるのでしたら、是非ご教授お願い致します!!!


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

$allowedtagsはグローバル変数なので介入はできそうですね。
https://github.com/WordPress/WordPress/blob/97ba08426dd1ca896596646e708b2d17387ed287/wp-includes/kses.php#L50


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

グローバル変数で$allowedtagsを出力してみると変数を取得できました。
以下のような配列にfont属性を追加することでもしかしたら対応できるのかもしれません。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 

試しにやってみたのですが、子テーマのfunctions.phpに以下のように書くとfont属性を追加できました。

add_action('init', function () {
  global $allowedtags;
  $allowedtags['font'] = array(
    'color' => true,
    'size'  => true,
    'face'  => true,
    'font-weight'  => true,
  );
});

   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 
<font color="red">赤い文字</font>

上記のコードをコメントに書いて試してみましたが文字色を変更できました。
ただし、この方法はWordPress標準の仕様ではなくなるので、使用する場合は自己責任でお願い致します。


   
返信引用
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1207
 

admin_init であれば、管理画面内に限定できますね。

add_action( 'admin_init', function() {
  global $allowedtags;
  $allowedtags['span'] = [
    'style' => true
  ];
});

他ユーザーも文字色を変更できるのがいい場合は init を、他ユーザーは文字色を変更できないのがいい場合は admin_init を使うのがいいかもしれません。ただ、どちらにしろ自己責任になります。

<font>を使う際は、コメントの文字色を変える時にしか使用しておりません。

コメントの文字色を変える時とは、どのような時でしょうか?

他ユーザーのコメントは、全て文字色を変えるのでしょうか?それとも、何かしらの条件がある場合に文字色を変えるのでしょうか?

This post was modified 3か月前 by Akira

   
わいひら reacted
返信引用
maroo
(@maroo)
Active Member Registered
結合: 3か月前
投稿: 11
Topic starter  

@akira 詳細等ご教授頂きありがとうございます!

使用する際、他ユーザーからのコメントを一定の条件下で文字色を変更しております。

その場合はakiraさんのおっしゃる通りadmin_initを使用するのが適切、という事で合ってますでしょうか?


   
返信引用
maroo
(@maroo)
Active Member Registered
結合: 3か月前
投稿: 11
Topic starter  

@yhira いつも大変お世話になっております。

返信いただきありがとうございます!とても参考になります・・・。

 

少しお聞きしたいのですが、

教えていただいたコードは「functions.php」の一番下に追加して問題ありませんか?

また、『WordPress標準の仕様ではなくなるので、使用する場合は自己責任』というのは
今後サイト全体の表記などがくずれる恐れがあるといった認識で合っていますでしょうか?

 

add_action('init', function () {
  global $allowedtags;
  $allowedtags['font'] = array(
    'color' => true,
    'size'  => true,
    'face'  => true,
    'font-weight'  => true,
  );
});

   
返信引用
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1207
 

@maroo さん

一定の条件下で文字色を変更しております。

一定の条件下とは、どんな条件でしょうか?具体的な例をあげていただけると助かります。その条件によっては、PHP カスタマイズは必要ないかもしれません。

もし、PHP カスタマイズをされる場合は、わいひらさんのコードや以下の例をご参考ください。

add_action( 'admin_init', function() {
  if ( current_user_can( 'unfiltered_html' ) ) {
    global $allowedtags;
    $allowedtags['span'] = [
      'style' => true
    ];
  }
});

※ HTML タグを使える権限を持った者のみが、管理画面で <span style=""></span> を使えるようにするものです。

そして、<span> で文字色を変更します。

<span style="color: darkgray;">コメント</span>

セキュリティに関係する内容のため、どのように変更するかは maroo さんがご判断ください。私には責任が取れないため、どの方法が適切かは言えません。


   
わいひら reacted
返信引用
maroo
(@maroo)
Active Member Registered
結合: 3か月前
投稿: 11
Topic starter  

書き直しました

This post was modified 3か月前 by maroo

   
返信引用
maroo
(@maroo)
Active Member Registered
結合: 3か月前
投稿: 11
Topic starter  

@akira 

スパム等のコメントが投稿された際にテキストを定型文に変更し、文字色をグレーにする。

といったものです!


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 
投稿者:: @maroo

教えていただいたコードは「functions.php」の一番下に追加して問題ありませんか?

全く同じコードを貼る限り問題ないかと思います。

投稿者:: @maroo

また、『WordPress標準の仕様ではなくなるので、使用する場合は自己責任』というのは
今後サイト全体の表記などがくずれる恐れがあるといった認識で合っていますでしょうか?

WordPressで廃止された機能なので今後セキュリティ的な問題が出てくる可能性はゼロとは言えないかもしれないということです。
「fontタグ セキュリティ問題」で検索してみても、それっぽいものは出てこなかったので大丈夫なのかもしれませんが、保証はできません。

fontタグは、もともとHTMLでデザインしない(デザインはCSSに任せる)ということで廃止になったと思うので、セキュリティ的な問題はなさそうに見えるけど、こればっかりは僕もわかりません。
https://delaymania.com/201209/web/blog_html_font/


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 
投稿者:: @maroo

その場合はakiraさんのおっしゃる通りadmin_initを使用するのが適切、という事で合ってますでしょうか?

どちらも試してみれば良いと思います。
ダメなら削除して元に戻せば良いだけですし。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14315
 
投稿者:: @maroo

スパム等のコメントが投稿された際にテキストを定型文に変更し、文字色をグレーにする。

だとしたらどこかでPHPコードでコメント内容を置換していると思うんですけど、この実装方法次第ではそちら側でも対応できるような気がします。

というか、これはもしかしたら管理者が手動で行なっているのでしょうか?
だとしたらこの作業をどこで行なっているかにもよるかもしれません。
管理画面のコメント編集で管理者が行なっているのであれば、Akiraさんの方法で行けるかも。
訪問者が公開ページ上のコメント欄で書き込むということであれば、admin_initだとだめなのかも。
いずれにせよ、詳細が分からないので、やってみないと分からないかもしれません。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4666
 

marooさん

スパムコメント等の書き込みがあった場合。

管理者が、
該当コメントを削除するのではなく、
コメント文全体を「コメントは削除されました。」に、手作業で置換している。
(削除したことを明記している)

そして、「コメントは削除されました。」に色をつけている。

そんな感じの運用でしょうか。

jQueryでよければ、以下のように書くことでもできるとは思います。

$(function() {
  $(".comment-content:contains('コメントは削除されました。')").css("color", "darkgray");
});

子テーマのJavascript.jsに追記してください。


   
わいひら reacted
返信引用
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1207
 

@maroo さん

スパム等のコメントが投稿された際にテキストを定型文に変更し、文字色をグレーにする。

スパムコメントであれば、そのコメントの削除ではダメなのでしょうか。残しておく必要は、私はないように思えます。

また、reCAPTCHA などでスパムコメントを阻止するのではダメなのでしょうか。そもそも、スパムコメントを阻止できていないことが問題のように思えます。スパム等とのことですので、もしかしたらスパムコメント以外も定型文に変更していらっしゃるのかもしれませんが。


   
わいひら reacted
返信引用
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1207
 

これまで通りスパムコメントを定型文に変更される場合は、<i> タグ を使ってもいいかもしれません。

<i>コメントは削除されました。</i>

そして、子テーマの style.css に以下の CSS を追加します。

.comment-content i:where(:not([class])) {
  color: darkgray;
  font-style: normal;
}

<i> タグの使用が最適なのかと少し疑問に感じます。ただ、PHP で変更せずとも WordPress デフォルトで使えます。


   
わいひら reacted
返信引用
maroo
(@maroo)
Active Member Registered
結合: 3か月前
投稿: 11
Topic starter  

@yhira おそくなってしまい申し訳ありません。

最初に教えていただいたものを試してみたら成功致しました。

HTML等は以下の通りです

 

現状不具合等は確認できておりません。

ご教授いただきありがとうございます!

 

<font color="red">赤い文字</font>

 

add_action('init', function () {
  global $allowedtags;
  $allowedtags['font'] = array(
    'color' => true,
    'size'  => true,
    'face'  => true,
    'font-weight'  => true,
  );
});

   
わいひら reacted
返信引用
maroo
(@maroo)
Active Member Registered
結合: 3か月前
投稿: 11
Topic starter  

@mk2_mk2 遅くなってしまい申し訳ありません。

 

「削除したことを明記している」

その通りの運用をしています。

 

教えていただいたjQueryをJavascript.jsに記載し、使用してみたのですがうまくいきませんでした。

せっかく教えていただいたのにかかわらず、いい結果を報告できず申し訳ございません。

 

$(function() {
  $(".comment-content:contains('コメントは削除されました。')").css("color", "darkgray");
});

   
返信引用
maroo
(@maroo)
Active Member Registered
結合: 3か月前
投稿: 11
Topic starter  

@akira コメントを削除してしまった場合、そのコメントに対してコメントをしていただいたものが1段上にいってしまい、表示がおかしくなってしまう為このような手段を取っている次第でございます。

スパムの設定やreCAPTCHAなど導入もしているのですが、様々なやり方で荒らし等のコメントをされてしまう事がある為、手作業で定型文ブロックをして対応しつつ、基本目を光らせておくような状況です。

 

ご教授頂いた「<i>タグ」を使用して、以下のコードを「style.css」に追加し、実際に試してみたのですが、私の環境では色が変わらずうまくいきませんでした・・・。

 

せっかく教えていただいたのにもかかわらず、いい結果を報告できず申し訳ありません。

 

.comment-content i:where(:not([class])) {
  color: darkgray;
  font-style: normal;
}

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4666
 

marooさん

私の環境では上手くいきますよ。

子テーマが有効な状態(jQueryのカスタマイズ有)

 
 
親テーマが有効な状態
(つまり子テーマのカスタマイズが無効な状態)
 
 
 
Akiraさんご提示のものが上手くいかないことも、同じ原因かもしれないです。
(デベロッパーツールで、状態をご確認いただくしかないと思います)

   
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました