copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2019/03/08

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

Written by Yuki Motomiya

  • Wordpress
  • Plugin

INDEX

    某案件で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インストールしてスケジュールがっつり埋めちゃいましょう!

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View