wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2018/07/16

こんにちは、管理人@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プラグイン(拡張)情報 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

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

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

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

今回は、wordpressで溜まりすぎるとデータベースを圧迫するリビジョ …

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

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

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

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

【PHPでwpプラグインを改造】all in one seoで、og:descriptionを書かなかったときに、文章が全部出力されてしまうのを直したい

今回は、ワードプレスでよくつかわれるプラグイン『all in one s …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

【phpでWPプラグイン改造】What’s New Generatorで、記事タイトル文字数を設定する

今回は、ワードプレスサイトでよく使われる更新情報表示プラグイン『What …

【WPプラグイン】ページ読み込み画面(ローディングアニメ)をサクッと実装できるWP Smart Preloader

今回は、wordpressのサイトで、ページ読み込み時の画面(ローディン …

【wpプラグイン】ワードプレスサイトに、スマホで電話機能をつけられる『Really Simple Click To Call』

今回は、スマホで電話する機能を、ワードプレスサイトに実装できるプラグイン …

【WPプラグイン】月額無料でレストラン・カフェなど飲食店の予約に使える『Restaurant Reservations』

今回は、飲食店でワードプレスサイトを持ったときに効果を発揮する、月額無料 …

ワードプレスサイトに、コメント機能を実装しない/非表示に

今回は、ブログサイトによくある『コメント機能』を、実装しない方法を考えて …

【ワードプレスサイト製作】俺の最低限なインストールプラグイン晒す 

今回は、ねた準備中につき雑談です。 管理人はワードプレス勢ですが、なるべ …