SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

WordPressのウィジェットブロックエディターの使い方

WordPressのウィジェットブロックエディターの使い方
  • URLをコピーしました!

WordPress5.8で実装された新しいウィジェットの編集形式、ウィジェットブロックエディターについて紹介します。

この記事の内容↓↓

  • ウィジェットブロックエディターの使い方
  • 従来のウィジェットに戻す方法(どうしてもの場合…。)

ウィジェットブロックエディターは、ブロックエディターのようにウィジェットを編集する機能です。

ウィジェットエリアに自由にブロックを配置できるので直感的かつ柔軟な表現ができるかなと思います。

一方で、まだ新しい機能なので不安定な要素もあり、テーマ側で非推奨とアナウンスされている場合もあります。

また、いろいろな事情で従来のウィジェット(レガシーウィジェット)に戻したい方もいると思います。

そのためこの記事では、プラグインを使って従来のウィジェット編集画面に戻す方法も紹介します。

では、WordPressのウィジェットブロックエディターの使い方を紹介していきます。


記事内では、WordPressテーマ「Twenty Twenty-One」を使って各機能を紹介しています。
他テーマを使っている場所はその都度表記しています。

目次

ウィジェットブロックエディターとは

ウィジェットブロックエディターは、WordPress5.8で実装された新しいウィジェットの編集機能です。

以下、WordPress.orgのハンドブックでも解説されています。

>>ウィジェットブロックエディター概要

ウィジェットブロックエディターという名前のとおり、ウィジェットが従来の形式からブロックエディターで編集する形式になりました。

ウィジェットエリア内に自由にブロックを配置できるので、表現の幅も広がるかなと感じています。

ブロックエディターベースの新ウィジェットなので、ブロックウィジェットと呼ばれていることもあります。

ブロックウィジェット
従来のウィジェット
みにしん

記事と同じようなイメージでウィジェットを編集できるようになったね…!

では、ウィジェットブロックエディター(ブロックウィジェット)の使い方と編集方法を紹介していきます。

ウィジェットブロックエディターの使い方

ウィジェットブロックエディターの編集方法について以下の5点紹介します。

  1. ウィジェットブロックエディターの画面
  2. 編集するウィジェットエリアの選択
  3. 任意のウィジェットの追加、削除
  4. 別ウィジェットエリアへの移動
  5. カスタマイザーからウィジェットを編集

前提として、ブロックエディターの使い方をある程度把握しておく必要があります。

さとしん

ブロックエディターを使っている人はすぐ慣れるはず…!

では、ウィジェットブロックエディターの基本操作を紹介していきます。

ウィジェットブロックエディターの編集画面

ウィジェットブロックエディターは以下2つの方法で編集できます。

  1. WordPress管理画面→「外観」→「ウィジェット」
  2. WordPress管理画面→「外観」→「カスタマイズ」→「ウィジェット」

WordPressのバージョンが5.8以上で、テーマやプラグインによりブロックウィジェットが強制的にOFFされていなければ、以下のようなウィジェットの編集画面になります。

WordPress管理画面からウィジェットへアクセスした場合の編集画面
①「外観」→「ウィジェット」
WordPressカスタマイザーからウィジェットへアクセスした場合の編集画面
②「外観」→「カスタマイズ」→「ウィジェット」

②のカスタマイザーからウィジェットを編集する場合は、リアルタイムでプレビューも表示されるのが便利です。

この先は、まず①の「外観」→「ウィジェット」の編集画面の操作方法を紹介したあと、最後に②の編集方法も記載します。

編集するウィジェットエリアの選択

ウィジェットブロックエディターでは、編集できるウィジェットエリアが縦に並んで配置されています。

以下の手順で編集するウィジェットエリアを選択しましょう。
※Twenty Twenty-Oneはウィジェットエリアが1か所しかないため、無料テーマArkheを使って紹介します。

STEP
編集したいウィジェットエリアを探す
編集したいウィジェットリアの選択-1
STEP
編集したいウィジェットエリアをクリックするとアコーディオンが開く
編集したいウィジェットリアの選択-2

上記の様な操作でウィジェットエリアの編集をはじめることができます。

また、既に開いているウィジェットエリアはクリックすることで折り畳むことができます。

編集したいウィジェットリアの選択-3
さとしん

画面がスッキリするので、編集したいエリアだけ開いておくと良いかもしれませんね…!

任意のウィジェットの追加、削除

ウィジェットエリアを編集する方法を紹介します。

ブロックエディターベースなので、基本的なブロックの追加、削除の操作は記事を書くときと同じです。

ブロックの追加方法を3種類紹介しておきます。

  1. 画面左上の「+」ボタンから追加
  2. ウィジェットエリア右下の「+」ボタンから追加
  3. 「/」でブロックを追加
画面左上の「+」ボタンから追加

(1)画面左上の「+」ボタンをクリック

ウィジェットブロックエディターのブロックの追加-1

(2)ブロック選択パネルが表示される

