wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

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

      2020/07/01

こんにちは、管理人@SS_mshpです。

今回は、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に詳しい方、および当サイト管理人にきいていただければと思います。)。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

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

  関連記事

All In One SEO Packの管理画面タイトル・概要カラムって消せる?→manage_edit-post_columnsフックで消せます

今回は、利用者の多いWordPressプラグイン『All In ...

【WPプラグイン無しでサイト構築&表示を速く】Really Simple SSLって無効化して大丈夫?→設定しとけば大丈夫、ただし混在に注意

今回は『プラグイン干渉リスク低減や動作スピードアップ』のために、 ...

【WPプラグイン】WordPress5.0以降のブロックエディタ使いたくない場合→Classic Editorプラグインで旧エディタに戻して記事を書こう

今回は、WordPress5.0から搭載された記事のエディタがし ...

【WPプラグイン】WordPressにサウンドクラウドみたいな波形表示つけたい→WaveSurfer-WPをどうぞ

今回は、以前すこしDJの練習をしていた管理人が、webサイト(w ...

wordpressのリビジョンを、プラグインで制御する方法(revision control)【データベースを軽く】

今回は、wordpressで溜まりすぎるとデータベースを圧迫する ...

【wordpressで教室・個別相談・サロン予約受付】プラグインEasy Appointmentsの設定・サイト実装方法を詳しく解説

今回は、特定の形態のビジネスで、『カレンダーつき予約フォームで、 ...

【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処

今回は、『遅い』とされていた(過去形)wordpressサイトを ...