grayishスキン適用中

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カスタマイズ依頼

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

以前のCocoonのコメント表示の設定...
 
共有:
通知
すべてクリア

[解決済] 以前のCocoonのコメント表示の設定でinvisible reCaptchaのバッジの表示が切れる

15 投稿
3 ユーザー
12 Likes
1,599 表示
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1947
Topic starter  

●経緯
以前、以下の投稿があり。

https://wp-cocoon.com/community/postid/67684/

同じ状況のブログを見付け。
私はInvisible reCaptchaを使っておらず、ヒアリングしただけなので、情報が足りないかと思います。
その点は申し訳なく。
ただ、情報共有として投稿させて頂きます。

●現象
Invisible reCaptchaを使用。

[Cocoon設定]→[コメント]→コメント入力欄表示「ボタンで切り替え」

この時、reCapthaのバッジが半分で切れる。「常に表示」だと正しく表示される。
Contact Form 7のページは問題なく表示されている。

●差異
前回、気付かなかったのですが、reCaptchaのclassに差異がありました。
classのrc-anchor-invisible-textに、smalltextが付くか否か。
付く場合、バッジマークが途切れず。

 
●気になった点
コメント欄を非表示にする際、以下となっている。

#respond {
  display: none;
}
この時、フレーム内のreCaptchaに関連するHTMLタグが無い。
これが災いするの?visibility:hiddenだと問題ないのでは?
 
 

   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1644
 

以前に書いたように 3 択だと思います。

  • コメント入力欄を「常に表示」にする。※「ボタンで表示切り替え」でバッジの右端が切れるのは、コメント入力欄が display: none で非表示になっているため。非表示のところに <iframe> を追加するのは無理があります。
  • 「バッジ位置」を「右下」にする。※「左下」もインラインのバッジのため不可。
  • バッジを非表示にし、代わりとなるテキストを表示する。

visibility: hidden では、「コメントを書き込む」の下に余白が生まれてしまいます。


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1947
Topic starter  

●根本原因

  • visibility:hidden
    要素はあるが見えない状態。
  • display:none
    要素も取得されず、完全にその場に無い。

結果、smalltextの付加されず、マークが途切れる結果となる。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1947
Topic starter  

少し案を考えてみました、汚いですが。

●対策案

display:noneを止める。
高さをゼロにし、はみ出た部分を消す。

https://github.com/xserver-inc/cocoon/blob/92035a7cafaeb8d1a52dc13e5d0f2951b5533887/tmp/css-custom.php#L561-L563

#respond {
height:0;
overflow:clip;
}

クリックした時、高さを100%に変更する。

https://github.com/xserver-inc/cocoon/blob/92035a7cafaeb8d1a52dc13e5d0f2951b5533887/javascript.js#L132

$('#respond').css('height','100%');

 

 

 

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16125
 

投稿者:: @chu-ya

●対策案

display:noneを止める。
高さをゼロにし、はみ出た部分を消す。

こちらの方法で上手くいきましたか?
僕の環境ではやっぱり途切れちゃって。

 


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1947
Topic starter  

私の環境では2.5.7.12を修正し確認しました、問題なく表示されました。

[投稿]→コメント入力欄表示「ボタンで表示切り替え

●修正箇所

上記の通り以下の2ファイルを修正。

  • css-custom.php
  • javascript.js

Invisible reCaptchaのバッジのカスタムCSSで付くはずのclass=smalltextを入力したが反映されません...

.rc-anchor-invisible-text {
  font-size: 12px;
  padding: 0 10px;
  line-height: 16px;
  white-space: normal;
}

   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1947
Topic starter  

投稿者:: @chu-ya

Invisible reCaptchaのバッジのカスタムCSS

単にテーマにCSSが追加されるだけで、iframe内に反映させるものではなく...苦笑


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1644
 

幅の問題はなくなりますが、高さの問題を解決できません。

試したことは、以下のとおりです。

子テーマの style.css に CSS を書きました。

#respond {
  display: block;
  height: 0;
  overflow: clip;
  visibility: hidden;
}

