WordPressのバージョン5.0から記事作成がブロックエディターに変わりました。
これまでのビジュアルエディターやテキストエディターに慣れていた人にとって、正直使いづらいと思います。
「Classic Editor」プラグインを入れて以前のエディターを使っている人の方が多いでしょう。
しかし、「Classic Editor」プラグインは2021年末にはサポートが切れる予定となっているので、早いうちにブロックエディターに慣れる必要があります。
今回は、ブロックエディターの使い方を解説しようと思います。
目次
ブロックエディターの使い方
ブロックエディターには様々なブロックがありますので、それぞれ使い方を紹介していきます。
今回は、よく使われるブロックに絞って紹介していきます。
段落
ブロックを指定せずに文字を打つと、「段落」になります。「段落」はプレーンなテキストです。
文字を打ち始めると、ブロックの上部に↓のツールバーが表示されます。
このツールバーを使って、他のブロックに変換したり、文字寄せを変更したり、太字にしたりできます。一部の文字色を変えたい時もツールバーを使います。
そして、右サイドバーには「設定バー」が表示されます。
「設定バー」には「文書」と「ブロック」があり、「ブロック」であれば文字サイズや文字色、背景色などが変更できます。
次のブロックに進みたいときは、Enterキーを押せば次のブロックに行きます。
ブロック内で改行したい場合は、shift+Enterを押します。
見出し
見出しを作る時は、普通に文字を入力した後、ツールバーの左端にある「変換」で見出しに変換してください。
見出しのツールバーに、見出し2〜4を選択するボタンが出てきます。
見出し1及び見出し5〜6は右サイドバーから選択できます。
↓このボタンをクリックして見出しブロックを作ることもできますが、探すのが面倒なので上の方法の方が楽です。
画像
画像はエディタ内に直接ドロップすると画像ブロックになります。
もしくは
ボタンをクリックして、「一般ブロック」の「画像」を選択します。
画像ブロックのツールバーでは、画像の配置やリンクの設定、画像の変更などができます。
また、右サイドバーでは、画像のサイズや代替テキストの設定などができます。
個人的には50%サイズにワンクリックでできるのが気に入っています。
リスト
文字を打って、リストに変換するとリストになります。
リストのツールバーでは、番号なしのリスト（ul）と番号ありのリスト（ol）が選べます。
リストは以下のように表示されます。
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
表
ボタンをクリックして、「フォーマット」にある「表」をクリックします。
クリックすると、以下のような表示が出てきます。
列数と行数は後から追加できるので、大体の数を入れて「表を作成」をクリックしてください。
ツールバーから列や行の追加、削除ができます。
各項目を入力すると、以下のようなテーブルが作成できます。
| スタンダードコース | プレミアムコース | |
| 料金 | ¥10,000 | ¥30,000 |
| 時間 | 30分 | 120分 |
これだけだと少々見づらいので、ちょっと設定を変えてみましょう。
右サイドバーで、「ヘッダーセクション」をオンにして少し修正すると、以下のように表示できます。
| スタンダードコース | プレミアムコース | |
|---|---|---|
| 料金 | ¥10,000 | ¥30,000 |
| 時間 | 30分 | 120分 |
これで見やすくなりましたね。
表のブロックは楽ですが、セル結合やセルの細かい設定ができないので、ちょっと不便です。
今後はもっと機能が向上することを願っています。
ショートコード
ボタンを押して、「ウィジェット」の「ショートコード」という項目があるので、ここにショートコードを入れても良いのですが、実は段落内にショートコードを入れても普通に使えます。
また、[shortcode][/shortcode]のような、囲むタイプのショートコードは、
このようにブロックを挟んで使うことができます。
再利用ブロック
ブロックエディターには「再利用ブロック」という便利な機能があります。
再利用したいブロックのツールバーの
をクリックして、「再利用ブロックに追加」を選択します。
ブロックに名前をつけて保存をします。
保存したら、をクリックして、「再利用ブロック」から同じブロックを使い回すことができます。
再利用ブロックの中身は「編集」をクリックして修正することができます。
再利用ブロックの注意点
作成済みの再利用ブロックを編集すると、同じ再利用ブロックを使っている全部のブロックに編集内容が反映されます。
再利用ブロックを雛形として一部だけ変えて使いたい場合は、「通常のブロックへ変換」をしてから中身を変更してください。
ブロックの検索
段落ブロックの最初に/と打つと、検索機能が出てきます。
例えば、/見出しと入力すると、すぐに見出しブロックを呼び出すことができるのです。
よく使うブロックの名前を覚えておけば、さくさくブロックを作成することができます。
これはかなり便利な機能なので、使いこなせるようにしておきましょう。
ブロックエディターの良い点
ブロックエディターには旧エディターに比べて良いところがいくつかあります。
レイアウトの自由度が高い
ブロックエディターの最も強力な点が、レイアウトの自由度の高さです。
これまでのビジュアルエディターは、縦にコンテンツを積んでいくイメージでした。
ブロックエディターは複数のブロックを横並びに並べたり、画像の横にテキストを入れたりなど、様々なレイアウトを簡単に組むことができます。
ブログ記事というより、Webサイトを作成するときに威力を発揮するエディターだと思います。
エディターと実際の表示が近い
ブロックエディターは、エディター上での見え方と、サイトでの実際の見え方が近くなるように作られています。
ある程度どのように表示されるか把握しながらコンテンツを作成していくことができます。
再利用ブロックが便利
ブロックエディターの再利用ブロックはかなり便利です。
同じようなコンテンツを何度も利用することは頻繁にあります。
よく使いそうなブロックを再利用ブロックとして登録しておけば、何度もブロックを作成する手間が省けます。
ブロックエディターの不満点
今現在の個人的に不満に思っている点を書いていきます。
表の作成がイマイチ
ブロックエディターには表ブロックがありますが、セルを結合できないのと、セルにクラス名が付けられないのが不便です。
複雑なテーブルを組もうとすると、HTML編集をしなくてはいけません。
今後はテーブルの開発に力を入れて欲しいと思います。
HTML編集がイマイチ
ブロックは「HTMLとして編集」することができます。
既存のブロックで複雑なことをしたい場合、HTMLに変換して直に書くこともあります。
しかし、「HTMLとして編集」をクリックして生成されるHTMLには、改行が全くなくて非常に見づらいです。
改行された状態でHTML展開されてくれれば、もっと便利になるのにと思います。
まとめ
ブロックエディターはまだ開発段階にあるので、機能が成熟しきったとは言えないのが正直なところです。
これまではPHPでWordPress開発できたのが、ブロックエディターがReactというJavaScriptライブラリで作られていることから、頭を抱えている開発者も少なくないでしょう。
また、ブロックエディターのカスタマイズに関する情報はまだまだ少なく、テーマやプラグイン開発者も手探りで開発をしているのが現状です。
完璧とは言い難いブロックエディターですが、今後も改良が進んでより便利なエディターになって欲しいと願っています。
