サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023-03-10 23:08
●経緯
以前、以下の投稿があり。
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だと問題ないのでは？
これが災いするの？visibility:hiddenだと問題ないのでは？
わいひら and Yamachan11 reacted
2023-03-11 21:48
以前に書いたように 3 択だと思います。
- コメント入力欄を「常に表示」にする。※「ボタンで表示切り替え」でバッジの右端が切れるのは、コメント入力欄が display: none で非表示になっているため。非表示のところに <iframe> を追加するのは無理があります。
- 「バッジ位置」を「右下」にする。※「左下」もインラインのバッジのため不可。
- バッジを非表示にし、代わりとなるテキストを表示する。
visibility: hidden では、「コメントを書き込む」の下に余白が生まれてしまいます。
わいひら reacted
Topic starter
2023-03-11 22:18
●根本原因
- visibility:hidden
要素はあるが見えない状態。 - display:none
要素も取得されず、完全にその場に無い。
結果、smalltextの付加されず、マークが途切れる結果となる。
Topic starter
2023-03-12 03:39
少し案を考えてみました、汚いですが。
●対策案
display:noneを止める。
高さをゼロにし、はみ出た部分を消す。
#respond {
height:0;
overflow:clip;
}
クリックした時、高さを100%に変更する。
$('#respond').css('height','100%');
わいひら reacted
Topic starter
2023-03-12 13:22
私の環境では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
Topic starter
2023-03-12 14:45
Invisible reCaptchaのバッジのカスタムCSS
単にテーマにCSSが追加されるだけで、iframe内に反映させるものではなく...苦笑
2023-03-12 14:52
幅の問題はなくなりますが、高さの問題を解決できません。
試したことは、以下のとおりです。
子テーマの 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 1年前 by Akira
2023-03-12 15:24
もし、何かしら変更するのなら、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 1年前 by Akira
Topic starter
2023-03-12 15:28
Topic starter
2023-03-12 15:47
overflow: clip;
影が見切れるの解除漏れですね。
根本の問題と対応案が提示され、前回より進展し良かったです。
ありがとうございます。
＞わいひらさん
対応の判断をお願いします。
わいひら reacted
2023-03-13 19:52
これChromeでないとダメなんですね。
Firefoxだと言われている状態になりませんでした。どうりで話が噛み合いませんでした。
Akiraさんの方法で修正しておきました。
https://github.com/xserver-inc/cocoon/commit/10a70b84b44c85c127dc65d263bbb4c044d38f9c
Topic starter
2023-03-13 20:29
ブラウザ：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
2023-03-13 22:33
いい加減に書いていたので、以下の部分を修正です。
- 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
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。