※ visibility: hidden は必要です。height: 0 だけではフォーカスが当たります。

親テーマの javascript.js を変更しました。

$('#comment-reply-btn, .comment-reply-link').click(function () {
    $('#comment-reply-btn').slideUp();
    const respond = document.getElementById('respond');
    respond.style.height = '100%';
    respond.style.visibility = 'visible';
    $('#respond').slideDown();
  });

 その結果、reCAPTCHA ロゴの下が切れています。これは visibility: hidden を指定しなかった時も同様です。

Invisible reCaptchaのバッジのカスタムCSSで付くはずのclass=smalltextを入力したが反映されません...

iframe の中は変更できません。

This post was modified 12か月前 by Akira

   
わいひら and chu-ya reacted
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1644
 

もし、何かしら変更するのなら、position: absolute を使えば上手くいくと思います。

例えば、子テーマの style.css に CSS を書きます。

#respond {
  display: block;
  inset: 0 auto auto 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

親テーマの javascript.js を変更します。

  $('#comment-reply-btn, .comment-reply-link').click(function () {
    $('#comment-reply-btn').slideUp();
    const respond = document.getElementById('respond');
    const styles = { pointerEvents: 'auto', position: 'relative', visibility: 'visible' };
    Object.entries(styles).forEach(([key, value]) => {
      respond.style[key] = value;
    });
    $('#respond').slideDown();
  });

ここまでする必要はあるのか?との疑問は感じます。

This post was modified 12か月前 by Akira

   
わいひら and chu-ya reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1947
Topic starter  

投稿者:: @akira

position: absolute


ありがとうございます。
これも考えましたが、そこまでは不要かと思い。
高さは、マークが途切れるよりは、良いかと思います。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1947
Topic starter  
overflow: clip;

影が見切れるの解除漏れですね。
根本の問題と対応案が提示され、前回より進展し良かったです。
ありがとうございます。

>わいひらさん
対応の判断をお願いします。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16125
 

これChromeでないとダメなんですね。
Firefoxだと言われている状態になりませんでした。どうりで話が噛み合いませんでした。
Akiraさんの方法で修正しておきました。
https://github.com/xserver-inc/cocoon/commit/10a70b84b44c85c127dc65d263bbb4c044d38f9c


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 1947
Topic starter  

ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
----------------------------------------------
テーマ名:Cocoon
バージョン:2.5.7.16
カテゴリー数:19
タグ数:147
ユーザー数:1
----------------------------------------------
表示される事を確認しました。
本件はクローズとします。

なぜ、本現象が発生するのか?根本の問題が何か?
発生のアルゴリズムを捉え、対策可能か否か見極め、皆でアイデアを出し合い、解決に至り、良かったです。
ご苦労様でした。


   
わいひら reacted
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1644
 

いい加減に書いていたので、以下の部分を修正です。

  • visibility: hidden のため pointer-events: none は不要
  • position は relative ではなく static に戻すのが無難のはず
  • 初期の inset は auto でなければいいため 0 にすれば CSS が少なくて済む
  • inset は auto に戻すのが無難のはず

tmp/css-custom.php をこうして…

#respond {
  inset: 0;
  position: absolute;
  visibility: hidden;
}

javascript.js をこうするのがいいかもしれません。

$('#comment-reply-btn, .comment-reply-link').click(function () {
  $('#comment-reply-btn').slideUp();
  const respond = document.getElementById('respond');
  const styles = { inset: 'auto', position: 'static', visibility: 'visible' };
  Object.entries(styles).forEach(([key, value]) => {
    respond.style[key] = value;
  });
  $('#respond').slideDown();
});

 また、「コメントを書き込む」と「返信」をクリックしての動作確認しかしていません。Cocoon 設定項目やスキンなどは一切確認していません。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16125
 

ご確認いただきありがとうございます。
親テーマの方も修正し動作確認しました。
おそらくCocoon設定やスキンで影響の出ない部分とは認識しているのですが、問題が報告された場合は一旦元に戻すか追加修正させていただくかもしれません。


   
共有:

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

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

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

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

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

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

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

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