イベントカレンダー「XO Event Calendar」の使い方とカスタマイズ

この記事は忙しいあなたにピッタリの簡単で用途が広い「XO Event Calender」の紹介とカスタマイズ方法、また私のアレンジ例をお伝えします。

このページは制作者さんの公式ページ（https://xakuro.com/）を参考にショートコードの使い方を解説しています。以前は、別のプラグインを使ってわざわざショートコードを作って設定していました。「XO Event Calendar」は本当によく出来ています。

XO Event Calendarについて

「XO Event Calendar」は使い勝手のいいイベントカレンダープラグインです。

シンプルなので使い方は簡単！

しかも、フォームと一緒に使えば予約管理や受付としても使えます。

WordPressにデフォルトでついている「カレンダー」は記事を投稿した日付がわかるカレンダーです。

XO Event Calendarができること

イベントプラグイン「XO Event Calendar」は、シンプルですが十分な機能を備えています。

主なことは、休みとイベントなど行事の２種類の予定を登録することができます。

定休日はタイトルを変えられますので、休み以外の使い方ができると思いますよ。

XO Event Calendarがオススメの理由

「XO Event Calendar」をオススメする理由が制作者さんの公式サイトが日本語であるからです。

最近は翻訳ツールの日本語が分かりやすくなりましたが、その一手間が面倒くさいと思いませんか。翻訳された日本語だとニュアンス分からないというのか、イマイチ分かりません。

他に理由をあげると、

• 日本語対応のためわかりやすい
• ブログを見ればアレンジしやすい
• 週始まりが選択できる
• タグが公表されている
• カレンダーの日づけをクリックすれば詳細がわかる
• 使い方によっては予約管理や祭典告知になる
• 他のプラグインを併せて使えば、幅がひろがる
• ショートコードでさらにカスタマイズできる

XO Event Calendarの惜しい点

とくにありません。考えましたが、シンプルで便利です。

しいていえば、無難なデザインのカレンダー、というところでしょうか。

XO Event Calendarの使い方

使い方はとても簡単です。それでは、解説していきますね。

２種類の予定を設定します。

最後に最大の注意点があります！重要ですので見落とさないでくださいね。

お休みを設定する方法

プラグインをインストールすると、ダッシュボードに「イベント」が追加されます。

「イベント」の中から「休日設定」を選択します。

①休日を選択する

休日を選択します。プラグインをインストールした時点では「all am pm」の三種類です。

自分で名称を変更や追加することができます。

画面は「all」を選択した状態です。

②タイトルを設定する

タイトルはカレンダーに色が着いた日の意味を表しています。

私の場合は「休日」にしています。

「定休日」や、逆に「開所日」でもあなたの使い方にあわせて変えてくださいね。

③週定期の曜日にチェックをいれる

決まった曜日に休む場合は、週定期の曜日にチェックをいれます。

私は毎週水曜日を休みにしています。

④臨時日を設定する

臨時休みや隔週で休みを設けている場合に設定をします。

私の場合は、第２、第４木曜日、２１日を休みにしているため画像のように設定しています。

「yyyy-mm-dd」と年月日を１行で入力します。

⑤取消日を入力する

週定期の曜日で休日を取り消す場合は、ここに入力します。

⑥色を設定します

カレンダーに塗る色をホームページのイメージカラーにあわせて決めます。

色の番号がわかる人は直接コードを入力します。または、カラーピッカーで選択します。

以上が休日設定です。

お仕事を休むのが苦手だったり、悪いことのように思っている人がたまにいらっしゃいます。上手に休めば仕事の質が上がって人生も豊かになりますよ。

新しい予定を設定する方法

ダッシュボードのイベントの「新規追加」または「すべてのイベント」から「新規追加」をクリックします。

固定ページや投稿ページと同じようなページが開かれます。

違うのは「イベント詳細」が記事下にあることです。

本文は通常通り書きます。

予定は３パターン考えられますので、それぞれパターンにわけて解説したいと思います。

