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

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

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

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

プラグイン

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

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

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

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

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

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

Wordpressのバージョンアップをしたらプラグイン「wordpress-ping-optimizer」がエラーを吐きだしたので、原因を調べました……という単なる覚書き。

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

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

Wordpressのバージョンアップでレイアウトが崩れた時の対処方法1

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

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

Wordpressのバージョンアップでレイアウトが崩れた時の対処方法2

「要素」を検証

Wordpressのバージョンアップでレイアウトが崩れた時の対処方法3

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

<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea>

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

問題のプラグインを削除

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

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

Wordpressのバージョンアップでレイアウトが崩れた時の対処方法4


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

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

いつもお世話になっております。 私ごとですが、スパムコメントが多くて「reCAPTCHA V3」を導入しようと考えているのですが… いまいち導入方法が分かりません(にコードを入れても表示されない) reCAPTCHA V3はセキュリティーの強化にも繋...

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

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

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

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

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

 
よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

フォローする

スポンサーリンク