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

最終更新日:2015-12-19

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

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

adsfadfasd

以下のマニュアルを見てみると、どうやら 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 イベントカレンダーを使わせてもらうことにしました。

adgfadfa
WordPress › 日本語

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

adfadf

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

image

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

Google カレンダー

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

image

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

adsfadfa

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

adfasdfas

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

adfadfads

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

adfasdf

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

adsfasfads

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

[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 日現在)。

ショートコード「upcomingevents」の投稿テスト | Demo-1

rect3015

ショートコード「upcomingevents」の投稿テスト | Demo

以上、Google カレンダーから予定表を生成することができるウィジェット「今後のイベント」とショートコード「upcomingevents」についての覚書でした。

#2013