［WordPress］「『reCaptcha by BestWebSoft』プラグインでCocoonのレイアウトが崩れる」を対処

2023年1月23日

この記事の正確なタイトルは「ワードプレスのバージョンアップなどでレイアウトが崩れた時の対処方法」です。

このたび、テーマ「Cocoon」で運営している趣味ブログの1つに子テーマバージョンアップを行ってみたところ、レイアウトが崩れて始末に負えなくなるという事案が発生。親テーマは無事なので子テーマだけcssが死んだ……。(そもそも「子テーマをバージョンアップ=子テーマの内容が消える」のは当然のことですので、やらないようにしましょう！やるな！)

解決してみれば簡単なことだったので、ご報告がてらアップ。

WordPressのレイアウトが崩れるなど不具合が出た時の調べ方と直し方

そもそも子テーマは特にバージョンアップの必要はないのですが、親テーマのバージョンアップと一緒にやってみたとみころ……

コメント欄を表示するとサイドバーがメインの下に行ってしまうという不具合が発生。

コメント欄を非表示にしていれば崩れないんですね、これが。なので解決するまでコメント欄をしばらく非表示にしておりました。

ちなみにCocoonのコメントフォーム表示・非表示の切り替えは「Cocoon設定」→「投稿タブ」の中にあります

この度は特に記述のエラーなどでは無いのでエラーメッセージは出ていません。

レイアウトが崩れている状態を見ます

どう見てもコメントフォームにおかしな四角がくっ付いているように見えます。これを取りたい。

崩れている部分の「要素」を表示

右クリックして「要素」を選択。コメントフォームにくっ付いている四角の部分にカーソルを当てて内容を見ます。

「要素」を検証

問題の部分を見てみると、以下のように書かれています。

そうかなぁという予感はあったのですが、コメントフォームに設置している「google recaptcha」がレイアウト崩れを呼んでいるんですね。今までは問題なく表示されていたのですが、バージョンアップによってプラグインと互換性が無くなった模様。

問題のプラグインを削除

問題を起こしていた「reCaptcha by BestWebSoft」プラグインを削除。(一度「停止」して様子を見た方がいいです)

たったそれだけで直りました。

しかし「google recaptcha」はスパム対策として入れておきたい。

Cocoonの公式で「Advanced noCaptcha & invisible Captcha」ならばCocoonと相性がいい事を知ったので、こちらをインストール。今の所、問題なく使えています。

https://wp-cocoon.com/community/demands/recaptcha-v3%E3%81%AE%E5%AF%BE%E5%BF%9C%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

主にWordpress中心のサイト・ブログ制作＆コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ＆Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

カスタマイズのご依頼は「一木堂」へ

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。