トロンボーン奏者の菅原昇司です。
このサイトのライブスケジュールは、自分で作った WordPress のプラグイン「SSS(Simple Stage Scheduler)」で動いています。今回から3回に分けて、このプラグインで何ができるのかを紹介します。
- 第1回(この記事): お客さんから見える画面
- 第2回: 予定の登録のしかた(スマホからも)
- 第3回: Google カレンダーの予定を WordPress に自動で載せる
実際に使っている様子は、このサイトの ライブスケジュール で見られます。この記事の画像は、説明のために架空のバンドや会場を入れたテスト用のサイトで撮りました。
月のカレンダー
まずは、月のカレンダーです。ライブの日に、開演の時刻とタイトルが入ります。今日の日付には丸い印が付きます。

カレンダーの上には「次のライブ」が出ます。「あと2日」のように、本番までの日数も表示されます。
ライブ・セッションなどの種類ごとに色が分かれていて、上の色の見本(カテゴリー)をクリックすると、その種類だけに絞り込めます。満席のライブには【満席】と付きます。
カレンダーの予定をクリックすると、その場で詳しい内容が開きます。日時・会場・料金・出演者が、ページを移らずに確かめられます。

ライブの一覧
カレンダーとは別に、一覧のページも作れます。月ごとに見出しが付いて、日付・タイトル・時刻・会場・出演者が1行ずつ並びます。

「今後のイベント」と「過去のイベント」を切り替えられ、イベント名・会場・出演者で検索もできます。
ライブごとのページ
ライブ1本ごとに、詳しいページができます。

このページに出るものは、次のとおりです。
- 日付と、開場・開演の時刻
- 会場(住所を入れておくと、地図も出ます)
- 料金
- 出演者と楽器(リーダーには印が付きます)
- 予約のボタン(予約ページの URL を入れたときだけ)
- 「カレンダーに追加」のボタン(Google カレンダー、Apple や Outlook のカレンダー)
- X・LINE・Facebook へのシェアのボタン
- 同じ会場のライブや、同じリーダーのライブ(これからのもの)
会場の住所を入れておくと、地図が出ます。初めて来てくださる方にも、場所が伝わりやすくなります。

ライブが終わったあとは、感想や写真をまとめたブログ記事へのリンクを付けられます。演奏の動画(YouTube)を貼ることもできます。

スマホでの見え方
スマホで見ると、カレンダーは小さな月の表と、日付ごとの予定の並びに切り替わります。指で押しやすい大きさにしてあります。

予定を押すと、パソコンと同じように詳しい内容が開きます。

ライブごとのページも、スマホの幅に合わせて表示されます。

今回のまとめ
お客さんから見える画面は、
- 月のカレンダー(スマホでは見やすい形に切り替わる)
- ライブの一覧(検索もできる)
- ライブごとの詳しいページ(地図・予約・カレンダーに追加・シェア)
の3つが中心です。
次回は、こうした予定をどうやって登録しているのかを紹介します。スマホからでも登録できるようにしてあります。
自作プラグイン SSS の紹介(全3回)
- 第1回: WordPress でライブスケジュールを見やすく載せる(この記事)
- 第2回: WordPress でライブの予定をスマホから登録する(近日公開)
- 第3回: Google カレンダーの予定を WordPress に自動で載せる(近日公開)
SSS でできることの一覧は、SSS の紹介ページにまとめています。

コメント