WordPressブロックベースのウィジェット使用方法【version5.9追加機能含む】

2022年2月7日

ワードプレス5.8から、ウィジェットがブロックベースとなりました。

慣れ親しんだ？ブロックエディターを使って、ウィジェットエリアにウィジェットとしてのブロックを配置する、というものです。

本記事では、このブロックベースのウィジェットエディターの基本的な使用方法および、ワードプレスversion5.9で追加されたウィジェットグループブロックを紹介します。

※本記事は2022年1月25日のワードプレスversion5.9へのアップデートにより、2022年2月にリライトしたものです。

これによって、従来のブロックやテーマプラグインで追加したブロックもウィジェットとして使えるなど、豊富なライブラリーを使用可能となります。

ただし、テーマによっては従来使用していたウィジェットが使えなくなる可能性があるなど、まだ使用するには時期尚早かもしれません。

したがって、旧ウィジェット画面への戻し方も紹介しておきました。

本記事では、現段階で最も新ウィジェットに対応していると考えられるテーマTwenty Twent-Oneを使って解説していきます。

ウィジェットで配置されたフッターエリア

先にテーマTwenty Twenty-Oneでウィジェット配置されたフッターエリアの表示状況を確認しておきましょう。

上の赤点線内がフッターウィジェットエリアです。

　・検索
　・最近の投稿
　・最近のコメント
　・アーカイブ
　・カテゴリー
　・メタ情報

の６つのウィジェットが、デフォルト状態では配置されているのがわかります。

従来のウィジェット画面

これを従来（WordPress5.7以前）のウィジェット操作画面で見てみましょう。

ダッシュボード　外観＞ウィジェット　で次のように表示されます。

フッターエリアに先ほどの６つのウィジェットが配置されているのが確認できます。

ブロックベースのウィジェット画面

WordPress5.8で変更されたウィジェット画面を確認します。

ダッシュボード　外観＞ウィジェット　の画面です。

見映えが全く変わりましたが、ブロックエディターと同様の画面であることがわかります。

ウィジェット操作画面の解説

画面の解説を加えると下図のようになります。
ウィジェット配置エリアの中に、各ウィジェットがブロックとして配置されています。

ちなみにウィジェット配置エリア（この場合はフッター）を閉じると下記のようになります。

テーマTwenty Twenty-Oneの場合は、ウィジェット配置エリアとしてはフッターしかありませんが、サイドバーなどほかの配置エリアがある場合は、フッターと並んで複数の配置エリアが表示されます。

そして、ウィジェット配置エリアの下には”使用停止中のウィジェット”の置き場所があるわけですね。

ブロックウィジェット画面の使い方

ブロックエディターと同様の操作感ですので、慣れた方ならばほとんど直感的に使用できます。

ウィジェットの配置

例として、テーブルブロックをウィジェットに配置してみます。
次の２ステップだけです。

①画面左上の+マークをクリック
②ブロックを選択する

この結果、テーブルブロックがウィジェットエリアに配置されました。

あとは、テーブルブロック内の設定をすれば表が表示されるようになります。

このように、ブロックとして選択できるものであればどれでもウィジェットエリアに配置できるのが新ウィジェットのメリットです。

ウィジェットの削除

ブロックの削除と同様の手順です。

①削除したいブロックを選択
②ツールバーの3点メニューをクリック
③”ブロックを削除”をクリック

ウィジェットの使用停止

ウィジェットの削除ではなく、一時的に使用停止する場合は以下の通りです。

①停止したいブロックを選択
②ツールバーの”ウィジェットエリアへ移動”をクリック
③開いたドロップダウンの中から”使用停止中のウィジェット”をクリック

停止したウィジェットは”使用停止中のウィジェット”エリアに移動します。

ウィジェットの停止は、ドラッグ＆ドロップでブロックを直接”使用停止中のウィジェット”エリアに移動してもOKです。

停止したウィジェットの復旧

使用停止中のウィジェットは、

• ドラッグ＆ドロップで元のエリアに戻す
• ブロック内ツールバーの3点メニューから移動先のウィジェットエリアを選択する

のいずれかの操作で復旧可能です。

従来のウィジェットとの互換性について

従来ウィジェットを使っている既存サイトをブロックベースのウィジェットに切り替えたとき、すでにサイト内に配置済みのウィジェットが消えないしくみとして ”従来のウィジェット”ブロックが準備されています。

すでに配置されたウィジェットは、この従来ウィジェットとして表示され、これまでと同じように追加、編集、削除が可能です。

また配置済の”ウィジェットは、”従来のウィジェット”ブロックの中でドロップダウンメニューから選択できるようになっています。

プラグインなどで追加して使用しているウィジェットも、この”従来のウィジェット”ブロックの中で選択できるようになります。

テーマやプラグインによっては、未使用であっても”従来のウィジェット”ブロックのドロップダウンメニューで選択可能です。このあたりは各テーマ・プラグインの対応状況によるみたいです。

