【WordPress】複数設置も可能なカレンダープラグイン[ All-in-One Event Calendar ]

こんにちは、プロクラスの中山です。
京都はすっかり秋、というか日によってはめちゃ寒いです。
京都に住んでいるとなかなか「紅葉を見に行こうよ！」とはならないものです。

さて、私はいつもワードプレスの授業の先生をしているので、ワードプレスが大好きです。
その理由の一つとして、プラグインを使えばプログラマーじゃなくても複雑なプログラムを簡単に使えちゃうという点があります。今日は最近使ってみて面白かったおすすめプラグインをご紹介したいと思います。

プラグインとは？
WordPressに最初からついていない、後から自分で追加する機能（プログラム）のことです。
インストールして簡単な設定をするだけで、便利な機能をWebサイト上に追加することができます。
※中には専門的な知識が必要なものもあります。

カレンダープラグインで営業日カレンダーを作ろう

今回使用するプラグイン：All-in-One Event Calendar

カレンダープラグインを設置することになった経緯

WordPressには最初からカレンダーのウィジェット（サイドメニューなどに表示するカレンダー）が存在していますが、これはブログを投稿した日が自動で表示されるだけのものです。
今回はお店のホームページに営業日カレンダーを設置したかったので、プラグインを使うことになりました。

複数のカレンダーを設置できるプラグインを選択

ワードプレスのカレンダープラグインはたくさんの種類があります。
Googleカレンダーを表示してくれるものや、色分けして定休日やイベントを表示してくれるものなど。

【参考サイト】実店舗やスクール系のWebサイトに重宝！WordPressのカレンダープラグイン9選

一つのカレンダー上にすべての定休日・イベントを表示するならだいたいどのカレンダープラグインでも問題ないのですが、今回は京都店と東京店の2つの定休日カレンダー設置したいので困ってしまいました。カレンダーを複数設置できるプラグインがなかなかないのです。
やりたい内容は定休日に色を付けて表示したいというだけのシンプルな内容です。WP Simple Booking Calendarなんか便利なのですが、複数のカレンダーを設置したい場合は有料プランになってしまうようです。

いろいろ試した結果、All-in-One Event Calendarを使用することにしました。
こちらのプラグインはイベントにカテゴリをつけることができ、カテゴリごとのカレンダーを表示することができるのです！
…つまりどういうこと？となると思うので、下記が実際の画面です。

All-in-One Event Calendarのデメリット

このプラグインは、多機能ゆえに管理画面がややこしいので慣れるまでちょっと大変かもしれません。英語で書いてある箇所も多い…。一つのカレンダーに定休日を表示したいだけの場合は他のプラグインを使った方がいいと思います。
下記に設定方法を記載しますので、よくわからないところは触らないようにしましょう。笑

設定方法

プラグインをインストールして有効化すると、管理画面の左メニューに「イベント」というメニューが追加されます。
たくさんのメニューがありますが、まずはその中の、「設定」のメニューをクリックします。
今回は月ごとのカレンダーを表示したいので、「デフォルト」を「日程表」から「月」に変更しておきましょう。

固定ページを見ると勝手に「Calendar」という記事が投稿されています。上記の画面の「カレンダーページ」の部分で既存の固定ページを選択すると、その記事の下にカレンダーをくっつけることもできます。
「Calendar」ページを表示させてみると、まだ定休日は追加していませんがカレンダーが表示されているはずです！

では、早速定休日を入力していきましょう。
左メニューの「新しく追加」をクリックし、まずは京都店の定休日情報を入力します。

入力欄はたくさんありますが、下記内容だけ編集すればOKです！

1.カレンダーに表示したいタイトルを入力。
2.イベントの時間を入力。定休日は終了時間などないので「全日」にチェックを入れます。
3.「繰り返し」にチェックを入れると表示したい日付を選択することができます。「カスタム」でお休みの日をクリックして選択するか、毎週定休日が曜日で決まっている場合は「毎週」を選択して曜日を選択するだけでOK!その際は開始日が今日になっていたらそれ以降しか表示されないので、日付をずらしましょう。
4.「京都店」というカテゴリーを作成してチェックを入れます。
5.更新ボタンを押したら京都店の定休日登録は完了です！

同様に、東京店も同じように入力してカテゴリを「東京店」にすれば完了です！

この状態で固定ページ「Calendar」を見てみると、下記のような状態になっています。

いい感じなのですが、両方の定休日が一緒に表示されているので見にくいですね。まずはカテゴリごとに色分けをしてみましょう。
管理画面の左メニューの中から「イベント」＞「主催」を選択して、色を変えたいカテゴリ名を選択します。まずは京都店を選択。

カテゴリーの色という部分をクリックして、好きな色に変更します！今回は京都店はオレンジ、東京店は緑色を選択してみます。
再び左メニューの「主催」をクリックすると一覧表に色が表示されるようになります！

カレンダー上の表示も見やすくなりました。

問題はこれからです。
京都店のページには京都店の定休日だけ、東京店のページには東京店の定休日だけを表示したいのです。
その為には、ショートコードを利用します。

ショートコードで複数のカレンダーを設置しよう

左メニューの「イベント」＞「設定」を見ると、複数のタブに分かれているのに気づきましたか？この中の「詳細」をクリックすると「詳細な設定」「ショートコード」「キャッシュレポート」が表示されるので「ショートコード」を選択します。

するとなんだかややこしそうなページが表示されます。これらの説明は「〇〇だけ表示するカレンダーを作るにはどうしたらいいか」という内容になっています。
やりたいことは「京都店」だけ、または「東京店」だけのカレンダー表示。つまり、「イベントカテゴリの名前かスラッグでフィルタ」が使えそうですね。該当するショートコードの例をカスタムして固定ページに挿入しましょう。

ちなみに、一番下の注意書きに書いてある通り一つのページに２つのカレンダーは設置できません。今回は京都店と東京店のページは別々なので問題ありません。