WordPressでは、基本的にブロックエディタ(Gutenberg)と呼ばれるエディタで編集していきます。
ブロックエディタとは、文章や画像などをブロック単位で積み重ねていくように構成していくエディタで、そのブロックの要素や装飾などを細かく設定できるため、簡単に効率的にサイト作成ができます。
そんな便利なブロックエディタですが、沢山ブロックを重ねていくうちに、ページ全体の構成が把握しにくくなっていきます。
そんな時便利なのが、ページ全体のブロック構成を表示させる「リスト表示」です。
Contents
リスト表示の使い方
固定ページや投稿ページの編集画面左上の横三本線の部分をクリックすると、画面左側にリスト表示が現れます。
リスト表示させると、ブロックの階層構造も一見して把握できます。
リスト表示便利機能①【階層構造のブロックの選択】
ブロックエディタを使っていて、意外とイラっとするのが、選択したいブロックが上手く選択できないことがよくあります。
編集中の文章や画像などをクリックすれば、そのブロックにフォーカスが移るのですが、例えばグループ化した場合、グループ全体を選択したいときに上手く選択できなかったりします。
難しいのは、グループをはじめ、カラム、ギャラリー、ボタンなど、入れ子構造になっているブロックは、その全体を選択しているのか、内側のブロックを選択しているのか分かりづらいです。
そんな時、リスト表示を使えば簡単に階層の上層から下層まで、任意のブロックを選択できます。
リスト表示便利機能②【ブロックの入れ替え】
リスト表示内でブロックを選択した状態で、上下にドラッグ&ドロップすることで、簡単に選択したブロックを入れ替えるとこができます。
リスト表示便利機能③【グループ化】
ブロックを複数同時に選択(始点のブロックを選択した状態で、終点のブロック上で「Shift」+左クリック)し、メニューバー縦三点から、「グループ化」することができます。
グループ化したものにCSSクラスを付けて、追加CSSで装飾するときなどにグループ化はよく使います。
ただし、ブロックエディタ上だと、複数ブロックを選択するのも難しいし、どこからどこまでグループ化したのかも、一見して分かりづらいです。
その点、リスト表示なら、リスト表示上のブロックを複数選択(始点のブロックを選択した状態で、終点のブロック上で「Shift」+左クリック)し、すぐ右の縦三点から、「グループ化」することができます。
まとめ
WordPressのバージョンが、5.9以上になってから、「リスト表示」も使いやすく、便利になっております。特にブロックを階層構造で使いたいときのは、メイン画面のブロックエディタだけでなく、今回のように「リスト表示」を活用すれば、ストレスなく編集できますので、是非ご参考にしていただければと思います。