お問い合わせはコチラから

WordPressのブロックエディタを使いやすくする方法

サイト運営

WordPressのブロックエディタへの拒絶反応が強かったのですが、どうにか克服して最近の記事は全てブロックエディタで書いています。

ブロックエディタを使い始めた当初はクラシックエディタとの違いでかなりストレスを感じましたが、最近ではブロックエディタの方が使いやすいと感じるようになりました。

この記事では、 クラシックエディタから移行する時に不便を感じないようにブロックエディタを使いやすくする方法についてまとめています。この記事を読むことで、スムーズにクラシックエディタからブロックエディタに移行できると思います。

一身上の都合でブロックエディタを使えない場合

やんごとなき理由で、ブロックエディタを使えない、使いたくない場合は、function.phpに以下の記事の内容を追記することで、ブロックエディタを完全に無効化できます。

WordPressのブロックエディタを使いやすくする方法

トップツールバーを有効にする

初期状態だと、ブロックエディタで配置した各ブロックのツールバーは、ブロックの上辺にくっついて表示されます。編集するブロックをクリックするたびにツールバーが移動するので結構目障りでした。

実は、ぴょこぴょこ動き回るツールバーをWordpress管理画面のTOPに固定するオプションがあります。このオプションを使うことで、ブロックエディタの画面がとてもスッキリして画面を広く使えます。

マークダウン記法を使う

クラシックエディタを使っていた時に、見出しをマークダウン記法(##など)で入力していました。

ブロックエディタでもマークダウン記法は使えます

実は、ブロックエディタではマークダウン記法が使えます。

ブロックエディタでは、特に設定していなければ、改行すると新しい段落ブロックが自動的に挿入される仕様です。この段落ブロックでマークダウン記法が使えます。具体的には、H2見出しにしたければ##+space と打ち込めば見出しブロックに変換されます。

基本的な考え方として、ブロックエディタのブロック選択をマークダウン記法で行うイメージを持つとブロックエディタで消耗しないで済むと思います。

その他のマークダウン記法については以下の記事をご参照ください。

ところが

クラシックブロックではマークダウン記法が使えない

ブロックエディタを使い始めた当初は、クラシックブロックをよく使っていました。しかし、クラシックブロックでは従来使えていたマークダウン記法が使えません。

なんでこんなに使いにくいのか?と思いましたが、そもそもクラシックブロックを使うのが間違っているのです。

繰り返しになりますが、そもそもブロックエディタは改行するたびにブロックを選択していく使い方なので、マークダウン記述がサポートされるとすればブロックの選択を行うためのものだともいます。そういう背景を考えると、将来的にもクラシックブロック内部でマークダウン記法はサポートされないと思います。

Tiny MCE AdvancedプラグインのClassic Paragraphブロックのオプションには注意

Tiny MCE Advancedプラグインを導入すると、Classic Paragraphブロックが追加され、初期ブロックがClassic Paragraphブロックになります。

この状態だと改行して新しい空のブロックが挿入されるところで、 Classic Paragraphブロックが入力されてしまうので、マークダウン記法が使えない状態になります。

Tiny MCE AdvancedプラグインのClassic Paragraphブロック関連のオプションはすべてオフにしてしまう方がスムーズにブロックエディタに移行できます。

「/」と入力してブロックをキーボードで選択

改行して新規ブロックが挿入された後で「/」と入力すると、オートコンプリートスラッシュインサーターがトリガーされます。

ブロックの候補が出てくるので、そこから選択することでマウスに手を移さなくてもブロックの選択ができるようになります。

個人的にはあまり使いませんが、覚えておいた方が良いと思います。

まとめ

この記事では、ブロックエディタを使いやすくする設定についてまとめました。

クラシックエディタに慣れてしまった人は、Tiny MCE Advancedを導入してしまい、初期ブロックがClassic paragraphになってしまうところから悲劇が始まります。

ブロックエディタはクラシックブロックを使わないでよいように作られていますので、クラシックブロックを使い始めると使いにくいだけになってしまいます。

ブロックエディタを使いやすくするTips
  • ツールバーを画面TOPに固定する
  • マークダウン記法を使う
  • Tiny MCE AdvancedのClassic paragraphブロックを初期ブロックにするオプションをOFF
  • クラシックブロックを使わない
タイトルとURLをコピーしました