教室のレッスン予定をカレンダー表示。実案件を想定して「Event Organiser」を解説｜WordPress
ヨガ教室やダンス教室のレッスンをカレンダー表示させるのにいいプラグインないかな？
そんなときに見つけたのが「Event Organiser」です。
簡単にスケジュールの追加ができ、そのままでもデザインがシンプルでいい感じ。
- 一日に複数の予定を入れたい。
- クラスごとに分かりやすく色分けしたい。
- 繰り返し設定がしたい。
- クラスごとに絞り込みがしたい。
- デザインをサイトのテイストに合わせたい。
- 納品後、クライアント様が更新できるものがいい。
など柔軟性のあるプラグインをお探しの方にオススメです。
ただ細かくカスタマイズしようとすると、英語のサイトを読み解く必要があり少し大変でした。
なので基本の解説をはじめ、細かいカスタマイズまでより詳しくまとめていきます。
目次
基本的な導入の流れ
あとで実務を想定して詳細に解説するので、まずはざっくりとした流れを書いておきます。
01. プラグインをインストール・有効化
「Event Organiser」 プラグインをインストール・有効化します。
サイドメニューに「イベント」という項目が追加されます。
ここにイベントを追加していくことでカレンダーが出来上がります。
02. カテゴリーを設定する
カテゴリーを設定することで、クラスごとに色分けをしたり絞り込み表示が可能になります。
最初に設定しておくと手間が減ります。
03. イベント（＝予定）を作成する
「新規追加」をクリックすると、イベントが追加できます。
必要箇所を入力して、公開ボタンを押します。
あとで詳しく解説します。
このプラグインはもともとイベントカレンダーのプラグインのため、single-event.phpを作ることでイベント詳細ページの表示が可能になります。
しかし、今回は詳細ページが必要ない想定で解説しています。
詳しくはwp-content/plugins/event-organiser/templates内にあるファイルを参考にしてみてください。
カスタム投稿をベースに作られているので、テンプレートファイルを作ることで自由に表示をカスタマイズすることができます。
04. ショートコードを埋め込む
ショートコードを埋め込むことでカレンダーが生成されます。
基本のコードはこちら。
[eo_fullcalendar]固定ページの場合、「ショートコード」のブロックを選択しコードを記述します。
これだけでページにカレンダーが表示されます。
このままでも使えるシンプルなデザインになっています。
実案件を想定した実装をしてみる
次に、より実案件に近い形で詳細を解説していきます。
簡単に条件を設定してみます。
- 初級・中級・上級クラスを設ける。
- 初級・中級は、月・金の週2でそれぞれ朝・昼のレッスン。
- 上級は、月・水・金の週3で夜のレッスン。
- クラスのない時間は個人レッスンが入るので、毎日のオープン時間を表示させたい。
- 土日はカレンダーの色を変えたい。
- 祝日もカレンダーに表示させたい。
01. カテゴリーを設定する
今回はクラスごとに色分けするため、
「初級」「中級」「上級」「オープン時間」「祝日」の5種類作成します。
イベント ＞ カテゴリー に移動して、名前・スラッグ・色を入力し、
カテゴリを追加します。
残り4つも同様に追加します。
02. イベントを作成する
カテゴリーと同様、 「初級」「中級」「上級」「オープン時間」「祝日」の5種類作成します。
初級、中級、上級クラスの作成
イベント ＞ 新規追加 に移動し、タイトルとカテゴリーを入力します。
下に行き、イベント詳細を入力します。
開始日時は繰り返す最初の日を設定、時間はクラスを行う10:00～12:00を設定します。
繰り返し設定は「週ごと」にし、毎週行うので「1週」ごとに。
クラスを行う曜日を選択し、とりあえず年内まで繰り返す設定としました。
最後に公開ボタンを押します。
同様に、「中級クラス」「上級クラス」も設定します。
オープン時間の作成
時間を直接表示させたいので、タイトルには時間を入力します。
（カテゴリーも同様に選択します。）
表示の並び順を調整したいので、時間は一番早い時間「12:00AM」を設定してあげます。
繰り返しは「週ごと」で、オープンしている曜日を選択します。
不定休がある場合、「繰り返しイベントを追加／削除」の「日付を表示する」でひとつひとつ調整できます。
祝日の作成
祝日を自動で入れることはできませんので、イベントを作成して祝日を指定していきます。
タイトル・カテゴリーは「祝日」にします。
表示を一番上にしたいので、日時は「終日」にチェックを入れます。
繰り返しを「カスタム」にして、祝日の日を選択します。
03. ショートコードで表示してみる
ここでいったんショートコードを固定ページに埋め込んで、表示を見てみます。
[eo_fullcalendar]
デフォルトでの表示はできました。
このままでは少し見づらいので、最後に細かい部分を調整します。
04. CSSで細かいデザイン調整をする
開始時間～終了時間を表示させる
各予定の開始時刻が表示されているので、デフォルトの時間は非表示にして、
タイトルに時間を含めてしまうことにします。
まずCSSに以下の記述を追加し、今の開始時刻を非表示にします。
▼ CSS
.fc-day-grid-event .fc-time {
display: none;
}その後、各イベントのタイトルを
「初級クラス(10:00～12:00)」「中級クラス(13:00～15:00)」「上級クラス(19:00～21:00)」に変更しておきます。
土日の背景色を変える
土日の枠の色を変えて見やすくするため、CSSに以下コードを追記します。
▼ CSS
/*「土」の見出しの背景色*/
.eo-fullcalendar .fc-day-header.fc-sat {
background: #d2e8ff;
}
/*「日」の見出しの背景色*/
.eo-fullcalendar .fc-day-header.fc-sun {
background: #ffd0d0;
}
/*「土」の枠の背景色*/
.eo-fullcalendar .fc-bg .fc-sat {
background: #f5faff;
}
/*「日」の枠の背景色*/
.eo-fullcalendar .fc-bg .fc-sun {
background: #fff2f2;
}paddingを整える
予定の余白が狭すぎるので、少し余白を空けてあげます。
▼ CSS
.eo-fullcalendar .fc-event {
padding: 0.25em;
}詳細ページに飛ばないようにする
詳細ページは必要ないので、CSSで詳細ページに飛べないようにします。
▼ CSS
.eo-fullcalendar .fc-event {
pointer-events: none;
}完成
完成したのがこちら。
キレイに見やすくなりました。
ショートコードのカスタマイズ一覧
ここまで基本的なカレンダーを表示する方法を説明してきましたが、
「Event Organiser」はショートコードをカスタマイズすることで、様々な表示のさせ方が可能です。
がしかし！！
記事が長くなってしまったので、次回、別記事でまとめようと思います。
WordPressの勉強するならこの一冊
私自身、この1冊から始めて今でもずっと見返す一冊です。
