,

Googleカレンダー

¥0.00

Google カレンダーの予定をサイト上に表示するプラグイン

商品コード: google-calendar-events カテゴリー: ,

あなたのサイトにもっと便利なカレンダーを表示しませんか?

Googleカレンダー は、Google カレンダーの予定をサイト上に表示できるプラグインです。

Google カレンダーとWordPress 両方にイベント情報を入力するのは手間がかかります。

しかし、このプラグインを使えば、Google カレンダーに入力したイベント情報や予定を、そのままサイトで掲載できます。

Google カレンダーと連携

Google カレンダーに入力したイベント情報や予定を、そのままサイトで掲載できます。

月間カレンダーやリスト形式の予定表を設置できます。

WordPressにわざわざスケジュールを入力する手間を省きます。

キャンペーンなど、イベントスケジュールを簡単に掲載しましょう。

例えば、フィットネススタジオのサイトなら開講クラスの情報を掲載したり、ライブハウスのサイトならバンドのスケジュールを掲載したり、あなたのサイトに合わせて活用できます。

サイトのテーマに合わせたデザイン

設置されるカレンダーは、WordPress のサイトで利用されているテーマに応じてデザインが切り替わります。

そのため、自分の好きなテーマに合ったデザインのカレンダーが表示されます。

Googleカレンダー を活用し、あなたにとってもユーザーにとっても使いやすいサイトにしましょう。

Googleカレンダーの使い方

 

Goolgleアカウントとの連携

Googleアカウントと連携させるには、Google Developers Consoleサイトへ移動して、Google API Keyを取得が必要です。

  1. Google API Keyを取得します。
    ・プロジェクトの作成:プロジェクト名、規定に同意
    ・Google  APIs > Calendar API > 有効
    ・API Keyを作成
    ・API Keyを取得
  2. 取得したGoogle API Keyを入力
    サイドメニュー > カレンダー > 設定 > イベントソース > Google APIキーへ入力
    ※エラーが出たら、同じ方法で新しくAPIキーを取得する
  3. 設定を保存

 

カレンダーの設定

Googleカレンダーをサイトに表示するためにGoogleカレンダーIDを確認します。
※Googleカレンダーを使用するには、Googleカレンダーの設定を「公開」にします。

 

カレンダーID

  1. Googleカレンダーアプリを開きます。
    Simple-Calendar_Googleカレンダーアプリを選択
  2. 設定をクリックします
    Simple-Calendar_Googleカレンダーアプリ>設定
  3. 統合するカレンダーの設定をクリックします。
    ※ここでは日本の祝日カレンダーの設定をクリック
    Simple-Calendar_Googleカレンダーアプリ>設定>カレンダーの設定
  4. 設定リストから、[カレンダーの統合] をクリックします。
    カレンダーの統合の項目に [カレンダーID] が表示されます。
    Simple-Calendar_Googleカレンダー>設定>カレンダー統合>カレンダーID
  5. このカレンダーIDを控えておきます。
    (このIDは次項のカレンダーの作成で必要です。)

 

カレンダーの作成

カレンダーには他の投稿と同様にタイトルを付けることができますが、イベントを表示するには、設定画面の下部にあるパネルにあるいくつかの設定を構成する必要があります。

  1. サイドメニュー > [カレンダー] > [新規追加] をクリックします。
    カレンダーの名前を入力
    設定画面が表示されます。
    Simple-Calendar_2カレンダー設定
  2. [イベントソース] をプルダウンリストから選択します。
    デフォルトでは「Googleカレンダー」と「グループ化されたカレンダー」の2つの選択肢があります。
    Simple-Calendar_3カレンダー設定>Googleカレンダー

    • Googleカレンダー
      あなたが公開しているGoogleカレンダーのイベントを表示する場合は [Googleカレンダー] を選択します
    • グループ化されたカレンダー
      あなたが利用している複数の既存カレンダーをまとめて表示する場合は [グループ化されたカレンダー] を選択します。
      (既存カレンダーの参照元は問わない)
  3. 設定画面 [カレンダー設定] > 各項目(以下4項目)について設定します。
    • 履歴
      Simple-Calendar_4-1カレンダー設定項目
    • 外観
      Simple-Calendar_4-2カレンダー設定項目外観
    • Googleカレンダー
      重要:Googleカレンダーのイベントを表示するために、有効なGoogleカレンダーIDの項目に入力してください。
      取得方法はこちら
      Simple-Calendar_4-3aカレンダー設定項目Gカレンダー
    • 高度
      Simple-Calendar_4-4カレンダー設定項目高度な設定
      作成したカレンダー確認します。
  4. ① [下書きとして保存] をクリック:作成したカレンダーが下書きとして保存されます。
    ② [プレビュー] をクリック:作成したカレンダーの表示ができます。
    Simple-Calendar_6カレンダー(プレビュー)
    ③ [公開] をクリックします。

 

以上の手順でカレンダーの作成を行います。

 

カレンダーの設置

  1. サイドメニュー > [外観] > [ウィジェット] > [Googleカレンダー] をドラッグして表示させたい場所へドロップします。Simple-Calendar_カレンダー表示_1ウイジェット
  2. 表示名と表示させたいカレンダーをプルダウンメニューからクリックして選択します。Simple-Calendar_カレンダー表示_2ウイジェット保存
  3. [ライブプレビュー] をクリックして表示を確認します。
    Simple-Calendar_カレンダー表示_3ライブプレビュー

 

以上の手順でカレンダーの設置を行います。