最近、歯医者さんのサイトを制作することになり、日々の営業時間（診察または診療時間か。。。）をトップ画面に入れて欲しいとの依頼があった。
でもその歯医者さん、診療時間が3種類あって、お休みもかなり不定期な歯医者さんで、ちょっと面倒だなと思っていたら、WordPressのいいカレンダープラグインを発見した！
今まで「WP Simple Booking Calendar」っという海外製のWordPressプラグインを利用していたけど、紹介するこのカレンダープラグインは日本製。いろいろな意味で利用しやすい！
使い方の詳しい内容は本家のページにちゃんと日本語で説明があるので、もちろんそちらを参考に作業をしてみたよ。
XO Event Calendar プラグイン – Xakuro System
XO Event Calendar プラグインは、シンプルで簡単なイベント カレンダーです。
へぇー！日本製なんだね！
今回は歯医者さんだけど、店舗運営している人なんかはサイトのトップにカレンダーがあった方が便利だよね。特に日本人のお客さんを相手にしていると、こういうツールは必須かな。
どういう風に利用するかもあるけど、今回は日によってだいぶお休みとかのバラツキがあるから、どうしようかなって思ってたけど、この「XO Event Calendar」を利用したら簡単だったよ。
- 3種類の営業時間がある
- 定休日と別に、不定期で、突然のお休みがある
これらをカレンダーに反映する、っていう使い方での説明をするね。
まずはインストール！
プラグインから新規追加で「XO Event Calendar」を検索して「今すぐインストール」をして「有効化」する。
「イベント」タブが追加された。ここで「XO Event Calendar」の基本的な設定をします。
トップ画面に設置します！
もちろん上記ショートコードをページに設置することも可能ですが、
今回はトップページに入れてほしい、という内容でしたので、上記関数をindex.phpのカレンダーを設置したい部分に入れます。
オプションの設定方法は本家サイトを確認してね。上はページ送りをなしにして、2ヶ月分表示にしてる。
phpにソースを入れると上記カレンダーがトップページに追加されました。デフォルトでなぜか月のタイトルが表の下に設置されてしまった。こちらの回避方法は本家サイトに記載ありましたが、
を追加することで、
表の上部に移動した。本家のサイトに解説がありました、あざす！
上記が書き出されたhtml。わかりやすいようにテーブルの中身を抜いて掲載しました！
「.xo-month-wrap」を半分のサイズにして、「.xo-months」にclearfixする。
わーい、二段組になった。
次に、スマホ等、640px以下は一段組表示にするよ。
これでレスポンシブになったね。
休日の設定をしていく！
これ、「休日設定」という名前だからちょっと分かりづらいんだけど、「休日」という概念でなく「特定の日の設定」等という意味合いで理解した方が分かりやすいかもしれない。特定の日に違う営業時間や休日等がある場合にとっても便利だ！
休日設定をクリックすると、休日の名前が「all」になっていて、タイトルが「定休日」、日曜日と土曜日にチェックが入っている。
上の赤枠の部分が編集で反映されている部分。
ここの歯医者さん、「土日休み」でなく、「木日休み」なので日曜日を外して木曜にチェックする。それと同じに、「定休日」でなく「休診日」に変更する。休日の名前も「all」となっていたのを、わかりやすいように「kyushinbi」に変更して「休日を保存」をクリック。
するとさっきまで「all」が選択されていたが、上書きされて「kyushinbi」なった。
他にもデフォルトで「am」「pm」が入っている。とりあえずはこれらを編集しつつ利用する。
まずは「診療時間A」を設定する。「診療時間A」はこの歯医者さんの一般的な診療時間帯。タイトルを「診療時間A」にして、平常の営業時間なので色を白に編集して「休日を保存」。
次に不定期な「診療時間B」を設定する。編集する休日に「pm」を選んで、休日の名前を「shinryob」に変更、タイトルを「診療時間B」にする。
先程は一番一般的な診療時間だったので「臨時日」に何も入れなかったが、こちらは「診療時間B」たまにこの時間帯になるので、対象の日にちを入力する。
色はこの青でいいや、「休日を保存」。
そうだ、金曜日に隔週で「矯正診療日」があって、そこの診療時間がまた違うから、今度は新規に休日を作成する。「休日を作成」をクリック。
休日の名前を「kyoseibi」にして「休日を作成」をクリック。
タイトルを「矯正診療日」にして、こちらも臨時日を入力。色は黄色にしてみた。「休日を作成」をクリック。
ここが一番大事。
先程index.phpに設置した関数の「holidays=”all,am,pm”」部分を、「holidays=”shinryoa,shinryob,kyoseibi,kyushinbi”」に変更。
わーい！無事設置された〜！
ちなみに、臨時休業など、先程の「休診日」の「臨時日」欄に日付を入れれば、
「休診日」として反映される。
まとめ
いかがでしたでしょうか！？カレンダー系のWPプラグインって、あまり多くはないのですが、機能が多すぎたりしてイジるづらいものが多いと思う。
「XO Event Calendar」は、他にもイベントとかカテゴリーとか、いろいろ機能もあるのですが、ショップやクリニック等の営業時間や休日の告知程度の、簡単なカレンダーをちょっと入れたいなぁ、なんて場合に、この「XO Event Calendar」の休日設定だけを利用するのはちょっとありかもね！メイドインジャパンだから日本語説明も分かりやすいしね！
XO Event Calendar プラグイン – Xakuro System
XO Event Calendar プラグインは、シンプルで簡単なイベント カレンダーです。
