【WordPressとGoogleカレンダー連携プラグイン】Simple Calendarの設定・Calendar APIやID取得しての設定

今回は、WordPressサイトに、googleアカウントがある人ならみんな使えるGoogleカレンダーを連携させるプラグインを実装してみます。 ただ単体でインストールすればよいというわけでなく、apiキーなど連携のために必要な設定がありややこしいといえますが、うまく実装できれば便利に使えそうです。さっそくサイトに組み込んでみましょう。

なぜサイトに予約カレンダーがあるとよいの?

例えば、レストランやヘアサロンを予約するときに『ホットペッパー』とかを見たとします。カレンダーに◎や△・×で、予約状況が書いてありますよね？それを見て『この日は入れて大丈夫か？』を検討して申し込みます。

もちろん全部状況を伝えるのは難しいんだけど、『お客さんが申し込み前に確認できると、問い合わせる手間が少し省けて、利用しやすくなる』というメリットがあります。それを、googleカレンダー＆WordPressサイトでできるか？というのが、今回の記事の趣旨です。

Simple Calendar　Google Calendar Pluginをwpサイトに実装する前の下準備

今回紹介する『Simple Calendar　Google Calendar Plugin』は、WordPressおよびプラグイン単体で動くものではなく、『外部のGoogleカレンダーと連携するタイプ』なので、少し下準備が必要です。

Google Calendarのカレンダー IDを取得

まずは、サイト利用専用のカレンダーを作り、カレンダー IDを取得します。設定の部分で、下のほうに表示させたいカレンダーのIDがあるので、これをコピーしておきます。

注意点としては、『プライベート用カレンダーは全体には非公開』『サイト埋め込み用カレンダーは公開モード』と、きちんと分けてつかうことです（プライベート用カレンダーを全体に公開してしまった、みたいなミスには特に気をつけます）。

Google Calendar APIキーを取得する

https://console.cloud.google.com/apis/library/calendar-json.googleapis.com

カレンダー APIキーはたぶん上のリンクでいけると思います。APIキーは『アプリケーションプログラミングインタフェースのキー』のことで、このキーを取得して入力することにより、外部との連携が許可されます（入れないと動かない）。

動かすサイトのurlなどを入れて（ローカルwordpressでとれなかったので、このコラムを使用しました）、認証情報のところからAPIキーを取得しました（ここはgoogleアカウントやサービスに詳しい人に手伝ってもらえばベストです）。

Simple Calendar　Google Calendar Pluginの、プラグイン本体を入手する

https://ja.wordpress.org/plugins/google-calendar-events/

あとはプラグイン本体を入手。公式サイトからダウンロードするか、WordPress管理画面の新規プラグイン追加画面で、検索に『Simple Calendar』と入れて、上記のアイコンのプラグインをインストールし、有効化します。

Simple Calendar　Google Calendar Pluginの初期設定と表示例

Google Calendar APIキーを入力しよう

インストールすると、メニューに『Calendar』の項目ができます。SettingsのEvent Sourcesタブ内に『Google API Key』入力欄があります。ここにgoogleコンソールクラウドで取得したGoogle Calendar APIキーを入力します。

新規カレンダーを作成し、カレンダー IDを入力しよう

新規カレンダーを作成は『add new』で。これで新しいカレンダーが作成されました。

そのカレンダーの個別記事ページの下のほうに『Calendar Settings』という設定項目があります。ここで、横のタブの『Google Calendar』をクリックすると、Calendar ID欄があるので、先ほど取得したカレンダーIDを入力しました。

Simple Calendar　Google Calendar Pluginのサイト上表示例

上記のような設定を行い、このコラム上にもgoogleカレンダーを表示することができました。googleカレンダー上で記載しておいたスケジュールも、連動して表示されています。

スマートフォン表示上の難点について

settings→Advanced→Stylesで、『Disable CSSをチェック』および、横幅の狭いデバイス（スマートフォン）でのアクセス時、カレンダーの表示内容がタップしてもうまく出てこない（細かいスケジュールが確認できない）という難点があるようです。

この場合は『プラグイン編集』でCSSをスマートフォン向けに改造するか・・・

カレンダーのタイプをリスト表示に変更して・・・

リスト表示にしてしまうと、スマートフォンでもうまく見れます。この場合は『予約受付可能時間をカレンダーに書いておく（例：17:00～19:00受付可能など）』と、お客さんにもわかりやすいでしょう。

あとがき・まとめ

といった感じでしょうか。初期設定はやや難があるとはいえ、GoogleカレンダーをうまくWordPressサイトに連携できそうです。『飲食店・サロン・スクール・セミナーなどの事業者の方で、事前に確認させて、お客さんに余計な問い合わせをさせる手間を減らしたい』などの場合は、ぜひご検討ください（不明点はgoogleアカウントやWordPressに詳しい方、および当サイト管理人にきいていただければと思います。）。