テーマSWELLでブロックをウィジェットに使う２つの方法

2022年8月12日

最近制作案件でテーマSWELLを使う機会がありました。

SWELLといえばブロックエディターが使いやすい！と定評がありますが、ウィジェットに関してはまだブロックベース対応されていません。

せっかくブロックが使いやすいのだから、ウィジェットにもブロックを使いたい！ということで、今回はSWELLで準備されている２つの方法を紹介します。

SWELLはブロックベースのウィジェットに対応していない

ブロックベースのウィジェットとは

ワードプレスversion5.8から導入されたウィジェットの機能です。各ウィジェットエリアに配置するウィジェットとして、ブロックエディターのブロックを使うことができます。

ブロックベースのウィジェットとすることで次のようなメリットが出ます。

• ブロックとして作成できるコンテンツは当然ウィジェットにも配置が可能
• テーマやプラグインで準備されているブロックをそのままウィジェットに配置が可能
• 進化したブロックエディターの編集機能をウィジェット設定ページでも使える

SWELLがブロックベースのウィジェットに対応していない理由

しかしながらブロックエディターの使い勝手が逸品なテーマSWELLにおいては、まだブロックベースのウィジェットが採用されていません（2022年8月11日現在　SWELLバージョン2.6.7）。

SWELL制作者さんがこちらの記事でその理由を公開されています。かいつまんで説明すると

というのが主なところですが、ワードプレスがバージョン6.1まで進化した今となっては、上記のうち２つめが一番の理由でしょう。なぜなら、同じSWELLの作者さんが後から開発したテーマArkheではブロックベースのウィジェットが採用されているからです。

SWELLは従来のウィジェットの使い勝手が非常によいため、それに慣れたユーザーにとっては使いにくくなり、デメリットの方が大きいとの判断ではないでしょうか。

ブロックをウィジェットに使う２つの方法

とはいえ、SWELLにはせっかく高機能なブロックがたくさん準備されているので、ブロックをウィジェットに配置したくなるのは当然です。

そこで方法を２つ紹介していきます。

１．ウィジェット”ブロック”を使う方法

SWELLが準備したウィジェットの中にある、”ブロック”というウィジェットを使う方法です。

手順概要

1. ブロックエディター（固定ページでよい）を開けてコンテンツを作成
2. ブロックエディターをビジュアルエディターからコードエディターに切り替える
3. コードをコピー
4. ウィジェット設定画面でウィジェット”ブロック”を配置し、コードをペースト・保存する

簡単にいえば、『ブロックのコードをウィジェット”ブロック”にコピペする』というシンプルな内容です。

ウィジェット”ブロック”を使った事例１：カレンダーを配置

それでは具体例を紹介しましょう。今回はカレンダーブロックをサイドバーのウィジェットエリアに配置してみます。

手順１．ブロックエディターを開けてコンテンツを作成

固定ページ＞新規追加でブロックエディターを開けて、カレンダーブロックを本文欄に挿入します。
（カレンダーブロックは、ブロックカテゴリーのウィジェットにあります）

手順２．ブロックエディターをビジュアルエディターからコードエディターに切り替える

手順は以下の通りです。

①画面右上のオプションメニューを開く
②”コードエディター”をクリック

手順３．コードをコピー

コードエディターに切り替えると、ブロックのコードが表示されます。このコードをコピーしておきます。

カレンダーウィジェットの場合は、<!– wp:calendar /–>という簡単なコードになります。

手順４．ウィジェット設定画面でウィジェット”ブロック”を配置し、コードをペースト・保存する

ウィジェット設定画面（外観＞ウィジェット）を開けて、次の手順で進めます。

①ウィジェット”ブロック”を共通サイドバーエリアに配置（ドラッグ＆ドロップ）
②配置したウィジェットの”ブロックHTML”エリアにコピーしたコードをペーストして保存

共通サイドバーエリアの一番上にはもともと検索ボックスを表示するウィジェットが配置されているのですが、その下にブロックウィジェットを新しく配置しています。

以上で、サイトのWeb表示を見てみると、サイドバーで検索ボックスの下にカレンダーが配置されているのが確認できます。

ウィジェット”ブロック”を使った事例２：画像と段落・ボタンの独自コンテンツを配置

もうひとつ事例として、画像と段落およびボタンブロックで作成したコンテンツをサイドバーに配置します。

手順は同じなので、結果だけを紹介しておきましょう。
・ブロックエディターで画像、段落ブロック（テキスト）、ボタンの３つのブロックをグループブロックで囲んで、全体にグレーの背景スタイル（右上角折れ）を適用
・このコンテンツのコードを先ほどのカレンダーの下に新たに挿入したブロックウィジェットにコピペ

ブロックエディターで作成した独自コンテンツが、サイドバーで表示されるのが確認できます。

２．ブログパーツを使う方法

SWELL独自機能であるブログパーツを使っていきます。ブログパーツはコンテンツを登録して再利用できる機能です。

コンテンツ作成にはブロックエディター、再利用は記事内やウィジェットで可能です。

手順概要

1. ブログパーツを登録
2. 登録したブログパーツのショートコードをコピー
3. ウィジェット設定画面でテキストブロックを配置してショートコードをペースト

ブログパーツを使った事例

ブロックウィジェットを使った事例２の独自コンテンツと同じものを配置します。

１．ブログパーツを登録

①ブログパーツ＞新規追加　を開く
②独自コンテンツをブロックで作成して”公開”
（ブログパーツはブロックエディターのタイトル名で登録されます）

２．登録したブログパーツのショートコードをコピー

①ブログパーツ　の一覧表を開ける
②対象のブログパーツのショートコードをコピー

３．ウィジェット設定画面でテキストブロックを配置してショートコードをペースト

①テキストブロックをサイドバーに配置
②本文入力欄にショートコードをペーストして保存

以上でサイドバーに独自コンテンツが表示されることになります。

（参考）ブログパーツを記事内で呼び出す方法

登録したブログパーツはウィジェットだけでなく、投稿や固定ページの編集画面でいつもで呼び出して使うことができます。呼び出しにはブログパーツブロックを使います。

①ブログパーツブロックを記事内に挿入
②”ブログパーツを選択”をクリック
③登録したブログパーツを選択

まとめ

SWELLでウィジェットにブロックを配置する方法を２通り紹介してみました。ほかにもfunctions.phpにコードを記述してワードプレス標準機能であるブロックベースのウィジェットに切り替える、という方法もありますが、それだと従来ユーザーにとっては互換性がなくなるのでおすすめしません。

紹介した２つの方法は、どちらを使ってもよいですが、ブログ記事の執筆などで何度も使う可能性があるならばブログパーツ方式がよいでしょう。

ただ、ウィジェットとしてほぼ１回きりの利用ということなら、ブロックウィジェットを使う方がお手軽かと思います。すでにどこかの固定ページで使用しているコンテンツをサイドバーにも表示しておこう、というケースは、ホームページの制作案件では結構ありますからね（私も今回はそうでした）。

自分なりに使いやすい方法を確立しておくとよいでしょう。