最終更新日: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」についての覚書でした。
「[WordPress.com] Google カレンダーのデータから予定表を生成することができるウィジェット「今後のイベント」とショートコード「upcomingevents」」への1件のフィードバック