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で教室・個別相談・サロン予約受付】プラグインEasy Appointmentsの設定・サイト実装方法を詳しく解説

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

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

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

データベース圧迫するワードプレス リビジョンを、安定稼動のため削除・制限する(プラグインとconfig.php)

今回は、ワードプレスの機能である『リビジョン』を制御したいと思います。 …

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

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

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

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

ワードプレスの『AllinOne SEOPack』って、なぜ・どんな仕組みで検索に強くなるの?

今回は、ワードプレスの検索エンジン最適化用プラグインが、どんな仕組みで検 …

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

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

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

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

ワードプレスサイトを、プラグインでサクッとSSL化する方法

今回は、セキュリティの観点からも重要なサイトSSL(暗号化接続)を、ワー …