【ワードプレス・簡単シンプル】営業日＆イベントカレンダープラグインーXO Event Calendarの使い方

ワードプレスでお店などのホームページを作ったときに、営業日のカレンダーがあったらいいですよね。また、ついでに何かのイベントがあるときにもカレンダー表示があった方が親切ですよね。

ワードプレスには、沢山の便利なプラグインがあり、カレンダーを表示するプラグインも多くあります。その中でも日本製で扱いやすい「XO Event Calendar」プラグインをご紹介させていただきます。

Contents

「XO Event Calendar」のインストール

ダッシュボード「プラグイン」＞「新規追加」から、「XO Event Calendar」と検索して、以下のプラグインを「今すぐインストール」＞「有効化」してください。

ここから定休日の設定をしていきます。

ダッシュボード「イベント」＞「休日設定」をクリックします。

休日設定画面になりますので、タイトル、定休日（曜日）、臨時休業日などを設定し、「休日を保存を」クリックして完了です。

今度はイベントの設定です。

ダッシュボード「イベント」＞「新規追加」から新しくイベントを追加できます。

イベントタイトルと文章、イベント詳細の開始日時、終了日時を入力して、最後に「公開」をクリックしてください。

イベントをカテゴリー分けしたり、カレンダー上のイベントの色を変えたいときは、カテゴリーの設定をします。

ダッシュボード「イベント」＞「カテゴリー」をクリックします。

新しいカテゴリーを追加で、名前、スラッグや色の設定をして、「新しいカテゴリーを追加」をクリックします。

イベントとカテゴリーを紐づけるために、ダッシュボード「イベント」＞「すべてのイベント」から、先ほど設定したイベントの編集画面に戻って、カテゴリーの設定をしてください。

カレンダーの表示は、ショートコードを表示したい箇所に貼り付けることで出来ます。

固定ページや投稿ページの好きなところで、ショートコードの追加をクリックします。

ショートコードブロックの枠の中に以下のコードをコピペしてください。

[xo_event_calendar holidays="all"]

これで一応営業日カレンダーの完成で以下のように表示されます。

このままだと、横幅いっぱいに広がって表示されるので、少し横幅を縮めるように追加CSSで調整したいと思います。

ダッシュボード「外観」＞「カスタマイズ」をクリックし、「追加CSS」をクリック、以下のコードを追加します。

.xo-event-calendar{
	max-width:600px;
	margin:0 auto;
}

こんな感じになりました。

こちらのサンプルサイトで実際に使用しておりますのでご確認ください。

今回ご紹介した「XO Event Calendar」プラグインは、カレンダー（イベント）プラグインの中でも余計な設定が少ない分、とても使いやすいと思います。

お店や施設の営業日カレンダーを表示させるのに大変便利なプラグインですのでお勧めです。