ウィジェットブロックエディターの表示不具合-2
ウィジェットエリア右下の「+」ボタンから追加

(1)画面右下の「+」ボタンをクリック

ウィジェットブロックエディターの表示不具合-3

(2)ブロック選択パネルが表示される

ウィジェットブロックエディターのブロックの追加-4

「+」ボタンの位置や見た目はテーマによって変わることがあります。

「/」でブロックを追加

(1)空白の段落ブロックを選択

ウィジェットブロックエディターのブロックの追加-5

(2)/ + ブロック名で検索する

ウィジェットブロックエディターのブロックの追加-6

また、後述の「ウィジェットブロックエディターで覚えておきたいブロック」で紹介しますが、『ウィジェット』というブロックのカテゴリーがあり、カレンダーや最新の投稿など、ウィジェットで良く表示されるようなコンテンツがブロック化されているので覚えておくと良いかもしれません。

テーマやプラグインによって、さらにウィジェット用のブロックが追加されている場合もあります。

任意のウィジェットの別ウィジェットエリアへの移動

任意のエリアに設置したウィジェットを簡単に他のウィジェットエリアに移動する方法も紹介しておきます。

以下の手順でウィジェットを移動できます。

STEP
移動させたいウィジェットブロックをクリック
ウィジェットエリアの移動-1
STEP
ブロックツールバーの「ウィジェットエリアへ移動」をクリック
ウィジェットエリアの移動-2
STEP
移動させたいウィジェットエリアを選択
ウィジェットエリアの移動-3

これで、ウィジェットを簡単に別のウィジェットエリアに移動させることができます。

さとしん

便利なのでぜひ覚えておきましょう…!

カスタマイザーでウィジェットを編集する方法

最後にカスタマイザーからウィジェットエリアを編集する方法を紹介します。

以下の方法で編集できます。
※Twenty Twenty-Oneはウィジェットエリアが1か所しかないため、無料テーマArkheを使った場合の画面です。

STEP
WordPress管理画面→「外観」→「カスタマイズ」→「ウィジェット」をクリック
カスタマイザーからウィジェットを編集する-1
STEP
編集したいウィジェットエリアを選択
カスタマイザーからウィジェットを編集する-2

ウィジェットエリアはテーマによって異なります。

STEP
任意のウィジェットを自由に編集する

ブロックの追加は「+」ボタンから行う。

カスタマイザーからウィジェットを編集する-3
みにしん

エディター部分は狭いけど、プレビューが見れるのは便利…!

2種類の編集方法を状況によって使い分けていきましょう。

ウィジェットブロックエディターで覚えておきたいブロック

ウィジェットブロックエディターの基本的な使い方が把握できたら、次はウィジェットで使えるブロックを覚えておきましょう。

結論、基本的にどのブロックでもウィジェットエリアに配置できます。

例えば、テーブルブロックやカラムブロックなどもウィジェットエリアに配置できます。

さとしん

ウィジェットエリアでかなり柔軟な表現ができますね…!

その中で、ウィジェットエリアの編集で活躍しそうなブロックを紹介していきます。

ウィジェットカテゴリーのブロック

ブロックの中に、「ウィジェット」というカテゴリーのブロックがあります。

ウィジェットカテゴリーのブロック一覧

従来のウィジェットで配置していたようなコンテンツがブロック化されているので、必要に応じて活用しましょう。

ウィジェットグループブロック

WordPress 5.9のアップデートで、「ウィジェットグループ」ブロックが新たに使えるようになりました。

ウィジェットグループブロックは、お好みのウィジェットにh2のタイトルを付けることができるブロックです。

ウィジェットグループブロックをエディター上に呼び出すと、以下の画像のようにタイトル+任意のウィジェットの組み合わせが簡単に作れます。

ウィジェットグループブロック
みにしん

ウィジェットにタイトルを付けたい場合は、ウィジェットグループブロックを活用してみると良いかも…!

ウィジェットグループブロックの使い方も書いておきます。

STEP
「ウィジェットグループ」ブロックをエディター上に呼び出す
ウィジェットグループブロックの使い方-1

ちなみにブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを呼び出すことができます。

ウィジェットグループブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /widget-group
  • /ウィジェットグループ
STEP
ウィジェットの追加をクリック
ウィジェットグループブロックの使い方-2
STEP
ウィジェットのタイトルと任意のブロックを配置
ウィジェットグループブロックの使い方-3

一方で、WordPress5.8.xのバージョンではウィジェットグループブロックが使えません。

基本は最新のWordPressにアップデートすることを推奨しますが、何らかの事情で5.8を使っている場合は以下の方法で代用できます。

見出しブロックと任意のウィジェットを通常のグループブロックでグループ化する。

グループブロックを活用するとウィジェットグループブロックと似たような状況を作れます。

注意点として、グループ化せずに見出しと任意のブロックを並べるだけだと表示が崩れてしまいます。

例えば見出しとリストブロックでウィジェットを構成しようとすると以下のようなイメージです。

