WordPressで各種ボタンをが動作しない、編集画面ツールバーがスクロールアウトするなどの問題の原因と対処方法

2020年11月27日

たぶんWordPress 5.X系からだと思うのですが、記事の作成/編集画面にある[メディアを追加]ボタンをクリックしても全く何も反応がなかったり、縦スクロールした際に編集画面ツールバーもそのままスクロールされて画面から隠れてしまうという問題が発生するようになりました。

その問題の発生原因と対処方法について覚書。

発生する問題

記事の作成/編集画面にある[メディアを追加]ボタンをクリックしても何も反応しません。

本来なら以下のような[メディアを追加]画面がポップアップされてきます。

その他、使用しているプラグインによって追加されるボタンなんかも同様にクリックしても何も反応しません。

また記事の作成や編集をする際にクラシックエディタを使用していますが、以下の画面ショットの赤枠部分の[編集画面ツールバー]がスクロールアウトされてしまい画面から消えてしまいます。

通常画面を縦スクロールした際には、編集画面ツールバーが画面のトップでとどまって常に表示されるようになるはずが、画面にとどまらずそのままスクロールされて画面から消えてしまいます。

こんなふうに一緒にスクロールされて画面から消える。

気づいた問題は主に上記2つの問題ですが、もしかしたら他の問題も出ている可能性があります。

原因調査

今まで問題なく動いていたWordPress機能が突然動かなくなったりした場合の原因の突き止め方としては、まず一旦すべてのプラグインを無効化にします。

プラグインの無効化は、WordPressの管理画面の[プラグイン]で各プラグインのチェックボックスをオンにして一括操作から[無効化]を選択して[適用]ボタンを押せば一気にすべてのプラグインを無効化できます。

もし最初から無効化されているプラグインがある場合は、事前に控えておいてください。

この状態で同様の問題が発生するかどうか確認します。

当然本番のWebサイトのWordPressで全部のプラグインを無効化してしまうと本番のWebサイトがしょうもない状態になってしまうので、本番環境をコピーした開発環境で試してから本番環境で実施しましょう。

こういうときのためにも、たとえ個人運営のWebサイトであっても開発環境を用意しておくことはとても大切です。

使用しているプラグインが大量にある場合は、1つずつ有効化して調べるのはかなり手間になるので5つぐらいの単位で有効化して調べてる感じでもよいです。

その際は有効にしたプラグインを控えておいてください。

原因

結果的に私のサイトで使用している「Better WordPress Recent Comments」というプラグインを有効化したところで問題が発生することがわかりました。

対処

本番のWebサイトですぐに無効化したいところですが、無効化した場合の影響を確認します。

サイドバーに「Better WordPress Recent Comments」のウィジェットが設置されていたので、無効化する前にサイドバーから「Better WordPress Recent Comments」ウィジェットを外します。

「Better WordPress Recent Comments」プラグインが使われているのはここだけなので、プラグインを無効化してもサイトに影響がないことがわかったので無効化します。

無効化後に問題が発生するか確認しましたが、各種ボタンが問題なく動作し、編集画面ツールバーも縦スクロールしても画面トップにとどまってくれるようになりました。

「Better WordPress Recent Comments」プラグインについては、最新のバージョンを使用していたのでアップデートすれば問題が起きなくなるというものでもないため、代替えプラグインを探すか、あきらめてこのままデフォルトの「最近のコメント」ウィジェットを使用するしかないようです。

とりあえず今回は、「Better WordPress Recent Comments」プラグインに替えて

「WP-RecentComments」を使うことにしました。

追加情報

日本語版のWordPressで必ずと行っていいほど使われている「WP Multibyte Patch」のバージョンが古いと編集画面ツールバーが画面にとどまらずスクロールアウトされることがあるそうです。

何れにしてもこのような問題が発生した場合の原因としては、使用しているプラグインが問題を引き起こしている可能性が高いようです。