テーマカスタマイザーでの操作

ウィジェットは、テーマカスタマイザーからも操作可能です。

ダッシュボードメニュー　外観＞カスタマイズ＞ウィジェット　を開けます。

ウィジェットは左のパネルで操作します。
ウィジェットがブロックとして配置されています。

右側がプレビューとなっています。
鉛筆マークをクリックすれば、対応するブロックが左のパネル内で選択されて表示されます。

このようにカスタマイザーの中でのウィジェット操作は、プレビューで確認しながら操作できるのがメリットですが、いかんせん左の操作パネルが狭いのでわかりにくいのが難点です。

また、ウィジェットの停止ができないのもデメリットです。

したがって私は、基本的には、外観＞ウィジェット　の画面で操作するようにしています。

テーマによる対応事例

※この事例は2021年10月13日段階での情報です。

Luxeritasでは従来ウィジェット推奨

このウェブチルサイトで使用しているテーマLuxeritasの場合は、デフォルトではブロックベースのウィジェットでなく従来ウィジェットを使用するようになっています。

Luxeritasの管理画面でブロックウィジェットに切り替えも可能ですが、現段階では積極的に推奨はしていないようです。

というのは、ワードプレスversion5.7以前からもLuxeritasの独自ウィジェット”再利用ブロック”を使えば任意のブロックをウィジェットエリアに配置できるので、ブロックベースウィジェットに切り替えるメリットはあまりないのですね。

Lightningはブロックベースに移行

Lightningというテーマは、プラグインVK All in one Expansion UnitやVK Blocksを使うことが前提となっているので、これらを有効することで独自ウィジェットが使えるようになります。

ワードプレスversion5.7以前の従来ウィジェット画面は以下の通りです。12カ所のウィジェットエリアと15個の独自ウィジェットが準備されています。

ワードプレスversion5.8以降では、ブロックベースのウィジェットとなっています。

従来と同様、12カ所のウィジェットエリアが準備されています。

ブロックの種類も従来同様15個の独自ウィジェットが使用できます。

”従来のウィジェット”を配置してドロップダウンから独自ウィジェットを選択することもできます。

このようにLightningの場合は、ブロックベースウィジェットへの移行が速やかに実施されているのがわかりますね。

旧ウィジェットへの戻し方

先にも述べたように、テーマによっては従来のウィジェットが選択できない可能性があります。

そこで、旧ウィジェットに戻すプラグインがWordPress開発チームから提供されています。
プラグインClassic Widgetsです。

インストール・有効化するだけで旧ウィジェットとなります。

新ウィジェットはまだまだリリースされたばかりなので、version5.8が5.8.1や5.8.2にアップデートされて安定化するまでは旧ウィジェットに戻して様子を見たいという方も多いでしょう。

実際、有料テーマなどサードパーティから提供されるテーマの多くは、まだ旧ウィジェットの設定としているものが多いかと思います。

ワードプレス5.9で追加された”ウィジェットグループ”ブロック

version5.9で、”ウィジェットグループ”ブロックが追加されました。通常の投稿や固定ページの編集エディターでは表示されませんが、ウィジェットブロックエディターではブロックのウィジェットカテゴリー内に表示されます。

ウィジェットグループブロックの特徴（メリット）

• タイトルをつけることができる
• グループブロックに比較してHTML構造がシンプル

以上の特徴について、使い方を見ながら確認していきましょう。

ウィジェットグループブロックの使い方

以下の手順で使用します。

①ウィジェットグループブロックを挿入
②内部にウィジェットを配置
③タイトルを入力

これでウィジェットにタイトルをつけることができました。

ウィジェットグループブロックのHTML構造

上記で作成したウィジェットグループブロックのHTMLは以下の通りです。

タイトルには見出しタグ<h2>が使用されています。

また、HTML構造もシンプルであることがわかります。

ウィジェットグループブロックを使用せずにタイトルをつける場合、グループブロックを使用することになります。しかしグループブロックの中に見出しブロックとウィジェットを配置すると、上のようにシンプルになりません。

<section>タグの中にグループブロック用の<div>さらにグループブロックインナー用<div>が配置された中に、見出し<h2>とウィジェット用タグが配置される複雑なものとなってしまいます。

HTML構造がシンプルな方が、CSSによるカスタマイズもやりやすくなります。

まとめ

WordPress5.8でリリースされた新ウィジェットは、Gutenbergのブロックをウィジェットとして使用することができます。

従来使用できなかったウィジェットが利用できる一方、テーマの対応状況によっては、従来のオリジナルウィジェットが使用できないこととなります。

したがって、しばらくは旧ウィジェットに戻しておき、今後のテーマの対応状況を確認しながら、新ウィジェットへ切り換えていくのがよいのだろうと思います。

このほか、ワードプレスversion5.8で導入された新機能は以下の記事で。