CONTENTS
現在満枠のためご新規様のご相談は7月以降のご予約となります。

GoogleカレンダーをWordPressに表示できるプラグイン【Simple Calendar】

GoogleカレンダーをWordPressに表示できるプラグイン【Simple Calendar】

Simple Calendarは、Googleカレンダーをホームページと連携させることでお知らせやご予約フォームの上部などにカレンダーを埋め込むことのできるWordPressプラグインです。

複数のカレンダーをブログに表示できます。
コンサルタントや講師など、日程のカレンダーをサイトに表示して、ご希望日をいくつか伺うことで日程調整などのやり取りがスムーズに行えるようになります。

カレンダーに表示する情報の管理は「Googleカレンダー」を利用します。
Googleカレンダー上で追加変更した日程からカレンダーのデータを取得してWordPressに表示しますので、ホームページの世界観に合わせてカレンダーの見た目や表示内容のカスタマイズもできます。

このプラグインはスケジュールの共有を効率的に運用することで、ユーザーとの日程調整のやり取りを大幅に減らすことができます。無料版だけでも十分過ぎる程役に立ちます。
そして、高度な機能を拡張した有料版の拡張機能(アドオン)も用意されていますのでぜひ試してみてくださいね!

目次

Simple Calendarでできること

  • Googleカレンダーを連携して、複数のカレンダーをホームページ上に表示できる。
  • カレンダーに表示する日程や詳細情報は「Googleカレンダー」に登録して管理します。
  • カレンダーの外観や表示内容を細かくカスタマイズできる。
  • ショートコードを利用して記事にカレンダーを表示できる。
  • ブロックエディタ・クラシックエディタの両方で利用できる。
  • ウィジェットを利用してサイドバーやフッターにカレンダーを表示できる。
  • 無料版はシンプルな機能のみです。高度な機能を利用できる有料版(アドオン)も用意されています。

実際の表示

実際に、日程調整でこんたが使用しているページはこちらです。
参考までにご覧ください

このプラグインは定期的にアップデートされており、安定的に保守が行われていると感じています。
このプラグインはオンラインマニュアルを読んで、自分で問題を解決するセルフサポートのようです。サポートフォーラムでは開発者が質問に返信することは少ないようです。

サポートフォーラムを確認した限りでは、プラグインが原因で問題が発生するわけではなく、「Google Calendar API」の仕様の問題でエラーが発生したり、初期設定に苦戦しているユーザーが多いような印象を受けました。

確認できた内容

  • 定期的なアップデートの実績
  • プラグインの利用者数
  • サポートフォーラムの評判イマイチ(ユーザー同士で問題を解決している)
  • プラグインの評価イマイチ
  • 有料版のプラグインあり

Google API Keyの取得

このプラグインを利用するには、下記の情報が必要なので、こちらを取得していきます。

  1. Googleアカウント(普段使っているGoogleアカウントを使用しましょう)
  2. Google API キー
  3. Google カレンダーのカレンダーID

Google API Keyの取得

このプラグインを利用するには「Google API Key」の取得が必要です。
Google API コンソールというサイトから、「Google Calendar API」を有効化してAPIキーを取得してください。

Googleアカウントでログインしているブラウザから、下記のリンクをクリックしてください。
クリック後にログインすることでも対応可能です。

STEP
プロジェクトの作成とGoogle API Keyの取得

まずはGoogleの各種APIを使用するために、プロジェクトの作成をおこなっていきます。

すでにプロジェクトをお持ちの際は、こちらの工程は割愛してください。

次の画面で、任意のプロジェクト名を決めます。
使用できるのは、英数字、単一引用符、ハイフン、スペース、感嘆符です。

プロジェクト名を入力したら、作成をクリックします。

左側の「認証情報」をクリックしてこの画面に行き、「認証情報を作成」をクリックします。

クリックするとプルダウンメニューが開くので、その中のAPIキーをクリックします。

クリックするとAPI作成画面が走ります。

作成が完了するとこのようにAPIキーが表示されますので、右端のコピーボタンを押してキーをコピーしましょう。

APIは複数作成できるので、今回何のために取得したものなのかわかるように名前を変更しておきます。

右端の設定ボタンを押し、「APIキーを編集」をクリックします。

キーのタイトルをわかりやすいものに変更して、保存をクリックしましょう。

このように、どこのサイトで何に使用しているかわかりやすいタイトルに変わりましたね。

STEP
Google API Keyの取得

Google calendar apiと検索します。

検索結果画面に出てきた「Google calendar api」をクリックします。

APIを有効化して、作成したプロジェクトでこのAPIを使えるようにしておきます。

これをしないとプラグイン側での設定でエラーになってしまうので、必ず行っておきましょう。

Simple Calendarインストール方法

STEP
プラグイン新規追加

WordPress管理画面 > プラグイン > 新規追加 >「Simple Calendar」で検索して、今すぐインストールをクリックします。

STEP
プラグイン有効化

インストールが完了したら、有効化をクリックします。

Simple Calendarの設定

上記で取得した「APIキー」をプラグインに登録します。

カレンダーの設定画面で、Google API キーを記載して変更を保存します。

Googleカレンダーの連携

次に、プラグイン側でカレンダーを新規作成します。

STEP
カレンダーの新規追加

管理画面 > カレンダー > 新規追加 > Googleカレンダー > Googleカレンダー設定の箇所で設定していきます。

STEP
Googleカレンダーの設定画面から、カレンダーIDを取得

お使いのGoogleアカウントでカレンダーを開き、公開用のカレンダーを作成します。

作成したカレンダーの設定から、アクセス権限の設定にある「このカレンダーを一般公開する」にチェックを入れます。

設定画面の下の方に表示される「カレンダーID」をコピーします。

この「カレンダーID」をプラグイン側に登録して連携させます。

カレンダーの表示方法

カレンダーの表示場所は、ショートコードまたはウィジェットで指定できます。

  1. ショートコード
  2. PHPコード
  3. ウィジェット

ショートコード

カレンダーの作成画面の右側に表示されるショートコードを記事に貼り付けると記事にカレンダーを表示できます。
※IDの数字は変更して利用してください。

カレンダーのIDは、すべてのカレンダーから一覧上で確認、コピーができます。

PHPコード

WordPressのテーマファイルに直接記述する場合は、下記のPHPコードで表示できます。
※IDの数字は変更して利用してください。

<?php echo do_shortcode(''); ?>

ウィジェット

ウィジェットを利用してカレンダーの表示位置を指定できます。
サイドバーやフッターなどに小さなカレンダーを表示したい場合に活用しましょう。

  • URLをコピーしました!

この記事を書いた人

埼玉県川口市で、自営業や起業家のホームページ制作を行っいます。
Web制作会社に7年務めたのち独立。Web制作歴12年、2500件以上のサイト制作に携わり、WordPressサイトを得意とし「作って終わり」にしない、結果が出るサイトであることを大切にしてます。「10人いれば10通りの最適なサイトがある」という信念のもと、型にハマったサイトづくりではなく、マーケティングから考えた、その人のビジネスにとって一番最適なサイトをご提案。技術面で不安のあるWebデザイナーのシステム面のサポートも行っております。

目次