ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

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

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

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

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

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

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

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

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

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

  1. まだversion5.8段階のブロックベースのウィジェットは仕上がっていない。
  2. 従来のウィジェット機能のままの方が使いやすい

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

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

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

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

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

1.ウィジェット”ブロック”を使う方法

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

手順概要

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

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

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

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

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

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

カレンダーブロックをブロックエディター本文欄に挿入

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

手順は以下の通りです。

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

コードエディターに切り替える

手順3.コードをコピー

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

ブロックのコードをコピー

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

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

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

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

ブロックウィジェットを配置してコードをペーストする

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

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

web表示させてカレンダーの配置を確認

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

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

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

画像と段落およびボタンのコンテンツをウィジェットに配置

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

ブロック作成に使った固定ページは削除しても問題ありません。ただし独自コンテンツなどは変更・微調整することもあるので、下書き保存して編集用に残しておくと便利です。

2.ブログパーツを使う方法

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

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

手順概要

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

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

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

1.ブログパーツを登録

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

ブログパーツを登録

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

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

ブログパーツのショートコードをコピー

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

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

テキストウィジェットを配置してショートコードをペースト

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

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

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

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

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

まとめ

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

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

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

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

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる