MENTAにてフリーランス、Webデザイナー、グラフィックデザイナーを目指す方のよろず相談受付中!
Web

WordPressのブロックエディタが使えない原因がAmazon CloudFrontを使っていたせいだった

webooker

こんにちは。Webookerです。

WordPressのGutenberg、デファクト・スタンダード化してきましたね!

今回はWordPressの運用案件で、なぜかブロックエディタを追加する「+」ボタンが死んでいてブロックが追加できなかった件についてまとめます。

左上の「+」ボタンが押せないし、なんかエディタも見慣れない…。

もうすぐ無くなる運命にあるClassic Editorプラグインも使っていないし、と検索してみると、「ユーザー」>「プロフィール」の

ビジュアルリッチエディターを使用しない

にチェックが入っていると使えないという記事がたくさんでてきました。

でもチェックしてなかった…。

だいぶ行き詰まったところ、こちらの記事を発見。

「WordPressはUAを見てリッチエディターの有効・無効を判定しているので、CloudFrontを使っているとリッチエディターが使えない」ということが分かる(例:Rich Text/Visual/WYSIWYG Editor does not work in WordPress behind cloudfront – dtbaker.net)。
リンク先では functions.php を編集しているけど、CloudFrontでUser-Agentヘッダーをフォワードするように設定して解決。

[WordPress]WordPressでGutenbergのブロック追加ができない | アペフチ

CloudFrontってなんぞと調べると、AWSが提供しているCDNサービスとのこと。

Amazon CloudFront(グローバルなコンテンツ配信ネットワーク)| AWS

これを使っていると無条件でブロックエディタが使えないようです。

引用元の著者は「User-Agentヘッダーをフォワードして解決」したようですが、そもそもCloudFrontを今日初めて知った私には無理だったので、functions.phpに追記して解決しました。

// cloudfrontでもブロックエディタが使えるようにする
function dtbaker_wp_cloudfront(){
    add_filter('user_can_richedit','__return_true');
}
add_action( 'init', 'dtbaker_wp_cloudfront' , 9 );

たった数行記述して更新するだけで、無事にブロックエディタが追加できるようになりました。

(エディタの見た目も見慣れたものに。

こんな原因分かるかい!と朝から疲れましたが、この記事がどこかのWeb屋さんの時間節約になれば幸いです。

※追記:Amazon CloudFrontを使うと必ずブロックエディタが使えなくなるわけではないようです。

※このサイトでは、アフィリエイト広告を利用しています。

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUT ME
Webと本の人 Webooker (ウェブッカー)
Webと本の人 Webooker (ウェブッカー)
フリーランス Webデザイナー・グラフィックデザイナー
2009年からIT業界に。
WebデザイナーとしてITベンチャー企業、SaaS企業、Web制作会社に勤務。
2016年11⽉より独⽴し、フリーランスのWebデザイナー、グラフィックデザイナーとして活動
2024年1月から大阪のシステム会社に勤務し、フリーランスとの二足のわらじで現在に⾄る。 2子の親。フルリモートワーク。
記事URLをコピーしました