「ブロックを追加」ボタンが反応しないのはChromeの拡張機能が原因だった。

先日ブログを書いていると、wordpressのエディタの「ブロックを追加」ボタンが反応しなくなりました。

通常は上図のように、マウスポインターをプラスボタンに当てるとボタンの色が青色に変わって、「ブロックを追加」のバルーンが出てくるんですけど、まったく変化しなくなりました。

仕方なく上部ツールバーのボタンをクリックしていたんですが、これでは不便です。

そこで何とかもとに戻らないかと色々調べていたら、やっと解決できましたのでその方法をお話しします。

これで解決

原因は、Chromeの拡張機能のDeepL翻訳をインストールしたことでした。DeepLを削除したら問題なく動作しました。

目次

問題解決のためにしたこと

wordpressのトラブルに出くわしたとき、解決のための対処方法はたくさんありますが、今回は私がトラブル解決までに試してみた方法を紹介しておきます。

wordpressのダウングレード

当初は、ブロック追加ボタンが反応しなくなる少し前に、wordpressのアップデートをしていたのでこれが原因だと思っていました。

なので、wordpressをダウングレードしてみました。

wordpressのダウングレードにはプラグインの「WP Downgrade | Specific Core Version」を使いました。

ダウングレード方法については以下の記事を参照してください。

現在のwordpressのバージョンは6.4.3ですので、それを6.4、6.3、にダウンしてみましたが解決しませんでした。

wordpressのヘルスチェック

次は、wordpressのヘルスチェックです。

wordpressはプラグインやテーマの相性などによって不具合が発生することが多くあります。

なので、不具合があるときはまずヘルスチェックを利用してみるといいですね。wordpressにはデフォルトでもヘルスチェック機能はありますが、今回はプラグインのHealth Check & Troubleshootingを使いました。

Health Check & Troubleshootingについてはこちら、

このHealth Check & Troubleshootingでも問題は見つかりませんでした。

PHPバージョンのチェック

サーバーやプラグイン、テーマなどに適用されているPHPのバージョン違いによる不具合も考えられます。

はるこ

プラグインの中には、しばらく更新されてなく、対応するPHPバージョンがかなり古い場合もあります。

ここではプラグインPHP Compatibility Checkerを使って、主にインストールしているプラグインのPHP対応状況をチェックしてみます。

PHP Compatibility Checkerの使い方はこちら、

PHPバージョンの互換性にも問題はありませんでした。

フォーラムの活用

前述の3つの方法でも解決しなかったので困っていたんですが、ふとcocoonのフォーラムを覗いていると、同じような症状で困っている方の質問があり、それに対する解決策も確認することができました。

けーさん

その答えが、Chromeの拡張機能Deeplによる相性の問題でした。

具体的には、下図のように「ブロックを追加」アイコンの上にDeeplの翻訳アイコンが被ってしまうということです。

これはDeeplの翻訳アイコンボタンを非表示にして一見ボタンが消えたように見えても、実際は被ったままなので下の「ブロックを追加」ボタンが操作しにくくなります。

はるこ

これは気づきにくいわ。

ところで、wordpressに限らず、テーマのSWELLやcocoonにも利用者のいろんな意見交換の場としてフォーラムが存在します。

*注 SWELLのフォーラムは会員しか入れません。

フォーラムには、たくさんの利用者の悩みや解決策が提供されていますので、困ったときはとても参考になる事が多いです。

はるこ

フォーラムは問題解決だけでなく、役立つ情報提供の場なのでみなさんもぜひ活用してください。

結論

結局、wordpressのブロックエディタを使う場合は、

Chromeの拡張機能Deeplは使わない。

のが正解かと思います。

どうしてもDeeplを使いたいcocoon利用者の方は、以下のcssをstyle.cssに追加してみてください。

deepl-input-controller {
  display: none;
}

このcssはcocoonフォーラムで、わいひらさんの解答で提供されてました。

けーさん

いつもながらわいひらさんの対応には頭が下がりますね。

上記のcssをwordpressのダッシュボード⇒「外観」⇒「カスタマイズ」⇒「追加css」にコピペすれば、Deeplの翻訳アイコンが「ブロックを追加」ボタンに被らなくなります。

はるこ

でもこのcssはSWELLでは効果がありませんでした。

まとめ

今回の「ブロックを追加」ボタンが使えないという不具合?は、予想もしなかったChromeの拡張機能によるものでした。

Chromeの拡張機能は、Googleの厳しい審査にパスした信頼のおけるものがほとんどですが、ユーザーの使用環境によっては相性の問題を引き起こす可能性があるということですね。

はるこ

拡張機能は便利なものも多いけど、使いすぎるとブラウザの動作にも影響するし、必要最小限にするのがいいかな。

今回は以上です。

この記事がどなたかのお役に立てれば幸いです。

それでは

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次