WordPressの投稿画面にある「ビジュアルモード」「テキストモード」の変換が表示されない事象があった。
業務用サーバだったこともあり、早急に修正する必要があったが、これが中々ハマった。
アジェンダ
環境
この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でよくあるのはユーザ編集でチェックボックスが入っているパターンらしい。
どれもこれも、大抵ここまでやれば解決するらしかった。
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を追加する
「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"; ?>
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の設定いらないかも。
プラグインを使う
自作している人もいるのでこれに頼るのもアリか?
まとめ
最初は単純にパッケージの欠損とか、JSの問題とかを探っていたが見当違いだった。
解決の糸口をみつけた先輩に感謝!
参考
https://jyo-to.okinawa/20170520/1092/