施設内などで表示させる当日イベント作ってみた

基本は施設内でスマホでアクセスして、「（スタート時間）から（イベント会場）で（イベント名）が開催されます。」というのを画面に表示させるというもの。
作り方はきっとたくさんあるんだろうけど、悩んで作ったのが以下。

使ったのはAdvanced Custom Fieldsプラグイン。ドキュメントもネット上にも情報たくさんある (^^)。
ドキュメントはこちら↓↓
ACF { Advanced Custom Fields Plugin for WordPress

最初に悩んだのが入力画面

イベントの構成はこんな感じ。

この構成が、

• 平日
• 土日祝
• その他（イレギュラーな場合で自由に書き換えが利くように）

とのこと。

各イベント毎に投稿タイプ作れば簡単そうだなぁと思ったんだけど、入力する時のことを思うと、1日のイベントが一画面で見えていた方が便利だ。僕が入力担当だったらその日のイベントが一覧したいってことで、

入力画面作ってみた

冒頭でも書いたけど、使ったのはACF。もうこれはずっとお世話になりっぱなしな気がする。先ずは入力画面。

この画面が最適かどうかは別問題として、全く素人のカミさんに黙って見せて、入力方法がわかったようなので、この形で進めた。

で、次は入力したデータを出力。コードはこんな感じ。

タブが広すぎ…^^;

今回は一つのWordPressの中に別ヘッダ作って、特定固定ページ配下はスマホ用のレイアウトに変更するってやり方で作ったので、content-xxx.phpみたいな感じで用意した。

ここで気になるのが、ACF使った場合、いつも各項目をget_fieldで持ってくるんだけど、項目が多くなると、いちいち面倒。まとめて一発で持ってくる方法ってないのかなぁ…

実際に出力

今回は、当日のイベント表示なので、本来はリアルタイムで表示させられたらそれが一番いいと思うんだけど、あれこれ調べたり、相談したりした挙げ句、GOWASの藤井さんから教えていただいたシンプルなやり方で行くことにした。

流れはこんな感じ

• jQueryの.load
• タイマーで一定時間おきにデータを取得
• Web Storage を使って判定
• content-xxx.phpの内容をフッターへ読み込む

で、タイマーの部分はコレ

各イベントは10分前から表示させるんだけど、ウザかったら非表示にしたいのでこの部分でWeb StorageのsessionStorageに

• イベント名
• イベント（○回目）の終了時間

をセットして、非表示になったイベントが実際に終了したときはsessionStorageを削除するといった流れになるよう書いてみた。

プリセットっぽく選択する

平日、土日祝、その他と3パターンのイベントを作成したら、別途用意しておいたページ内に用意したラジオボタンで選択する。

平日、土日祝とか自動化した方が楽ちんかなぁと思いつつも、パッと思いつけなかったし、ある程度手動の方が良かったりして…と言い訳的な考えもあって、この形に (^^)

イベントの出力で一番悩んだところは同じイベントが複数回あるところ。
非表示の設定が難しかった。。。

そもそも論だけど、イベント登録自体を変えればあまり悩まなくて済んだのかもしれないけど。。 (^0^;)

それから、今回いろいろな方に雑談から相談になったり、いろいろアイディアをいただいたりしてとても勉強になったし、ありがたかった。

1人じゃないってホント素敵っすね 😀

それからもし「このクソコード!!」とか思う優しい人がいたらツッコミをおなしゃす (^0^;)