Amazon-CloudFront

WordPressビジュアルリッチエディターが表示されない場合の対処

概要

こんにちは、テクニカルサポートの牛山です。

WordPressのビジュアルリッチエディターが表示されなくなってしまった場合の対処方法について解説します。

発生事象

WordPress環境をAWS CloudFrontに移行後、WordPress編集画面(Classic Editor)で、「User-Agent」を見て、ビジュアルリッチエディター」が使用できるか判定しておりCloudFrontを介すことでUser-Agentが「CloudFront」になり表示できなくなってしまっている状態。

実際の状況でいうと以下、キャプチャ画像のような状態になっておりました。

※「Classic Editor」というプラグインを有効した状態の画面となっておりますので、使用していない環境は表示が異なります。
※デフォルトのブロックエディター(Gutenberg)でも同様に編集画面オプションで「ビジュアルエディター」が選択できない状態となります。

ビジュアルリッチエディター図001

対処

WordPress側にクライアントの「User-Agent」を知らせてあげれば良いので、AWS CloudFrontの設定で、「User-Agent」を転送してあげるようにします。

CloudFront > ディストリビューション から対象のディストリビューションを選択し、ビヘイビアのタブを選択し、 /wp-admin/* のパスパターンの設定で User-Agent をカスタムヘッダーとして追加してあげます。

Cloudfront

変更を保存し、CloudFrontのデプロイ完了後、再度、WordPressの編集画面を開き ビジュアルとテキスト が表示され切り替えできる状態になっていたら問題解決です。

ビジュアルリッチエディター図002

まとめ

WordPressの編集エディタ「Gutenberg」の仕様で表示されないようになっていたので、みなさんも移行される際には充分に気を付けるようにしましょう。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA