Google Calendar List View

イベントカレンダー等公開された Googleカレンダーを WordPress 上で新着情報と同じように一覧表示したいことを実現するプラグインです。ショートコードとして利用できます。さらに多言語の場合、カレンダーも複数あるかもしれないなと思って、複数指定できるようにしてます。

Google Calendar List View

変更履歴

  • 2017.07.21: 2.1公開
    • ショートコードに「lang」を追加
  • 2017.06.26: 2.0公開
    • 安全面の問題から「lvgc_output_data」「lvgc_gc_data」フックを削除
    • 設定名の修正
    • 「lvgc_each_output_data」フックのために、ショートカットオプション「hook_secret_key」を追加
  • 2017.06.25:    1.5, 1.51公開
    • ドキュメントリンクの翻訳データを追加(1.51)
    • 翻訳問題の修正(1.5)
    • ドキュメントの修正(1.5)
  • 2017.04.18: 1.3, 1.4, 1.41, 1.42公開
    • フック「lvgc_each_output_data」を追加(1.4)・修正(1.41, 1.42)
    • html_tag 初期値の問題を修正(1.3)
    • id オプションを追加(1.3)
  • 2017.04.11: 1.2公開
    • 2つのフック「lvgc_output_data」「lvgc_gc_data」を追加
    • タイムゾーンまわりの修正(date関数の代わりに、current_time, get_date_from_gmt関数へ変更)
    • 開催中のイベント(日で判断)については、html_tag に対して list-view-google-calendar-holding というclassを追加し、開催中のイベントの強調表示をCSSで可能とした。
  • 2017.04.10: 1.1公開
    • 4つのショートコードを追加、max_view, html_tag_class, html_tag_date_class, html_tag_title_class
  • 2017.04.09: 1.0公開

ショートコード

  • <ul>[gc_list_view]</ul>

Googleカレンダーをサイトに1つしか活用しないなら、Google Calendar API KeyとGoogle Calendar ID の2つの設定をするだけで、上記ショートコードは動作します。後から複数指定したい場合には、ショートコードの引数として別途指定できます。
デフォルトで利用する場合には、「テキスト」モードで設定してください。理由は、汎用性を保つために、<ul></ul>タグを別途つける必要があるためです。それが面倒な場合には

  • [gc_list_view html_tag=”p”]

を使えば、<p>タグで出力されますので、ビジュアルモードで問題ありません。
あるいは後述するフックを使えば、出力データを自分のテーマに合わせたカスタマイズが簡単にできます!

ショートコードオプション(Version 2.1)

Googleカレンダーから、「現在日付」を起点として未来のカレンダーを10件取得して表示します。日付フォーマットは、YYYY.MM.DD(2017.04.10)です。表示順番は、「起点」をベースとした日付の昇順です。

  • [gc_list_view start_date=”YYYY-MM-DD/ALL” end_date=”YYYY-MM-DD” date_format=”Y.m.d” orderbysort=”ascending/descending” g_id=”Google Calendar ID” g_api_key=”Google Calendar API Key” max_view=10 html_tag=”li/p/dd” html_tag_class=”” html_tag_date_class=”” html_tag_title_class=”” id=”” hook_secret_key=”” lang=””]

