WordPress でライブスケジュールを見やすく載せる 〜自作プラグイン SSS の紹介(1)〜

トロンボーン奏者の菅原昇司です。

このサイトのライブスケジュールは、自分で作った 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 の紹介ページにまとめています。

コメント

タイトルとURLをコピーしました