ショートタイトルはカレンダーの日付の枠内に表示されます。

スマホで見る場合を考えて４文字以内にしたほうがいいと思います。

数時間の予定

数時間の予定の設定方法で一番大事なことは、終日のチェックを外すことです。

これを忘れると、「あれ？できない」ってちょっと焦りますよ。

時間は２４時間で表されています。

一日中かかる予定

一日中かかる予定の設定方法は２ステップで終わるので、簡単です。

数日間かかる予定

最大の注意点：良くする失敗

本文を書いて、イベント詳細を設定したら、必ずカテゴリーにチェックを入れることを忘れないようにしましょう。

これを忘れたら、カレンダーに表示されません。

もし、予定を新追加してもカレンダー（ウィジェット）に反映されないようならば、カテゴリーにチェックが入っているかどうか確認して見てくださいね！

カテゴリーの設定

カテゴリーの追加は、ダッシュボードのイベントの「カレンダー」、または記事のカテゴリー設定の下に「新しいカテゴリーを追加」から設定ができます。

• 名前：カテゴリーの名前
• スラッグ：URLに反映されます。半角小文字の英数字と「-」
• 親カテゴリー：カテゴリーを細かく設定したいときに使用します
• 説明：カテゴリーの説明を入力します。なしでも構いません
• 色：カテゴリーの色はショートタイトルの背景に反映される

ここらで休憩しませんか？

ウィジェットの設定

ウィジェットの設定もクリックだけでできますよ。簡単です。

ここからは、私の使い方を例にウィジェットの設定を解説します。

上の画像はパソコンなどの大きめのモニターでの表示です。

「２ヶ月表示の月送りなしの月曜日始まり」に設定しています。

• タイトルは設定なし
• 月送り：前の月０ヶ月、先の月０ヶ月
• 表示する月数：２ヶ月
• 週の始まり：月曜日

サイドバーなど横幅が限られている場合は、表示する月数は１ヶ月でもいいと思いますよ。

また、月送りは前の月はいらないんじゃないかな、と思っています。

「XO Event Calendar」をカスタマイズしよう

制作者（Xakuro）さんのサイトの「XO Event Calendar」ページにはアレンジやタグが掲載されています。タグやソースが公開されているので、ほぼコピペでアレンジができますよ。

ショートコードを使ってカスタマイズ

本文中に「XO Event Calendar」を表示させたい場合はショートコードを利用します。ショートコードに[xo_event_calender]と入力します。

特にしていしていませんので、当月分の前送りも先送りもできるカレンダーが1つ表示されます。残念ながらこのままでは使い物になりませんので、指定していきたいと思います。

書き方は半角英数字で「xo_event_calender」の後に半角スペースをいれて、指定します。

指定（オプション）の順番の決まりは特にありませんが、次の担当者が分かりやすい様に一定の順番で書かれることをお勧めします。

休日設定：holidays

先ほど休日を設定しました。休日を表示する場合は「holidays」と指定します。全日の場合は「all」、午前中休みは「am」、午後から休みは「pm」と指定します。

2つ以上指定する場合は「,」で区切ります。

*全日の場合
[xo_event_calender holidays="all"]

＊全日と午後休みの場合
[xo_event_calender holidays="all,pm"]

前月前送りの指定：previous

表示されている月から過去へ前送りするか、どのくらいまでするか指定します。指定しないと無制限に前送りします。

前送りしない場合は「0」と指定します。

*前月へ前送りをしない場合
[xo_event_calender previous="0"]

*前々月まで前送りする場合
[xo_event_calender previous="2"]

次月へ先送りの指定：next

来月や再来月など先送りしたいときは、数字を入力します。逆に先送りしたくない場合は「0」にします。「-1」の場合は、無制限に先送りしますので注意してくださいね。

＊再来月まで先送りしたい場合
[xo_event_calender next="2"]

＊先送りしたくない場合
[xo_event_calender next="0"]

＊無制限に先送りする場合
[xo_event_calender next="-1"]または省略する

週の始まりを指定する：start_of_week