だけのオプションを用意しました。オプション設定は他の設定よりも優先されます。

  • start_date = データ取得の「起点」を設定します。ALLだと一番古いカレンダーデータを起点とします。strtotime のフォーマットでの記述できます。
  • end_date = データ取得の「終点」を設定します。デフォルトは制限なしで、設定するとそこまでのデータを取得します。strtotime のフォーマットでの記述できます。
  • date_format = データ表示時の日付フォーマットを変更できます。dateフォーマットを記述できます。デフォルトは Y.m.d = YYYY.MM.DD です。Y-m-d = YYYY-MM-DDなどのように変更できます。
  • orderbysort = 「起点」をベースにした表示時の日付ソートです。デフォルトは昇順です。descending を設定することで降順にできます。Google Calendar API v3では、この降順設定が削除された(Google Calendar API v2では ordersortがあった)ため、一旦データを取得した後にプラグイン側でソートしなおしています。ascending、descending以外の設定をした場合には、ascendingがセットされます。
  • g_id = Google Calendar IDを個別に変更したいときに設定できます。複数のカレンダーを使いたい場合に指定します。
  • g_api_key = Google Calendar API Keyを個別に変更したいときに設定できます。
  • max_view = 最大表示件数であり、この件数分を Googleカレンダーから取得します。
  • html_tag = 出力データの先頭、末尾に設定するタグを指定します。li, p,  ddの3つを指定できて、それ以外の値がセットされた場合には<li>がセットされます。 class=”list-view-google-calendar”>がセットされます。
  • html_tag_class = html_tag に対する classのセットです。デフォルトは、list-view-google-calendar です(<html_tag class=”list-view-google-calendar “>***</html_tag>)
  • html_tag_date_class = 日付部分に対する classのセットです。デフォルトは、list-view-google-calendar_date です(<span class=”list-view-google-calendar_date”>日付</span>)
  • html_tag_title_class = タイトルに対する classのセットです。デフォルトは、list-view-google-calendar_title です(<a class=”list-view-google-calendar_title” href=”リンク”>タイトル</a>)
  • id = もしフック利用時に、各ショートコードにおいてカスタマイズを変更したければ、この id を活用してみてください。
  • hook_secret_key = フックを安全に利用するためのキーです。フックを利用する場合には指定した上で、フック側でも値を返してください。詳しくは、末尾のフック項目参照。
  • lang = Googleカレンダーの説明文に #lang [値] が存在し、値が一致したものだけ表示。もし一つのGoogle カレンダー から 英語のイベントのみを出力したい場合、英語のイベントの説明文に #lang en を含めておき、ショートコードオプションとして lang=”en” 追加してください。

Google Calendar API Keyの生成方法

英語ですが、画像を加えてとても分かりやすく説明されています。これをみれば生成できると思います。なお APIは一日100万クエリまでの制限があります。それ以上使いたい場合には、Google Calendar API Usage Limits ページを参考にしてください。

Google Calendar ID の確認方法

英語ですが、画像を加えてとても分かりやすく説明されています。これをみればきっと探せるはず!

具体例を出してみます!

下記の例では、 「Public Calendar 1」「Public Calendar 2」という2つの公開カレンダーを用意してます。

「Public Calendar 1」

  • 2017.04.07 TEST Event 3 on Public Calendar 1
  • 2017.04.04 TEST Event 2 on Public Calendar 1
  • 2017.04.02 TEST Event 1 on Public Calendar 1

「Public Calendar 2」

  • 2017.04.14 TEST Event 3 on Public Calendar 2
  • 2017.04.11 TEST Event 2 on Public Calendar 2
  • 2017.04.10-12 TEST Event 1 on Public Calendar 2

とデータを入れています。上記日付は「起点日」をいれてますが、実際には終日、日時、複数日にまたがるケースを入れ込んでいます。

 

これに対して、下記のショートコードを固定ページの「テキストモード」で入れてみます。※Google Calendar IDは伏せ字にしてます。

「Public Calendar 1」
<ul>
[gc_list_view g_id=”◯◯@group.calendar.google.com” start_date=”ALL” orderbysort=”descending”]
</ul>
「Public Calendar 2」
<dl>
<dt>List View of Google Calendar Events</dt>
[gc_list_view g_id=”◯◯@group.calendar.google.com” orderbysort=”descending” html_tag=”dd”]
</dl>

で実際の表示は下記の通りです。

スタイルシートがデフォルトなので <dd>が一行あいてますけれど、「Public Calendar 1」が<li>、「Public Calendar 2」が<dd>タグになっています。

もちろん、リンクをクリックしたら公開カレンダーの詳細表示画面が新規ウィンドウで開きます。

またPublic Calendar 1のほうは過去記事なので(実験時点で 2017.04.09)、start_date=”ALL” あるいは、 start_date=”2017-04-01″ など起点日をイベント日時より前にしておかないと過去イベントは表示されません。まぁ過去イベントを表示したくないなら不要ですけどね。

どんな設定があるの

WordPressの管理ダッシュボードの「設定」内に「Google Calendar List View Settings」があります。ここで基本的な設定ができます。

Google カレンダー API設定

出力時の設定

「起点日」を基軸とした日付のソート(昇順、降順)
HTMLタグの出力設定になります。いずれもショートコードのオプションでも指定できます。

フック& その他のお知らせ

フックの使い方

以下、サポートしているフックを テーマのための関数「functions.php」 内でどのように記述するかの例をあげておきます。 各フックを利用すると出力データを変更できるため、ショートコードに「hook_secrey_key」オプションを設定し、このhook_secret_key と、フック内から返す hook_secrey_key が同一である場合のみ有効になります。

フックで活用できる配列

