WordPressで独自カレンダーを実装

7Fスタッフ日記 Web制作・Webサービス
2014.12.11

こんにちは。スタッフのゆーすけです。

今日は7Fサイトに独自のイベントカレンダーを実装したお話しをしようと思います。

従前、7Fでは予約やイベントなどの情報をGoogleカレンダーで公開していました。
しかしイベント開催やスペース予約が増えていくにつれ、公開される内容や予約の管理方法など我々のニーズを満たさなくなってしまい、Googleカレンダーに代わるツールを探すことになりました。
ただ、色々と探してみたものの我々のケースに合致するツールは見つからず、そこで検索コストをかけるよりも自分で作った方が早くない？と思い、独自のイベントカレンダーを実装することとなりました。

現在の7Fサイトのカレンダーはこちら

ということで、独自カレンダーでやりたかったことをポイントに、実装した内容を説明していきます。

1. 情報の公開・非公開を制御したい

予約情報にはお客様の個人情報や、スタッフ間で共有したい事柄など、非公開としたい内容が含まれています。
しかし、Googleカレンダーでは非公開にしたい情報を取り扱えないので、その部分は別ツールを使う必要がありました。
これが、情報の多重管理になって負担になっていたのと、ダブルブッキングなどが発生したりと、問題になっていました。

そこで、7FサイトがWordPressで構築されていることもあり、予約1件1件を記事として扱うことにしました。
そうすることで、情報を一元管理することができ、予約の登録・変更・確認をスムーズに行えるようになりました。

具体的に実装に使った機能などは以下の4つです。
・カスタム投稿タイプ
　→ 通常の投稿と予約情報を混在させてしまうと管理が煩雑になるため、予約用の記事を独立して管理しています。

・カスタムタクソノミー
　→ 7Fには会議室やミーティングスペースなどといった、予約できるスペースが複数あるので、それらをタクソノミーとして登録しカレンダーに表示させることで、どのスペースが予約されているかが一目で分かるようにしています。

・カスタムフィールド
　→ 予約日や時間などを1項目として独立させることで、記事の抽出やソートの条件として利用しています。
　　また、細かく項目分けすることで、どの情報を公開にするか非公開にするか管理できます。
　　他にも、人によって入力内容がぶれてしまう問題も、項目立てしておくことで回避できます。

・「get_calendar()」関数
　→ WordPressの記事をカレンダー上に表示させるための関数です。
　　そのままでは取得する記事や出力する内容を制御できないので、コアファイルからPHPソースコードをコピペしてカスタマイズしています。
　　取得する記事の条件としてカスタム投稿タイプと予約日を指定するようにしました。
　　また、出力内容を記事タイトルから、カスタムタクソノミー + 記事タイトル + カスタムフィールド　に変更しました。

2. カレンダー上からのリンクを制御したい

イベントによっては、個別にイベントページを持っていることもありますよね。Facebookページや個人ブログなどなど。
Googleカレンダーでは「説明」にそのリンクを記載していたのですが、これがリンク表示されないんです。
だから、コピペして別タブで開くなんて手間がかかるし、そもそもマウスオーバーしないと表示されない情報なので気付く人が少ないという現実があります。

そこで、カレンダー上でリンク表示にし1クリックで開くようにしました！
リンク先URLはカスタムフィールドで実装しています。

今回、予約情報がWordPressの投稿記事になったことで１つ弊害が発生しました。
我々スタッフが予約情報を変更・確認する際に該当予約を探すときの手間が増えたのです。
Googleカレンダーであれば、カレンダー上で簡単に探せるので問題なかったのですが…

そこで、今回のカレンダーにも同機能を実装することにしました！
ログインした状態でカレンダーを表示すると、予約のリンク先がWordPressの記事編集画面になるようにしました。

おまけ. カレンダーのレイアウトを自由に設定したい

Googleカレンダーだとレイアウトの自由がきかないですよね。
タイトルが長いと全て表示されないですし。予約件数が多いと全件表示されないですし。

けど、「get_calendar()」関数のカスタマイズなら自由にクラス名もつけられるので、
具体的には先に述べた、「get_calendar()」関数のカスタマイズで、HTMLタグにクラス名をつけてスタイルを適用しています。

このネタをWordCampTokyo2014で話しました。
その時に使ったスライドを公開します。

WordPressに初めて触れてからもうすぐ2年。
WordPress、PHP、Javascriptなどなど、開発してきた内容の記憶も少しずつ薄れてきてます…
そんなわけで、今後は備忘録的に小ネタ・Tipsを公開していきます！