WordPressでビジュアルエディタが使えない問題の解決策まとめ

WordPressでビジュアルエディタ(ビジュアルリッチエディター)が表示されなくなり使えなくなる問題はわりとあるようです。
とはいえ調べてみても設定が間違ってました!!みたいな記事が乱立していて非常に調べにくいですよね。
そこで、今日は解決策をまとめて、これだけ実施すればなんとか解決するみたいなフローを書きたいと思います。

スポンサーリンク

ユーザーの個人設定で「ビジュアルリッチエディターを使用しない」という設定項目を確認する。

ビジュアルリッチエディターを使用しないという設定項目があります。
もう確認済みだよ!!!という方ももう一度確認しましょう。
f:id:viaggiolog:20170308230310p:plain

プラグインを全部無効にしてみる

プラグインとの相性によって表示できない場合があるようです。
とりあえず切り分けのために全部無効にしましょう。
もし無効にしてビジュアルリッチエディターが使えるようなら、ひとつづつプラグインを有効にしていってどこで使えなくなるか見極めましょう。
複数のプラグインが原因という可能性もあるので気をつけましょう。

テーマを標準に戻してみる。

テーマを標準のテーマに戻してみましょう。

Chromeの開発者ツールでエラーがでていないか確認する

記事編集画面でF12ボタンを押しましょう。
Consoleタブを選択し、エラーが出ていないか確認します。
何かのエラーが出ている場合、そのエラーメッセージで検索してみましょう

f:id:viaggiolog:20170309205907p:plain

UserAgentを確認する

僕の場合はこれでした。
WordPressはUserAgentによってビジュアルリッチエディターを出力するか判断しています。
自分のブラウザのUserAgentがワードプレスに認識されているか確認しましょう。
CloudFrontなどのCDNを使っている場合、特に怪しいです。

WordPressのルートフォルダに(wp-config.phpなどと同じフォルダ)にtest.phpという名前のファイルを作成し、下記のコードを貼り付けましょう。

<?php
foreach (getallheaders() as $name => $value) {
    echo "$name: $value<br>\n";
}
?>

example.com/test.phpにアクセスすると、下記のような画面が出ます。
User-Agentが正しいものになっているか確認しましょう。
User-AgentがCloudFrontなどになっている場合はCloudFrontの設定を見直しましょう。
phpはキャッシュする必要ありませんので、Forward HeadersをAllにすればなおるかと思います。
f:id:viaggiolog:20170309212012p:plain

確認が終わったら必ずtest.phpは削除しましょう。

終わりに

ビジュアルリッチエディターが出ない原因、めちゃくちゃあるようですね。
でもほとんどの方がユーザー設定なのではないでしょうか。
僕の場合はCloudFrontを試行錯誤している間に気づいたら出なくなっていました。
ちなみにtest.phpでヘッダを確認する方法は簡単な割に切り分けにめちゃくちゃ使えます。