この記事では、ウィジェットを使ってサイトにさまざまな機能を配置する方法をご紹介します。
サイドバーやフッターエリアに必要な機能を設置して、訪問したユーザーが快適に使えるホームページに整えていきましょう。
説明アイコン 前回の「カテゴリー設計と導線の作り方」で決めたパン屋さんの構成をもとに、
今回はサイトの玄関となるトップページに「ユーザーが使いやすくなる機能」を追加していきますよ。
🍞 ウィジェットでサイトに機能を追加しよう
Topページの固定ページが完成しました。
次は、ウィジェットを使ってサイトにさまざまな機能を配置していきましょう。
SWELLのテーマを使うと、初期状態で「共通サイドバー」に以下の項目が自動で設置されています。
- 検索窓
- 最近の投稿
- コメント
- アーカイブ
- カテゴリー
これらはそのままでも十分使えますが、
自分のサイトにどんな機能を付けたいかを考えて、自由に入れ替えていくこともできます。
🍞 例：パン屋さんDEMOの構成イメージ
このパン屋さんDEMOでは、次のように配置してみます👇
説明アイコン共通サイドバー（緑色）とフッター（黄色）を設置していきますよ。
🧩 では、実際に配置してみましょう！
共通サイドバーの変更
１．管理画面から「外観 ＞ ウィジェット」を開く
２．共通サイドバーをクリック
説明アイコン共通サイドバーをクリックすると、「ブロック」が5個ありますね。このブロックがそれぞれ、あらかじめ用意されている「search」「Recent Post」「Recent Comments」「Archives」「Categories」です。
デフォルトのブロックを削除する
それでは、コメントのブロックを削除してみましょう。
共通サイドバーの「ブロック」を開いてコードを確認してみてください。Recent Commentsとありますね。
このブロックが「コメント欄」です。いらない場合は、「削除」をクリックしてください。表示を「皆様からのコメント」に換えたい場合は、ここで書き換えてください
表示順を入れ替えたい場合
ドラック＆ドロップで順番を変えることが出来ます。
説明アイコンパン屋さん向けデモサイトでは、「コメント」を削除。アーカイブとカテゴリーを入れ替えて順番を変えました。
ポイントカードの説明を追加する
①共通サイドバーに「画像」ブロックを追加し、画像を選択する。（保存を忘れずに）
②その下に、「テキスト」ブロックを追加し、ポイントカードについての説明文を書く。（保存を忘れずに）
説明アイコン公式ラインをご利用の場合は、ショップカードを使って似たようなことが出来ますが、自由度が低いです。今回のように、100円毎に1ptなどの場合は、従来の紙のポイントカードのほうが使いやすいと思いました。客層にもよると思います。自分のお店にあったシステムの導入が良いと思います。
フッターエリアの設定
次は、サイトの最下部にある「フッターエリア」を設定していきましょう。
フッターは、どのページを見ても共通で表示される部分です。
今回のパン屋さんDEMOサイトでは、次のように3カラムで構成します。
フッター（PC1）| MAP
フッター（PC2）| 営業カレンダー
フッター（PC3）| 公式ラインの案内
フッター（PC1）にMAPを設置する方法
１．画像（自分で地図を作製した）の場合
①ウィジェット画面の下のほうに、「画像」ブロックがあるので、マウスでつかんで「フッター（PC1）」へドラッグ＆ドロップ
②画像を追加
③タイトル（MAPなど）を入力
④保存をクリック
２．GoogleMAPを埋め込む場合
①ウィジェット画面の「カスタムHTML」ブロックを、マウスでつかんで「フッター（PC1）」にドラッグ＆ドロップ
②GoogleMapに住所を入力
③「共有」をクリック
④「地図を埋め込む」タブをクリック
⑤「HTMLをコピー」をクリック
⑥ウィジェットの「カスタムHTML」に貼り付ける
⑦「保存」をクリック
説明アイコンこのように、フッター（PC1）にウィジェットのブロックを追加していくと、下にどんどん追加されていきます。
⚠️ 注意
Googleマップの画面をスクリーンショットで貼り付けるのはNGです。
Googleの利用規約では、地図画像を勝手にコピーして使うことが禁止されています。
正しい方法は、Googleマップの「共有」→「地図を埋め込む」で表示される
埋め込みコード（iframe） を使うやり方です。
この方法なら、
地図を動かしたり、拡大・縮小もできる
ので、必ず「埋め込みコード」で表示しましょう。
フッター（PC2）に営業カレンダーを設置する方法
DEMOのパン屋さんでは、毎週土・日曜日が休業日、毎週水曜日に○○高校の購買に出店と、毎週金曜日に移動販売があるとします。また、月末の最終営業日はポイント2倍DAYのイベントを実施する仮定です。
それを営業カレンダーで表現してみようと思います。
ここでは、「XO Event Calendar 」をプラグインします。
詳しい使い方はXakuroに詳しく載っていますのでご確認ください。
「XO Event Calendar 」を使えば、「お知らせ」コーナーも作ることも可能です（今回は割愛します）。
１．「XO Event Calendar 」をプラグインする。
ダッシュボード→プラグイン→プラグインを追加
２．検索窓に「XO Event Calendar」と入力。
今すぐインストール→有効化
３．有効化すると、ダッシュボードに、「イベント」という項目が入ります。
４．毎週土・日曜日を休業日設定する
「イベント」→「休日設定」→
①休日の名前 | 例）off ※表には表示されません。自分の覚書用です。
②タイトル | 例）定休日 ※カレンダー下に表示されます
③週定期 | 例）土・日曜日に✔を入れる
④臨時日 | 例）臨時休業日は、2025-10-1 のように、1行ずつ入力
⑤色 | 色が選択できます
⑥休日を保存 | 保存を忘れずに
説明アイコン「休日設定」となっていますが、休日だけでなく、毎週の予定を設定するなら、ここで出来ます。今回、購買出店が水曜日、移動販売が金曜日なので、その設定も、この「休日設定」で行いました。以下、追加方法です。
５．毎週水曜日に購買出店する、を予定に入れる
①「休日を作成」をクリック
②「休日の名前」に「purchase」と入力し（覚書です。何でもいいです）「休日を作成」をクリック
③「編集する休日を選択」で、「purchase」を選択し、編集します。
説明アイコンこの方法で、土日が定休日、水曜日は購買に出店、金曜日は移動販売というカレンダーが作れます。
６．特定の日のイベント予定をカレンダーに反映させる方法
毎週ではなく、特定の日または期間にイベントをカレンダーに反映させる方法です。
①「イベント」→「カテゴリー」をクリック
名前 例）ポイント2倍
スラッグ 例）double-points
色 例）#4c89bf
を設定し、「新しいカテゴリーを追加」をクリック
②「イベント」→「新規イベントを追加」をクリック
③投稿ページと同じように作成します。
タイトル 例）ポイント2倍DAY
本文 例）毎月月末の営業日は…
カテゴリー 選択します（色が反映されます）
イベント詳細 日にち、期間をここで設定します。
説明アイコンここは、カレンダーをクリックすると表示されます。投稿ページと同じように作り込むことが出来ます。（今回はDEMOなので仮に作りました）
④ウィジェットのフッター（PC）２に戻り、カテゴリー、休日にチェックを入れて保存をする。
完成したカレンダーがこちら👇
説明アイコンこれで毎週の予定やイベントスケジュールを自動表示できるようになります。
パン屋さんのように予約制ではない場合は、このカレンダーが使いやすく自由度が高いのでおすすめです。
今回のDEMOでは営業日を例にしましたが、
季節イベントや臨時休業などの登録にも応用できます。
フッター（PC3）に公式ラインを設置する方法
公式ラインをすでに運用されている場合は、リンクを設置することをお勧めします。では、さっそく設置してみましょう。
１．「外観」→「ウイジェット」→「フッター（PC）３」に「テキスト」と「画像」ブロックをドラッグ＆ドロップで追加する。
２．公式ライン→「友だち追加ガイド」→「ボタンを作成」
「コピー」をクリックして、「ウイジェットのテキストブロックのコードタブ」に貼り付ける。
３．画像ブロックにQRコードを設置する。
「友だち追加QRコードを作成」をクリック
「ダウンロード」をクリック
→「ウイジェットの画像ブロック」で、画像を選択する
完成したフッター（PC3）がこちら👇
まとめ
ここまでで、トップページの基本骨格が完成しました。
ウィジェットを使って、サイド共通に
①検索 ②ポイントカード ③Recent Posts ④Categories ⑤Archives
を設置しました。
さらにフッターには、
- PC1：Map（店舗所在地）
- PC2：営業カレンダー（XO Event Calendar）
- PC3：公式LINEリンク
をそれぞれ配置しています。
これで、訪問者が「知りたい情報」に最短でたどり着ける構成が整いました。
次章では、このトップページをより魅力的に見せるための「デザインと導線調整」を行います。
🔽次に読むならこちら！
ここまでで、Topページ（固定ページ）の作成とウイジェットの設定が終わりました。
次の記事では、次章では、このトップページから、知りたい情報がすぐに見つけられるように、各種ナビゲーションを設置していきます。
コメント