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

      2021/02/26   2798文字

【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 Calendar APIキー・カレンダー IDが必要
  • プライベート用は非公開にし、サイト用のカレンダーを作っておく
  • スマートフォン表示が気になる場合は、プラグイン改造やリスト表示が必要

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

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - WordPressプラグイン情報
【タグ】 -

  関連記事

【WordPress高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法
【WPプラグイン】WordPress5.0以降のブロックエディタ使いたくない場合→Classic Editorプラグインで旧エディタに戻して記事を書こう
【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処
管理画面からFTP操作『WP File Manager』~過去の脆弱性ver・機能・使用例(テーマ消えないなど)の紹介
【wpプラグイン】SiteGuard WP Pluginってどんな風にセキュリティに強くなるの?
【WPプラグイン無しでサイト構築&表示を速く】Really Simple SSLって無効化して大丈夫?→設定しとけば大丈夫、ただし混在に注意
WordPressで絵や動画・オーディオのダウンロード販売しよう~Easy Digital Downloads使い方
WordPressのリビジョンを、プラグインで制御する方法(revision control)【データベースを軽く】
【WordPress】WP-Membersプラグインによる、会員向けコンテンツサイトの構築(カスタマイズ必須?)
【WordPressとGoogleカレンダー連携プラグイン】Simple Calendarの設定・Calendar APIやID取得しての設定
【WordPressショッピングサイト作成】Welcart概要・テーマ・プラグイン・設定例などを詳しく解説
フロントの『aioseo-admin-bar-css』を出力しないようにしたい→ログイン時のみ出るようになっているので大丈夫です