わたしが管理している民宿のサイトでは、クライアントがGoogleカレンダーで予約管理を行なっています。予約システムは使っておらず、
電話で予約が入る → Googleカレンダーに手動で入力
といった感じです。
そのカレンダーをそのままサイトにも反映させたかったので、今回「Simple calendar」を使用してみました。
Googleカレンダーは、もともとiframeでサイトに貼り付けられるようになっています。
レイアウトも綺麗で見やすいかと思いますが、少しデザイン性に欠け、何よりレスポンシブに対応していない！ということでSimple calendarの導入を決めました。
目次は以下になります。
まずはプラグインのインストールです。
ダッシュボードのプラグイン ＞ 新規追加 から「simplecalendar」と検索します。
これです。
「Simple Calendar – Google Calendar Plugin」ですね。インストールして有効化します。
するとこのような画面になります。メニューバーにもCalendarsが追加されていますね。早速カレンダーを作成してみましょう。
Google API キーの作成
まず、Simple calendarを使用するにはGoogle API キーの作成が必要です。
Calendars ＞ Setting からGoogle Developers Consoleをクリック。
Googleアカウントでログインして、Google APIsのページへ。
今までAPIを使用したことがなければ下記のような画面が出ると思うので、「作成」を押し新規プロジェクトを作成します。
任意のプロジェクト名を決めます。
今後増える可能性を考えて、わかりやすいものがいいですね！
わたしは今回は「simple calendar」で作成します。
プロジェクトを作成したら、「APIとサービスを有効化」もしくは「APIライブラリ」へ移動し、Google Calendar APIを選び有効化します。
下記のダイアログが出てくるので、「認証情報を作成」をクリック。
手順をスキップし、「APIキー」のリンクを選択します。
以下の画面になるので、わかりやすいよう任意の名前を決めて、作成します。
アプリケーションの制限については、キーは公開される事はないのでなしで問題ないかと思います。
ダッシュボードに戻ると、作成したAPIキーが表示されています。
名前をクリックすると、API Keyが確認できます。こちらをコピーして、Wordpressに戻りましょう！
コピーしたAPIキーを以下に貼り付けます。
以上で設定は完了です。次はカレンダーを作ってみます。
カレンダーの作成
メニューバーのAdd Newを押すとこのような画面になるので、任意のタイトルを決めます。
そしてこちらでカレンダーIDの入力が必要になります！
Google カレンダーに飛び、表示させたいカレンダーを選択し「設定と共有」を開きます。
そしてここ！！ここを「一般公開して誰でも利用できるようにする」にチェックを入れておきます。
ここにチェックしておかないとカレンダーが表示されません。
画面下にスクロールしていくとカレンダーIDが出てきます。これをコピーしWordpressに戻ります。
先ほどのwordpress画面でこれを入力します。
あとキャッシュの設定ですが、最短で更新されるように1minutesに設定しておきます。
「Googleカレンダーを更新したのにサイトに反映されない。。。」というのをこれで防げるはずです！
「公開」を押すとカレンダーが表示されます！
シンプルで綺麗なデザインですね。
以上で設定は完了です。お疲れ様でした！
使ってみた感想
APIキーの取得が少し手間ですが、デフォルトのものよりだいぶ綺麗で見やすいデザインになりすごくいいと思います。予定やtodayの色、また出力される予定のテキストも管理画面から変更が可能です！
ただ一つ、スマホレイアウト時に、予定が全て「•」で表示されてしまうのがわかりづらいですね。。こちらはカスタマイズした方が良さそうです。
