VTRyo Blog

一歩ずつ前に進むブログ

CloudFrontで配信しているWordPressにビジュアルエディタが表示されない

f:id:vtryo:20180716011307p:plain WordPressの投稿画面にある「ビジュアルモード」「テキストモード」の変換が表示されない事象があった。

f:id:vtryo:20180716011344j:plain

業務用サーバだったこともあり、早急に修正する必要があったが、これが中々ハマった。

環境

このWordPressサーバの環境は以下の通り。

  • wordpress4.8.2
  • AmazonLinux
  • WEB: H2O
  • DB: MySQL5.7.19
  • PHP7
  • wordpress二台構成
  • CloudFront
  • ALB

色々試して失敗した一覧

まず先に試して確認してほしいと言われることは一通りやっていた。

  • ユーザ編集にてチェックボックスが入っていないか確認
  • プラグインの停止
  • wp-config.phpにdefine(‘CONCATENATE_SCRIPTS’, false );の追記
  • ブラウザの設定にてJavaScriptの許可がされている確認
  • 別のブラウザで見てみる(Chrome、Safari)
  • WordPress再インストール
  • Teratailで質問する

WEBでよくあるのはユーザ編集でチェックボックスが入っているパターンらしい。

f:id:vtryo:20180716011448j:plain

どれもこれも、大抵ここまでやれば解決するらしかった。

CloudFrontの存在

なんとビジュアルモードはUser-agentを見てOn/Offを判断しているというではないか!

ソースを確認すると、たしかに。2997行目あたりにあった。

vim $WP_HOME/wp-includes/general-template.php
#2997行目あたり
function user_can_richedit() {
        global $wp_rich_edit, $is_gecko, $is_opera, $is_safari, $is_chrome, $is_IE, $is_edge;

        if ( !isset($wp_rich_edit) ) {
                $wp_rich_edit = false;

                if ( get_user_option( 'rich_editing' ) == 'true' || ! is_user_logged_in() ) { // default to 'true' for logged out users
                        if ( $is_safari ) {
                                $wp_rich_edit = ! wp_is_mobile() || ( preg_match( '!AppleWebKit/(\d+)!', $_SERVER['HTTP_USER_AGENT'], $match ) && intval( $match[1] ) >= 534 );
                        } elseif ( $is_IE ) {
                                $wp_rich_edit = ( strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE ' ) === false );                        } elseif ( $is_gecko || $is_chrome || $is_edge || ( $is_opera && !wp_is_mobile() ) ) {
                                $wp_rich_edit = true;                        }
                }
        }

User-agentをCloudFrontにさせなければよい

ということでいくつか方法があった。

  • CloudFrontのBehaviorsにWhitelistを追加する
  • function.phpに直接記述する
  • プラグインを使う

私はWhitelistとphpに直接書く方法をとった。

CloudFrontのBehaviorsにWhitelistを追加する

f:id:vtryo:20180716011825j:plain

「Filter headers〜」の部分に「User-agent」を入力し、「Add Custom >>」をクリックする。

その後、設定を保存すればOK

試しにtestディレクトリにuser-agent.phpを作成して確認してみる。

vim $DOCUMENTROOT/test/user-agent.php
<?php
$ua = $_SERVER["HTTP_USER_AGENT"];
echo "$ua";
?>

f:id:vtryo:20180716012003j:plain

User-agentが取れた!

function.phpに直接記述する

WordPressからでもサーバからでも良いが、以下を追記する。

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');

ぶっちゃけこれ書けばCloudFrontの設定いらないかも。

プラグインを使う

Enable Visual Mode in CloudFront

自作している人もいるのでこれに頼るのもアリか?

まとめ

最初は単純にパッケージの欠損とか、JSの問題とかを探っていたが見当違いだった。

解決の糸口をみつけた先輩に感謝!

参考

https://jyo-to.okinawa/20170520/1092/

https://qiita.com/kawax/items/5e6d8d2fbbc4cee5a24b

http://www.kumoyanet.com/1519/