最終更新日：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.
本来であれば自分自身の Google カレンダーを使いたいところですが、私自身はスケジュール管理に iPod touch のアプリしか使っておらず、データがほとんどなく、サンプルとして使うとわかりにくくなってしまうので、勝手ながら、以下のサイトからアクセスできる 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 日現在）。
以上、Google カレンダーから予定表を生成することができるウィジェット「今後のイベント」とショートコード「upcomingevents」についての覚書でした。
