案件に使う予定があって、GoogleCalendarとWordpressの連携について調べてみました。
GoogleCalendar標準の機能を使う場合
そもそもGoogleCalendarは標準で貼付け機能を有しており、表示する情報を取捨選択した上で、貼付けるコードを取得してコピペするだけで、任意のページに挿入することができます。手順は以下の通りです。
1.Googleカレンダーを開いて、左カラムに表示されているカレンダー一覧から、表示したいカレンダーの▼をクリックして、設定画面に入ります。
2.中央付近に「このカレンダーを埋め込む」という設定項目があり、特にカスタマイズの必要がなければここに表示されているコードを貼付ければ設置は完了です。この場合の表示サイズは800×600となっているようです。今回僕はテキストベースのリスト形式で表示する必要がありましたので、さらにカスタマイズすることにします。右側にある「色やサイズなどをカスタマイズします」をクリックして、カスタマイズ画面に入ります。
3.タイトルやボタンの有無、表示形式などが選べます。今回はリスト形式を選択し、サイズは600×300にしました。他にも「週の開始日」や「言語」などが選べます。貼付け用のコードは右上に表示されていますので念のため「HTMLを更新する」を押してからコピーして、Wordpressでページの本文に貼付けます。
4.プレビューすると、表示されているはずです。上記の設定だと表示イメージはこんな感じ。
これで一応の目的は果たせました。でもこれ、iframeなので、Google側が用意した以上のカスタマイズが基本的にできません。見た目をCSSで変えたりしたい場合にはちょっと困ります。そこで、次にプラグインを試してみました。
wpng-calendar
GoogleCalendarを取得してリスト形式で表示する為のプラグインがありました。
ダウンロードは以下から
http://code.google.com/p/wpng-calendar/downloads/list
設置手順は以下の通りです。
1.GoogleAPIKeyを取得。
Google Data APIここから取得します。
2.プラグインを設置して有効化します。手順は一般的なプラグインと同様です。
3.設定＞WPNG Calendar Pluginを開いて、Google GDATA API Keyの欄に先ほど取得した値を入力します。
4.同画面で、Google Calendar FeedにURLを入力します。URLは、GoogleCalendarの設定が面で先ほどコードをコピーした箇所の下、「カレンダーのアドレス」のXMLがそれにあたります。コピペした後、URLの末尾を「basic」から「full」に書き換えてください。
5.その他の設定項目を入力します。ラジオボタンでの設定は今回関係ないと思って特に触らずにいたのですが、選択がされていないとカレンダーが表示されません（ここで結構長くひっかかりました）必ず、どちらかを選択するようにします。
6.カレンダーを表示したいページ用に新規ページ（投稿だとうまく行かないようです）を開き、カスタムフィールドに以下を設定します。
名前：show-wpng-calendar
値：任意の数値（何週表示するか）
7.保存してプレビューすると、カレンダーがリスト形式で表示されます。
こちらはjsで吐き出されてソースが直に書かれる形式ですので、CSSでカスタマイズ可能です。でも、デフォルトだと本文を上書きしてしまうようなので、本文プラスこれを表示したいなんてときは、テンプレート側でもカスタマイズが必要そうです。
駆け足で書きました。後日、見た目をもう少し整理したいなと思います。