WordPress 5.0 からデフォルトエディターが Gutenberg(グーテンベルグ)に変わりましたが、未だにクラシックエディター離れができないユーザーも多いかと思います。
何を隠そう私もそのひとりです。
ところで旧デフォルトエディターである TinyMCE には集中執筆モードというのがあるのを知っていますか?
WordPress 4.1 から追加された機能で、より執筆に集中できるようにメニューやサイドバーなどを消し去ってくれるなんとも気の利いた機能です。
今まさにこの記事もその集中執筆モードで書いてます。
いつもそうしているわけではなく、せっかくなんで。
実際のところすこぶる評判がよろしくない集中執筆モードですが、こんな不具合で悩まされている方いないでしょうか?
なんか編集中に投稿画面が勝手にスクロールするんですけど!
そして解決方法として紹介されているのは集中執筆モードなんてやめちまえとさ・・・。
ずいぶんと乱暴じゃありませんか?
今はじめて集中執筆モードで書いていて、いつもより心なしか筆が進んでいる気がしなくもない自分がいます。
大丈夫、もう諦める必要はないんです。
解決方法を紹介します。
まずは原因
エディターに読み込ませてるスタイルに、
html { height: 100%; } body { height: 100%; }
や、
body { height: 100vh; }
など、<body> の height プロパティを領域に合わせるような指定にしている場合に発生するようです。
ビジュアルモードに対応させようとして、フロント側のCSSをそのまま読み込ませている場合などにやりがちかなと思います。
解決方法
<body> のスタイルを上書きしたいので、テーマディレクトリ直下に editor-style.css があるなら下記のスタイルを追記します。
body { height: auto!important; }
!important もついているしたぶんこれでいけると思います。
確認の際はキャッシュのクリアを忘れずに。
うまくいかない場合は上記のコードを記述したスタイルシートを用意して、下記のコードを functions.php に追記します。
function my_editor_styles() { add_editor_style( 'add-editor-style.css' ); } add_action( 'admin_head-post.php', 'my_editor_styles', 99 ); add_action( 'admin_head-post-new.php', 'my_editor_styles', 99 );
テーマディレクトリ直下に add-editor-style.css を配置した場合の例です。
スタイルを上書きしたいので、アクションフックでなるべく一番最後に読み込ませるようにしています。
add_editor_style の第一引数にスタイルシートのパスを入れます。
相対パスと絶対パスどちらでもOKですが、絶対パスで指定したスタイルシートは相対パスで指定したスタイルシートよりも先に読み込まれてしまうので注意が必要です。
いくら priority(優先順序)を 99 などとしても相対パスで指定したスタイルシートが後に読み込まれるので、パスの指定は相対パスが無難です。
まとめ
いかがでしたでしょうか?
たぶん気のせいですが集中執筆モードのおかげでいい感じにまとまった気がします。
人それぞれ様々な執筆スタイルがあると思いますが、少しでもお役に立てれば幸いです。
さぁ、集中執筆モードを解除して公開だ!