ウィジェットブロックエディターの表示不具合-1
グループ化しない場合
ウィジェットブロックエディターの表示不具合-2
見出しとリストが分かれる

「見出しブロック」と「リストブロック」をグループ化してあげると、正しく表示されます。

ウィジェットブロックエディターの表示不具合-3
グループ化する場合
ウィジェットブロックエディターの表示不具合-4
見出しとリストが正しく配置される

従来のウィジェットブロック(レガシーウィジェットブロック)

ウィジェットブロックエディターは新しい機能なので、テーマやプラグインのオリジナルウィジェットを使っていた場合に、そのウィジェットがブロック化されていない場合があります。

ウィジェットブロックエディターで従来のウィジェットを使いたい場合は、「従来のウィジェットブロック」(レガシーウィジェットブロック)を使います。

「従来のウィジェット」ブロックは以下の手順で使うことができます。

STEP
「従来のウィジェット」ブロックをエディター上に呼び出す
従来のウィジェット(レガシーウィジェット)ブロックの使い方-1

他のブロック同様に、段落ブロック内に「/ + ブロック名」を入力することでブロックを呼び出すことができます。

従来のウィジェットブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /legacy-widget
  • /従来のウィジェット
STEP
使いたいウィジェットを選択する
従来のウィジェット(レガシーウィジェット)ブロックの使い方-2

また、従来のウィジェットからウィジェットブロックエディターに変更したときに、従来から設置していたウィジェットも「従来のウィジェット」ブロックに変換されています。

このまま、従来のウィジェットブロックのまま使うこともできますし、以下画像の赤枠部からブロックウィジェットに変換することもできます。

従来のウィジェット(レガシーウィジェット)ブロックの使い方-3

ブロックウィジェットの対応状況はテーマによって異なる

ここまで紹介してきた、ブロックエディターベースの新ウィジェット「ウィジェットブロックエディター」ですが、WordPressバージョン5.8の時点ではテーマによって対応、非対応の判断が分かれています。

それぞれ例を挙げてみます。

使用しているテーマの公式サイトなどでブロックウィジェットの対応状況は確認しておくようにしましょう。

上記の記事のとおり、対応、非推奨の判断はテーマによって異なりますが、ブロックベースのウィジェットエディターはWordPress5.8時点ではまだ課題が残る機能であることは間違いないと思います。

2022/1/26にWordPress5.9がリリースされたので、各テーマの対応状況も徐々に変わってくるはずです。

Classic Widgetsプラグインで旧ウィジェットに戻せる

もし、ブロックエディターベースのウィジェットが使いにくく、旧ウィジェットに戻したいという場合は、「Classic Widgets」というプラグインをインストールしてみてください。

WordPress公式のプラグインで、設定などは特に無く、インストールするだけで旧ウィジェットの編集画面になります。

注意点が必要なのは、以下引用文のとおり、いつかプラグインのサポートが終了する可能性があるという点です。

lassic Widgets は WordPress チームがメンテナンスする公式プラグインです。従来の (「クラシック」) WordPress ウィジェット設定画面を戻します。少なくとも2022年まで、または必要な期間、サポートとメンテナンスが行われます。

https://ja.wordpress.org/plugins/classic-widgets/から引用

個人的には、テーマ側で対応可の判断をしているのであれば、WordPressの開発の流れに沿ってブロックウィジェットを使うのが良いかなと思います。

みにしん

今後、ますますWordPressのブロックエディター化は進んでいくはず…!

ウィジェットブロックエディターの良くある質問

ウィジェットブロックエディターでよくある質問2つに回答します。

編集画面が古いウィジェットのままなのですが、どうしたら良いですか?

以下の環境になっているか確認しましょう。

  • WordPress5.8以上
  • WordPressテーマがブロックウィジェットに対応している
  • Classic Widgetsプラグインが有効化されていない

上記が満たされていれば、基本的にはブロックベースのウィジェット編集画面になるはずです。

WordPressテーマ側で、ブロックウィジェットを強制オフにしている場合があるので確認しましょう。

Classic Widgetsプラグインはずっと使い続けられますか?

しばらくはプラグインのサポートは続く予定ですが、いつか使えなくなってしまう可能性があります。

詳しくは「Classic Widgetsプラグインで旧ウィジェットに戻せる」の項で紹介してします。

個人的には、テーマ側が対応していればブロックベースの新ウィジェットを使った方が良いと思います。

ウィジェットブロックエディターで自由にウィジェットを編集しよう

WordPress5.8で実装された、ブロックエディターベースの新ウィジェット、ウィジェットブロックエディターについて紹介しました。

ブロックエディターベースになったことで、より直感的かつ柔軟にウィジェットを編集できるようになりました。

さまざまなブロックを組み合わせることでウィジェットエリア内も自由な表現ができると思います。

さとしん

ぜひ、ブロックウィジェットを試してみてください…!

最後まで読んでいただきありがとうございました。


ブロックエディターの基本的な使い方↓↓

ブロックエディターのショートカットキー↓↓

WordPressのウィジェットブロックエディターの使い方

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる