記事をシェアする

WordOPress カレンダープラグインEvent Organiser

WordPressでサイトを制作する際、カレンダー機能を導入したいというケースは少なくありません。とはいえ一言でカレンダーと言っても、営業日を表示させたい、予約機能が欲しいなど、求める機能はサイトによって異なります。

Event Organizerとは

今回ご紹介するのは、「Event Organizer」というWordPressのプラグインです。このプラグインでできることは多岐にわたりますが、おおよそ次のようなことが可能です。

  • 日/週/月間カレンダー表示
  • Google連携機能あり
  • イベントの登録

このうち、「週間カレンダー」を表示させるための使い方をまとめましたのでご覧ください。

週間カレンダーのサンプルイメージ

導入手順

まずは「Event Organiser」をインストールします。WordPress管理画面、プラグインの新規追加からもインストールが可能です。インストールができたら、有効化しておきます。

当プラグイン を検証した時期(2020年1月時点)ではWordPress最新バージョンで検証済でしたが、この記事を書いている5月時点では未検証となっています。ご自身でお試しになる際は、必ず事前にバックアップをとってください。導入によるサイト不具合等につきましては保証いたしませんので、ご自身の責任の元行うようにお願いいたします。

イベントの登録

まずは、表示させたいカレンダーの内容(以下、イベント)を登録していきます。WordPress管理画面左側メニューに「イベント」が追加されているので、クリックして、新規追加を行います。

Event Organiser、イベントの新規追加画面

タイトルには、カレンダーで表示させたい内容を入力します。今回の例では、◯×△形式で表示させたいので、◯と入力しました。

Event Organiserではイベントタイトルがカレンダーに表示される

続いて、日付を選択していきます。開始日時と終了日時を設定します。時間指定なしの終日の場合は、終日欄にチェックを入れておきます。

設定ができたら、公開ボタンを押して記事を公開しておきましょう。これで、カレンダーの登録が終わりました。

カレンダーを表示させる

このままでは、まだカレンダーは表示されません。続いて表示させるための記述を行なっていきましょう。

「Event Organiser」では、ショートコード およびPHPへの直接記入のどちらも対応しています。今回トライしたいスマホ表示(カレンダー横並び)をするには、PHPへ直接記入する方法で行います(後述します)。

もしスマホ表示にこだわらず、ショートコード を使用する場合は、次のコードをご参考ください。
defaultView=”basicWeek” で、週表示の設定を。
titleformatweek=”Y年 n月j日{‘—’j}” で、日付の日本語表示を設定しています。

ショートコード

余談ですが、パラメーターは他にも多数用意されており、様々な設定が可能となっています。ご自身の求める形に応じて、お試しください。
Event Organiser公式ドキュメント

PHPファイルへの直接記入

(補足)上記コードをコピペする際、「<」を半角の「<」に、「[」を半角の「[」にそれぞれ置き換えてください。(以下、同様)

スマートフォン表示の切り替え

実はこの「Event Organiser」、デフォルトの状態では少々使いづらい点があります。それは、スマホで見た際の表示です。PCでは普通の横並びカレンダーなのですが、スマートフォンでは縦1列表示になってしまうのです。

スマートフォン表示では、縦一列のカレンダーになってしまう

これを避け、スマホの状態でも横並びのカレンダーとして表示するために、先ほどのコードに追記をします。

これで、スマートフォンで見た際にも横並びの週間カレンダーが表示されるようになりました。

おまけ

「Event Organiser」は、その名の通りイベントを管理するツールでもあるため、イベント毎に詳細ページが生成されます。とても便利な機能ではあるのですが、単にカレンダーを表示させたい場合には不要になってしまいます。

デフォルトでは、カレンダー上のイベントタイトルがクリックできる状態になっているため、この機能をオフにする(クリックできないようにする)方法をご紹介します。上記のコードに追記してみます。

マウスオーバー時に表示されていたツールチップを非表示にし、クリックできないようになりました。

まとめ

ここでは記述しませんでしたが、カテゴリー毎に色分けすることも可能です。また、ドキュメントやDemoもありますので、試してみたい機能があればまずは公式ドキュメントを読んでみることをおすすめします(量が多くて探すのも大変ですが…)。

また、週間カレンダーにこだわらず営業日だけを表示したいということであれば、プラグイン「xo event calendar」で色分けも可能です。ご自身の用途にあったプラグインを使っていきましょう!


記事をシェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA