WordPressの集中執筆モードをデフォルトでOFFにする

WordPressの4.1以降では投稿編集画面の「集中執筆モード」が大幅に機能拡張されて、エディッターの行の高さがコンテンツ内容に応じて拡張するような仕様になった。

集中執筆モード

つまり、コンテンツ領域内の文章がブラウザの高さより長くなった場合に、文章の先頭がエディッターのコンソール下に隠れていくという仕様だ。スタイルシートでいうと、エディッター上部のツール部分にposition: fixedのスタイルが指定され、文書欄のテキストエリアにoverflow: hiddenのスタイルが適応される形だ(下図参照)。

集中執筆モードの仕様

この仕様には一部のブラウザにて不具合がある。Safari(Webkit系ブラウザ)やChrome、Opera(ともにBlink系ブラウザ)で「テキスト」モード(タブ)を利用した場合と、Firefox(Mozilla系)で「ビジュアル」モード(タブ)で利用した場合だ。それらのブラウザでは、コンテンツ内のカーソルを完全に先頭まで戻さないと、エディッター上部のツール部分に隠れている文章が表示されないのだ。そのため、文章の先頭を表示させたい場合はカーソルを先頭行まで戻すか、大元の編集画面のスクロールバーをページのヘッダまで戻す必要がある(下図参照)。

集中執筆モードの仕様

この不具合は投稿を書く人にとってはかなり不便で、私が開発したとあるサイトで「不便だからなんとかしてください」と要望を受けた。とくにWordPressに慣れてない人が記事を書こうとすると、ツール部分に隠れた文章を再表示するやり方がわからずに混乱してしまうようだ。

この症状の一番簡単な解決方法としては、「表示オプション」から「最大行表示エディターと集中執筆モード機能を有効化します。」のチェックボックスをOFFにすることだ。
これによって、エディッターの文章欄の横にスクロールバーが表示されるようになるので、よくあるWebの一般的なフォームと同じように直感的に文章内のカーソル移動ができるようになる(下図参照)。

集中執筆モードの仕様

でも今回は、その手動対応では不満があったクライアントから「投稿者全員にオプション設定させるのは手間なので、デフォルトで集中執筆モードをOFFにして欲しい」という要望を受けたのだ。

──というわけで、集中執筆モードをデフォルトでOFFにするためのやり方をTIPSとしてまとめてみる。

投稿編集関連の表示オプションの変更

まず、投稿編集画面で設定できるエディッターについての表示オプションはどこに保存されているか調べてみたところ、wp_usermetaテーブルにユーザーごとのオプション設定が{db_prefix}user-settingsのキー名で格納されていた。
今回対象とする「最大行表示エディターと集中執筆モード機能を有効化します。」のチェック状態はeditor_expand=onのような書式で、他のエディッター設定値と一緒にURLのGETクエリ形式で格納されていた。

──というわけで、集中執筆モードのみをOFFにする関数を作ってみた。

この関数を呼び出すと、editor_expandの現在値は無視して、一律で表示オプションがeditor_expand=offで上書きされるようになる(他の設定項目は変更しない)。

すべての登録ユーザーの集中執筆モードをOFFにする

あとは前項の関数をユーザーごとに呼び出せば、すべての登録ユーザーにて集中執筆モードをOFFにできる。そのためには、ユーザーがログインした直後に関数を呼ぶようにする。

これで、ユーザーがログインして管理画面へリダイレクトされる直前に集中執筆モードがOFFになる。なお、ログイン後に表示オプションから集中執筆モードをONにすることは可能だ(次回ログイン時にはまたOFFにされてしまうが…)。

また、ユーザーが新規登録された時点でデフォルトで集中執筆モードをOFFにしておく処理も合わせて追加しておけば万全だ。

これらのソースをテーマのfunctions.phpに追加して、ログインしてみると──

集中執筆モード

デフォルトで集中執筆モードがOFFになった。

WordPress Core Trac の状況

本来なら、どのブラウザにおいてもエディッター本文のキャレット位置が表示領域のTOPにある場合、テキストエリアの表示領域のヘッド位置をキャレット位置にアジャストするのがベストである。まぁ、キャレット位置を取得するJavaScriptはブラウザによって実装が異なっていた記憶があるので、クロスブラウザ処理になって一筋縄ではいかなそうでもあるが…。

──ということで、こういうメジャーな問題はWordPressのcore tracでも議論されているのでは…? と思って調べてみた。う~ん、それらしきチケットはいくつかあるんだが、特定環境依存にまで言及しているものはなかった。
そこで、次期バージョンの4.4-RC1-35743-srcで実際に挙動を確認してみた。そしたら、まだ不具合が残っている状態だった。

とりあえず、tracに現象を投稿しておきました。

チケットが受理されて、私に暇があれば、パッチ作ってtracにアップしようかとも思う。だけど、JavaScriptのキャレット関連の処理は結構作るのが面倒なんだよなぁ…(笑)

Leave a Reply

Your email address will not be published.