WordPressのサイトをCloud Front 経由で配信するようにした際に、投稿の編集画面でビジュアルエディタが消えて使えなくなる現象が発生します。
これは、ビジュアルエディタ機能のON/OFFで User-agent を見てPCからのアクセスのみONにしているのですが、普通にCloud Frontからアクセスした場合、User-agent は「Amazon CloudFront」で書き換えられる為にPCからのアクセスでないと判定されビジュアルエディタ機能がOFFになってしまうからです。
この現象の対処法として2通りご紹介します。弊社では現状はUser-Agent をそのままoriginへ転送する方法で実装しています。
User-Agent をそのままoriginへ転送する方法
管理画面では、User-agentを「Amazon CloudFront」で書き換えずに、端末から送られるものをそのまま転送することで、ビジュアルエディタ機能がONになるようにします。
path-Pattern : /wp-admin/* の CloudFront Behaviors の設定で、「Forward Headers：whitelist」にして、「Whitelist Headers」に「User-agent」を登録します。
また、管理画面なので、キャッシュをさせないようにし、クッキーは全て転送するようにします。
これで、編集画面でビジュアルエディタが有効になります。
User-Agentによらずに常にビジュアルエディタを有効にする方法
子テーマの functions.php に以下のコードを追加してビジュアルエディタを常に有効にすることで、Cloud Front 経由でのアクセスでもビジュアルエディタが利用できます。
function user_can_richedit_custom() { global $wp_rich_edit; if (get_user_option('rich_editing') == 'true' || !is_user_logged_in()) { $wp_rich_edit = true; return true; } $wp_rich_edit = false; return false;
}
add_filter('user_can_richedit', 'user_can_richedit_custom');
