XO Event Calendarを使用したオリジナルカレンダーの設置方法
目次
出力イメージと注意点
出力イメージ
注意点
- カレンダーの中に文字を表示したりは出来ません(プラグインの機能的には本来できますがテンプレが対応していないため不可)。
- 祝日は自動で設定されないため、すべて手動で入力が必要になります。
- デフォルトのcssが強く効いておりデザインを思い通りに変更することが難しいため、設置する際は上記出力イメージをゴールと考えた方がよさそうです。
※functions.php内で強制的にプラグインのcssを切る記述を追記することも可能ですが、以前プラグインのアップデートでプラグイン内のcssのファイル名が書き換わり、デザインが崩れたことがあるためあまりお勧めしません。
上記の理由から、よっぽどの強いご要望でない限り、Googleカレンダーをご利用いただくことをお勧めします。
XO Event Calendarのインストール
プラグイン>新規プラグインを追加から「XO Event Calendar」を検索してインストールし、プラグインを有効化します。
休日設定
休日設定を行うには、管理画面イベント>休日設定を選択します。
選択すると、以下の画面のようになります。
ここに設定したい休日情報を入力します。各項目については以下の通りです。
項目 | 説明 |
---|---|
編集する休日を選択 | 初期項目は「all、am、pm」の三種類 編集したい休日をプルダウンで切り替えられます。 |
休日の名前 | 任意の名前(20文字以内、英小文字、数字およびハイフンのみ)に変更可能 ※カレンダー上には表示されません。ここで設定した休日の名前はショートコード内で使用できます。 |
タイトル | カレンダーに表示される名前 |
週定期 | 定休になる曜日がある場合に選択 |
臨時日 | 臨時休業となる日付を指定 例:2024-01-01 ※複数ある場合は改行して日付を入力 祝日はこちらのサイトからコピペいただくか、チャットGPTに書いてもらうと早いです。 |
取消日 | 週定期の曜日で休日を取り消す場合に指定 |
色 | カレンダーの各日付の背景色を指定 |
ショートコードを設定
休日設定が完了したら、カレンダーを表示させたいページにショートコードを貼り付けます。
▼固定ページや投稿ページに記述する場合
1 |
[xo_event_calendar] |
▼PHPファイル内に記述する場合
1 |
<?php echo do_shortcode( '[xo_event_calendar]' ); ?> |
オプションの設定
上記のショートコードに各オプションを指定していきます。
オプションなしだと、休日設定も何も反映されていない真っ白なカレンダーになります。
例えば先ほど設定した休日を表示させたい場合は、以下のようにショートコード内にオプションを追記します。
1 |
[xo_event_calendar holidays="am,pm,all"] |
オプションの説明は以下の通りです。必要に応じてオプションを追加してみてください。
オプション | 説明 |
---|---|
id | ページ内での重複使用は不可。省略時は「xo-event-calendar-1」 |
holidays | 表示する休日を指定。省略時は非表示 ※書く順番によって表示優先度が変わります。休日に設定した日付がかぶった場合、一番最後に書いた休日名に紐づくカラーが優先して表示されます。 |
previous | 前月への月送りできる月数を指定。省略時は無制限 |
next | 次月への月送りできる月数を指定。省略時は無制限 |
start_of_week | 週の始まり。0が日曜〜6が土曜。省略時は0(日曜) |
year | 最初に表示する年。省略時は現在の年 |
month | 最初に表示する月。省略時は現在の月 |
months | 表示する月数。省略時は1ヶ月 |
navigation | 月送りの矢印を表示するか否か。trueまたはfalse。省略時はtrue |
イベントの設定について
HEROの各テンプレートに対応していないため、基本的にイベントの機能は使用しないでください。
イベントを設定したい場合は、Googleカレンダーの機能内でうまく利用していただく形が良いかと思います。
XO Event Calendarを使用したオリジナルカレンダー掲載事例
サポート用ブックのカレンダー事例(オリジナルカレンダー)よりご確認ください。