日曜日から土曜日までお好きな曜日で一週間を表示します。指定しない場合は日曜日始まりとなります。

月曜日は「1」、火曜日は「2」、水曜日は「3」、木曜日は「4」、金曜日は「5」、土曜日は「6」です。

例えば水曜日の定休日始まりと指定する場合は、下のようになります

[xo_event_calendar holidays="all" start_of_week="3" ]

表示する月数：months

通常は1月表示です。縦に何個表示するか指定します。

ちなみに「month」だと最初に表示する月の指定となりますので、複数型の「s」を忘れないようにしてくださいね。

例えば3ヶ月表示したい場合は、下のように指定します。

[xo_event_calendar holidays="all" months="3"]

カレンダーにIDを設けたいとき：id

特定のカレンダーをアレンジしたい場合はIDで指定します。IDを指定しない場合は全てのカレンダーが同じようになるからです。

IDは自分の好きな名前を付けたらいいと思いますが、次の担当者が分かりやすいような名前がいいと思います。

例えばトップに表示するカレンダーなら「top-calender」とか、年間の休日を表示するカレンダーなら「holidays」とかです。単純に数字でもいいかもしれません。

[xo_event_calendar id="top-calender"]

私のアレンジ例

私はパソコン表示の場合は、上のカレンダーのように横並びにしています。

スマホの場合(600PX以下)は縦並びに設定しています。

また、月送りを表示しない設定にしていますので「＞」「＜」の表示を消しています。

「XO Event Calendarミニカレンダー」ページを参考に、ショートコードとCSSを使ってアレンジしました。ご参考くださいね。

＊まずはショートコードでオプションを指定します。
[xo_event_calendar id="test01" holidays="all" previous="0" next="0" months="2"]

IDの指定は「test01」にしました。お好きな名前をつけてくださいね。

/* カレンダーを横並びに表示する */
#test01
.xo-event-calendar .xo-months {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 15px;
row-gap: 5px;}

/* 次のはあってもなくても、そんなに変わりません。文字揃え*/
.xo-event-calendar table
.xo-month .month-event-title{
text-align: center;}

/* 次へのボタン＞を消したい */ 
#test01 button{display: none;} 

/*  前月や次月の日付を消したい */
#test01 .other-month {
	display:none;
}
/* 600px以下はカレンダーを1つにしたい */
@media screen and (max-width:600px){
.xo-event-calendar .xo-months {
display: grid;
grid-template-columns: repeat(1, 1fr);}
}

あまり自信はありませんが、一応したいことは出来ていると思います。

また、前の月、後の月のイベントの非表示はphpファイルに書き込むとで非表示にすることができます。

こちらのコードは制作者さんのコチラのページそのままコピーしたら大丈夫です。

ただ私は無料Lightingテーマを使っており固定ページのファイルが見つからず、対応できていません。

投稿ページなら大丈夫ですよ。

XO Event Calendar　まとめ

XO Event Calendarはシンプルな設定でも、優秀なプラグインです。

カレンダープラグインが沢山ありますが、日本製だから設定や困った時に安心します。

令和四年一月下旬現在は「使用中のWordPressバージョンで未検証」で「最終更新：5ヶ月前」となっていますが、とてもお勧めです。

有効インストール数が9000以上って・・・もっと、インストールされてもいいと思いますよ。

テンプレート化おまけ

よくある予定ってありますよね？例えば、月次祭や会議など。

同じ内容の記事を毎回書くのが面倒な気持ちになると思います。「これを複製して日付だけ変えられないかな」って思います。

でも、残念ながら複製できません。

ちょっと手間ですが、コピーすることができます。

記事の「公開」ボタンの右側に「…」を縦にしたマークがあります。これをクリックしてメニューを表示させます。

下の方の「ツール」のなかに「すべてのコンテンツをコピー」があります。

「すべてのコンテンツをコピー」をクリックして、記事をコピーします。

その後、新しいページを開いて、ペーストします。そして、変更が必要なところだけ書き直します。