$out_atts として受け渡されます。
extract($out_atts);
を使えばヒアドキュメント内で利用できます。

  • $start_date_num = 各イベントの開始日(Ymd)
  • $start_date_value = 各イベントの開始日(date_formatで指定したフォーマット)
  • $end_date_num = 各イベントの終了日(Ymd)
  • $today_date_num = 本日(Ymd)
  • $holding_flag = 各イベントが開催日なら true, そうでないなら false
  • $gc_link = 各イベントのGoogleカレンダーへのリンク
  • $gc_title = 各イベントのタイトル
  • $plugin_name = プラグイン名
  • $html_tag_class_c = クラス名(開催日 = ${plugin_name}_holding, 開催日以外 = $plugin_name)
  • $id = ショートコードオプション(id)
  • $lang = ショートコードオプション(lang)

lvgc_each_output_data

各イベントを出力する際のコードを変更できます。
デフォルトは、

  • <li class=”list-view-google-calendar”>日付 <a href=”Google カレンダーリンク” target=”_blank”>タイトル</a></li>
    (ただし、開催当日のみ <li class=”list-view-google-calendar_holding”>日付 <a href=”Google カレンダーリンク” target=”_blank”>タイトル</a></li>)

を出力するコードになっています。
これをそのままフックで書いてみると次のようになります。

まずショートコードとして

  • [gc_list_view *******  hook_secret_key=”hogehoge”]

を設定しておきます。重要なのは、hook_secrey_key を設定することです。

以下、テーマの functions.php に記載します。

add_filter( ‘lvgc_each_output_data’ , ‘lvgc_each_output_data_fix’ , 10 , 2 );

function lvgc_each_output_data_fix($out, $out_atts){
  extract($out_atts);
  $hook_secret_key = ‘hogehoge’;

    $out = <<< EOF___
 <li class=’$html_tag_class_c’>$start_date_value <a href=’$gc_link’>$gc_title</a></li>
___EOF
;

 return array(‘hook_secret_key’=>$hook_secret_key, ‘data’=>$out);
}

が最も単純な構成例かなと思います。

またショートコードごとに変更したければ、

[gc_list_view g_id=”hogehoge” id=”99″ hook_secret_key=”hogehoge”]

[gc_list_view g_id=”hoge” id=”hoge” hook_secret_key=”hogehoge”]

などのように ユニークな番号かキーワードである idをいれた上で、下記のようにすれば、 各ID だけに適用できるフックを作成できますよ!

add_filter( ‘lvgc_each_output_data’ , ‘lvgc_each_output_data_fix’ , 10 , 2 );

function lvgc_each_output_data_fix($out, $out_atts){
  extract($out_atts);
  $hook_secret_key = ‘hogehoge’;

   if ($id === ’99’):
      $out = <<< EOF___
 <li class=’$html_tag_class_c’>$start_date_value <a href=’$gc_link’>$gc_title</a></li>
___EOF
;
  elseif ($id === ‘hoge’):
<dd class=’$html_tag_class_c’>$start_date_value <a href=’$gc_link’>$gc_title</a></dd>

___EOF___;
  endif;

 return array(‘hook_secret_key’=>$hook_secret_key, ‘data’=>$out);
}

タイムゾーン処理に気をつけること

date や i18_date では WordPress におけるタイムゾーン処理ではうまくいかないか、面倒が発生します。のでタイムゾーン処理なんて考えたくないぜ〜って人には、次のWordPress専用関数を利用すると幸せになれます。

現在日時取得&日時フォーマット変換:current_time

  • $current_time = currentitme(“Y-m-d”); (2017-04-03 など年月日で取得する場合)

日時フォーマット変換:get_date_from_gmt

  • $start_date = get_date_from_gmt($item[‘start’][‘dateTime’], “Y-m-d”);

Googleカレンダーイベントの開始日時をタイムゾーンに配慮して、年-月-日で $start_date に入れる

まぁとこんな感じで、テンプレートであろうが、固定ページ、投稿ページ(カスタム投稿含む)のどこでも、「公開」されているGoogleカレンダーについては、一覧表示できるぜ〜ってことですね。

2017年6月26日 ドキュメント変更(2.0対応)
2017年6月25日 ドキュメント文章の変更
2017年4月20日 冒頭の文言を追加
2017年4月18日 フックに関する説明を追記
2017年4月17日 フックに関する説明を追記
2017年4月10日 バージョン1.2 の加筆
2017年4月10日 バージョン1.1 の加筆
2017年4月9日 @kimipooh

Pagetop