ブログ

WordPressでイベントスケジュールプラグイン「The Events Calendar」のテーマを編集するには

Yuki Motomiya
Director

某案件でWordpressにカレンダーを実装する事になり、自作は大ごとになるので「The Events Calendar」というプラグインを利用しました。

今回はこのプラグインの簡単な紹介とオリジナルテーマの作成方法を軽くまとめます。

The Event Calendarについて

The Event Calendarは名前の通りイベントカレンダーに特化したプラグインになります。

普通に作ると難しいカレンダーページを簡単に設置することができて、機能もカレンダーを表示だけでなく、イベントの特化した様々な機能が用意されてます。

  • カレンダー表示以外にも一覧表示や日ごとの一覧表示
  • 初期表示をカレンダー表示・一覧表示・日ごとの一覧表示選択
  • 閲覧ユーザーはカレンダーアプリと連動(iCal・Googleカレンダーなど)
  • 終了したイベント投稿に終了メッセージの表示、または一覧表示から自動的に非表示
  • イベント会場、参加費、開始・終了時間設定

など十分すぎるほど機能が充実しております。

※さらに有料版Events Calendar PROでは定期的に行われるイベントの登録や週表示なども使い勝手がもっと良くなる機能が追加されます!フー!

オリジナルテーマ作成

標準テーマの場所

The Event Calendarにはプラグイン標準のテーマが用意されて以下のディレクトリに格納されてます。

wordpress/wp-content/plugins/the-events-calendar/views

viewsディレクトリの中にカレンダーページの表示に関わるファイルがあるのでこちらを編集、、

したいところですが、プラグインディレクトリ内にあるデータを編集してしまうとアップデートしたら編集したデータがまるまる差し代わってしまうことがあるのでpluginsディレクトリから直接編集は避けたい。

(The Event Calendarに限らず他のプラグインも直接pluginsディレクトリで編集しないように)

編集するには

pluginsディレクトリにある以上編集は直接編集出来ませんが、優秀なプラグインなので対策は用意されてます。

現在使用中のテーマディレクトリの中にtribe-eventsディレクトリを作成して、上記で説明したviewsディレクトリ内のデータをコピー。

先ほど作成したtribe-eventsディレクトリにviewsディレクトリからコピーしたファイルを格納。

最後にプラグインの設定画面「ベーシックテンプレート設定」にて2箇所選択すれば晴れてテーマを弄り回せるようになります。

  1. イベントテンプレートに使用するデフォルトスタイルシート
    スケルトンスタイル
  2. イベントテンプレート
    デフォルトイベントテンプレート

各種テーマファイルの役割

The Event Calendarの標準テーマで用意されているファイルが多いです。

それぞれ目的に合ったテーマファイルの編集を行いますが、ファイルが多すぎてわからない!

ということで以下テンプレートの役割リストを作成してみましたので参考まで。(公式の直訳なので日本語おかしかったら教えてください)

Themer’s Guide

イベントの単体表示用ファイル(詳細ページ)

  • single-event.php
    個々のイベントを表示するために使用。
  • modules/address.php
    イベント会場の住所等を表示するために使用。
  • widgets/calendar-widget.php
    WordPressウィジェット機能で使用。
  • modules/meta.php
    single-event.php内でイベントのメタ情報を表示するために使用。
  • modules/meta/details.php
    メタセクション内に開始時間や終了時間などの情報を追加します。
  • modules/meta/map.php
    メタセクション内に地図をレンダリング。
  • modules/meta/organizer.php
    オーガナイザー情報をメタセクションに追加。
  • modules/meta/venue.php
    会場情報をメタセクションに追加。

Day View(日ごとの表示)

  • day.php
    日ごとの表示に使用される親ファイル。
  • day/content.php
    日ごとの表示に使用するメインテンプレート。(タイトル・ナビ・ループなど)
  • day/nav.php
    次回開催イベントと以前の開催イベントのリンク表示。
  • day/loop.php
    イベント投稿のループに使用。
  • day/single-event.php
    当日開催イベント投稿に会場情報、各種メタ情報などを表示。

List View(一覧表示)

  • list.php
    一覧表示に使用される親ファイル。
  • list/content.php
    一覧表示に使用するメインテンプレート。(タイトル・ナビ・ループなど)
  • list/nav.php
    次のイベントリスト・前のイベントリストのリンク表示。
  • list/loop.php
    イベント投稿のループに使用。
  • list/single-event.php
    各イベント投稿に会場情報、各種メタ情報などを表示。

Month View(月別カレンダー表示)

  • month.php
    月別カレンダー表示に使用される親ファイル。
  • month/content.php
    月別カレンダーに使用するメインテンプレート。(タイトル・ナビ・ループなど)
  • month/mobile.php
    カレンダー表示のモバイル版を表示するためのテンプレート。
  • month/nav.php
    次の月と前の月のカレンダーリンク表示。
  • month/loop-grid.php
    イベント投稿のループに使用。
  • month/single-day.php
    カレンダー表示の日数など表示。
  • month/single-event.php
    カレンダー表示のイベント名、リンクなど表示。
  • month/tooltip.php
    カレンダーの日程にカーソルを当てると表示されるツールチップ様テンプレート。

モジュール

  • modules/bar.php
    カレンダーのメインナビゲーション。
  • modules/map.php
    単一のイベント、または会場アーカイブに埋め込まれたGoogleマップを表示するテンプレート。

埋め込みイベント

  • embed.php
    埋め込み基本テンプレート。
  • embed/content.php
    埋め込みビューのコンテンツテンプレート。
  • embed/cost.php
    埋め込みビューのコストテンプレート。
  • embed/footer.php
    埋め込みビューのフッターテンプレート。
  • embed/image.php
    埋め込みビューのおすすめの画像テンプレート。
  • embed/meta.php
    埋め込みビューにメタ詳細を表示するためのテンプレート。
  • embed/schedule.php
    埋め込みビューのスケジュール詳細テンプレート。
  • embed/venue.php
    埋め込みビューの会場情報。

ウィジェット

  • widgets/list-widget.php
    リストウィジェット用のテンプレート

PHPのバージョンとThe Events Calendarについて

2019年3月からThe Events CalendarはPHP 5.6より前のバージョンはサポート外になるそうです。
PHPバージョンが5.6以下の方はダッシュボードに警告が表示されているので確認してみてください。

以上、The Events Calendarインストールしてスケジュールがっつり埋めちゃいましょう!