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

XOEventCalendarの使い方アイキャッチ画像ワードプレス

おいしい蜂蜜ができたから、はちみつパーティを開くからみんなにお知らせしたいの。

何かおすすめのプラグインはありませんか?

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

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

XO Event Calendarについて

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

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

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

▲定休日や休みを設定できるので、参拝者さんに伝えやすい

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

みきみかん
みきみかん

私はWordPressで運営するまで、表(テーブル)で予定表を公開していましたよ。正直、面倒くさかったです。

XO Event Calendarができること

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

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

  • 定休日の設定ができる
  • 臨時休みの設定ができる
  • 半休の設定ができる
  • 行事によって色分けができる
  • 予定を時間単位で入力できる
  • 一週間など連日して予定を入れられる

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

XO Event Calendarがオススメの理由

雪の中のうさぎ(癒し画像)

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

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

他に理由をあげると、

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

日本語だと分かりやすくていいわね。

XO Event Calendarの惜しい点

XO Event Calendarのイメージ画像
▲XO Event Calendarのイメージ画像

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

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

XO Event Calendarの使い方

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

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

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

お休みを設定する方法

休日設定の画面
▲休日設定の画面:全日、午前、午後休みが設定できます

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

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

①休日を選択する

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

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

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

②タイトルを設定する

▲タイトルはカレンダーの色の意味を示す

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

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

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

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

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

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

④臨時日を設定する

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

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

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

⑤取消日を入力する

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

⑥色を設定します

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

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

以上が休日設定です。

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

休みはたいせつよね!

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

イベント一覧表
▲新しい予定はダッシュボードのイベントから

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

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

イベントの新規追加画面
▲イベントの新規追加画面は一般のページとほぼ同じ

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

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

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

  1. 数時間の予定
  2. 1日中かかる予定
  3. 数日間かかる予定
ショートタイトルの反映される場所
▲ショートタイトルはカレンダーの中に反映される

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

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

数時間の予定

数時間の予定の設定方法
▲数時間の予定の設定方法:終日のチェックを外すんだよ

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

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

数時間の予定の設定方法
  1. 終日のチェックを外す
  2. カレンダーから日にち、開始時間をドロップダウンから選ぶ
  3. 終了日時を、日にちと終了時間を選ぶ

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

一日中かかる予定

一日中かかる予定の設定方法
▲一日中かかる予定の設定方法は簡単ですよ

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

一日中かかる予定の設定方法
  1. 終日のチェックを入れる(デフォルトでチェックが入っています)
  2. 日にちをカレンダーから選択するか、または入力します

数日間かかる予定

数日間かかる予定の設定方法
▲連日予定は研修会などに便利ですね。
数日間かかる予定の設定方法
  1. 終日のチェックを入れる(デフォルトでチェックが入っています)
  2. 開始日をカレンダーから選択するか、または入力します
  3. 終了日をカレンダーから選択するか、または入力します

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

みきみかん
みきみかん

私がよくする失敗です。忘れちゃうんですよね~

XO Event Calenderのカテゴリー
▲カテゴリーにチェックを入れることを忘れないように!

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

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

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

記事を書く前にカテゴリーのチェックを入れて、忘れないようにしたいね

カテゴリーの設定

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

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

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

ウィジェットの設定

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

XO Evnet Calendarのウィジェット設定画面
▲XO Evnet Calendarのウィジェット設定:ここもシンプルでいいね!
ウィジェットの設定
  • タイトル:つけなくても、つけてもどちらでもOK
  • カテゴリー:カレンダーに表示させるのならチェックを入れる
  • 休日:カレンダーに表示させるのならチェックを入れる
  • 月送り:表示させてカレンダーよりも前や先を見せたい場合は設定する
  • 表示する月数:1~12ヶ月選べます。見せたい月数を設定する
  • 週の始まり:月から日曜日まで選べます
  • Shortcode:これは別のプラグインが作成したコードです。
みきみかん
みきみかん

この画像のショートコードは「Widget Shortcode」で作成しました。

後述するショートコードを使えば本文中に表示できますよ。

(実はこのとき、ショートコードの使い方を知らなかったのですよ・・・)

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

XO Event Calendarの表示
▲私の使い方です。参考までにどうぞ

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

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

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

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

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

みきみかん
みきみかん

ご自分の都合に合わせて設定したらいいと思います

「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"]
3ヶ月表示のカレンダー
縦に表示されるので、あとでCSSでカスタマイズしてもいいね。

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

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

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

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

[xo_event_calendar id="top-calender"]

私のアレンジ例

「XO Event 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はシンプルな設定でも、優秀なプラグインです。

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

▲プラグイン一覧のXO Event Calendar

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

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

シンプルで使いやすいプラグインですね!

テンプレート化おまけ

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

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

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

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

▲点々をクリックしてメニューを開く

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

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

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

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

ちょっと面倒だけど、全部書き直すよりはマシかな

タイトルとURLをコピーしました