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

f:id:vtryo:20180716011344j:plain

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

アジェンダ

1 環境

環境

この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] ) &gt;= 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の設定いらないかも。