「XO Event Calendar」は、営業日カレンダーとしての利用はもちろん、イベントの開催スケジュールを設定することもできるプラグイン。
まずは完成形からどうぞ。
目次
インストール方法
WordPress のダッシュボードにて、「プラグイン」＞「新規追加」、検索窓に「XO Event Calendar」と入力。
「今すぐインストール」をクリック・有効化します。
設定方法「休日設定」
WordPress のダッシュボード内、「設定」＞「イベント」＞「休日設定」。
「休日を設定」をクリックして新しい休日を作成します。
休日の名前は “英小文字、数字およびハイフンのみ” なので、ここでは “holiday” として「作成」。
元の画面に戻ったら「編集する休日を選択」で “holiday” が選択されていることを確認します。
休日項目
| タイトル | カレンダー左下に表示されます。デフォルトの表示は “定休日” 。 |
|---|---|
| 週定期 | 毎週決まった曜日が休日になる場合には曜日にチェックを入れます。 |
| 臨時日 | 臨時休業、夏季休業など日付を指定します。記述の仕方は “2021-07-01” 。 |
| 取消日 | 週定期で指定した休日に臨時営業する場合に指定します。記述の仕方は “2021-07-01” 。 |
| 色 | 休日の色を指定します。 1つのカレンダーに複数の休日設定をまとめて表示させるような場合、色分けも可能。（後述します。） |
カレンダーをウェブページに表示する
休日項目の設定ができたら、ウェブページにカレンダーを表示します。
基本となるショートコード
[xo_event_calendar]
休日設定 “holiday” を指定して表示
[xo_event_calendar holidays="holiday"]
複数の休日設定を 1つのカレンダーにまとめて表示
[xo_event_calendar holidays="holiday,am,pm"]
月送り非表示
[xo_event_calendar holidays="holiday" navigation="false"]
カレンダー2ヶ月分表示 & 月送り前後 1ヶ月まで
[xo_event_calendar holidays="holiday" previous="1" next="1" months="2"]
| holidays=”〇” | 休日設定を指定する |
|---|---|
| navigation=”false” | 月送り機能を使用しない（非表示にする） 表示設定 navigation=”true” は省略可能 |
| previous=”〇” | 何ヶ月前のカレンダーまで表示させるか |
| next=”〇” | 何ヶ月先のカレンダーまで表示させるか |
| months=”〇” | 何ヶ月分のカレンダーを表示させるか |
カレンダーを 2ヶ月分表示して、さらに横並びにする
PC ではカレンダーを 2ヶ月分を横並び、599px以下では縦並びにします。
style.css に追加して下さい。
/* XO Event Calendar ------------------------- */
.xo-event-calendar {
margin: 0 auto;
}
.xo-months {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.xo-month-wrap {
width: 47%; //カレンダーの横幅の最大を47%とする
}
@media screen and (max-width: 599px) {
.xo-event-calendar {
width: 70%; //カレンダー全体の表示幅の最大を70%とする
}
.xo-months {
display: block; //カレンダーを縦に並べる
}
.xo-month-wrap {
width: 100%; //カレンダーの横幅の最大を100%とする
}
}
スマホではカレンダーの表示は 1ヶ月分だけとする場合には、以下のコードも追加します。
@media screen and (max-width: 599px) {
.xo-month-wrap:last-child {
display: none;
}
}
設定方法「イベント設定」
WordPress のダッシュボード内、「設定」＞「イベント」＞「カレンダー」をクリック。
投稿のカテゴリー設定と同じ画面が表示されるので、「名前」「スラッグ」を入力します。
「色」の項目で選択された色がカレンダー上に表示されるので、必要に応じて変更して「新しいカテゴリー」を追加。
イベントを表示
「イベント」＞「新規追加」をクリック。
こちらも投稿と同じ画面が表示されるので、見出しと本文を入力。
同じページの中に表示されている「イベント詳細」でイベント開催期間を設定します。
「ショートタイトル」に表示されたものがカレンダー上に表示されます。
カレンダーをウェブページに表示する
基本は休日設定のときと同じなので省略します。
カレンダーをウェブページに表示する方法をもう一度見る。（上に戻る）
実際のカレンダーは、弊社が運営する別サイト「選手のぼり専科」でご確認頂けます。
https://noborisenka.com/