[WordPress.com] Google カレンダーのデータから予定表を生成することができるウィジェット「今後のイベント」とショートコード「upcomingevents」

最終更新日：2015-12-19

今後のイベントはありません

以前から、「今後のイベント」というウィジェットがあったのですが、使い方がよくわからず、ずっと放置していたのですが、

以下のマニュアルを見てみると、どうやら Google カレンダーが表示されそうな感じで、試してみたらできたので、その覚書です。

First, you will need to get an iCalendar link. Google Calendar is a free calendar application from Google you can use to create a calendar and get an iCalendar Feed URL.

Upcoming Events — Support — WordPress.com

本来であれば自分自身の Google カレンダーを使いたいところですが、私自身はスケジュール管理に iPod touch のアプリしか使っておらず、データがほとんどなく、サンプルとして使うとわかりにくくなってしまうので、勝手ながら、以下のサイトからアクセスできる WordPress イベントカレンダーを使わせてもらうことにしました。

WordPress › 日本語

「WordPress イベントカレンダー」ボタンをクリック。

すると、Google カレンダーが表示されるので、右下の「Google カレンダー」ボタンをクリック。

「はい、このカレンダーを追加します。」ボタンをクリックで、

WordPress のイベントスケジュールが自分の？ Google カレンダーに追加されます。

追加された WordPress イベントカレンダーの「カレンダー設定」をクリック。

「カレンダーのアドレス」の「ICAL」ボタンをクリック。

表示されたアドレスをコピーし、

WordPress.com のウィジェット「今後のイベント」の「iCalendar フィード URL」の欄に貼りつけ、適宜、表示する項目を設定し、「保存」ボタンをクリックすると、

サイドバー等に Google カレンダーに入力してある予定が表示されます。なお、Google カレンダーにデータを追加してすぐに反映されるものではないようです。

一方、記事の方に以下のような感じの記述をすると、

[upcomingevents url="https://www.google.com/calendar/ical/wpja.team%40gmail.com/public/basic.ics" number="5"]

以下のような感じで表示されます。table タグで構成されています。

今後のイベントはありません

なお、以下の CSS を CSS スタイルシートエディターに追加すると、

/* ウィジェット「今後のイベント」の項目の日本語化（ie 8 等を除く） */
.upcoming-events th:nth-child(1),
.upcoming-events th:nth-child(2),
.upcoming-events th:nth-child(3),
.upcoming-events th:nth-child(4) {
position: relative;
}

.upcoming-events th:nth-child(1):before {
content: '場所';
position: absolute;
background-color: white;
width: 100%;
}

.upcoming-events th:nth-child(2):before {
content: '日時';
position: absolute;
background-color: white;
width: 100%;
}

.upcoming-events th:nth-child(3):before {
content: '概要';
position: absolute;
background-color: white;
width: 100%;
}

.upcoming-events th:nth-child(4):before {
content: '内容';
position: absolute;
background-color: white;
width: 100%;
}

英語の項目を日本語にすることができます（ie 8 等を除く。2013 年 7 月 11 日現在）。