PR

All-in-One Event Calendar WordPressにイベントカレンダーがカッコよく追加できるプラグイン

ブログサイトの立ち上げ方
スポンサーリンク
スポンサーリンク

 

 

 

「All-in-One Event Calendar」プラグイン

この「ちょいプラ素材」のブログでも便利に活用させてもらってるWordPressは、世界中で一番使われているCMS(コンテンツ・マネージメント・システム)です。

なので、「こんなことできたらいいのにな…」といった機能は、適当なプラグインを探してインストールすれば、簡単に実現できてしまいます。

今回、イベントの案内や管理をするために、イベントカレンダーのプラグインをインストールすることにしました。

いろいろ検討した結果、機能面でもデザイン面でも、一番充実しているプラグイン「All-in-One Event Calendar」を選びました。

良いところ

まず、この「All-in-One Event Calendar」の良いところを以下にまとめます。

  • デザインがきれい。
    イベント情報を「日」「週」「月」単位で表示しても、「日程表」や「ポスターボード」の形式で表示しても、カッコよく表示できます。
  • 必要最低限の部分は、日本語対応されている。
    言語ファイル (*.mo)が順次更新されています。
  • 他のカレンダーにイベント日程を取り込める。
    「Google」「Outlook」「Appleカレンダー」などに対応しています。
  • イベント情報は、通常の投稿とは別のカスタム投稿タイプとして扱われる。
    MySQLデータベースに専用のテーブルが作成され、イベント情報は、カスタム投稿(ai1ec_event)として、このテーブルで独自に管理されます。
    このため、通常の投稿(post)とは独立して、コンテンツの入力や管理の方法、表示デザインのカスタマイズが楽になります。
  • 独自のカレンダーテーマが用意されている。
    WordPressのテーマのように、カレンダーのデザインテーマを変更することで、表示をカスタマイズできます。

これらの良い点は、この記事の後半で紹介します。

使いにくいところ

一方、使いにくい面もあります。

先に挙げた良い点が、逆の視点で見ると、以下のようなデメリットとして見えてきます。

  • カスタム投稿タイプなので、通常の投稿と同じように扱えない。
    デフォルト状態では、メインページで、通常の投稿と一緒に並べて表示できなかったり、通常の投稿のテンプレートタグのように、コンテンツ情報を簡単に取得できなかったりします。
  • カスタマイズには、プログラミング・スキルが要求される。
    カレンダーテーマをカスタマイズしたり、独自の入力フォームを作ったりするには、それなりのプログラミング・スキルが必要です。
    特に、「All-in-One Event Calendar」は、テンプレートエンジンに「Twigテンプレート」を使っているので、「PHP」も初心者の私にはつらいです。
  • プラグインの使い方の日本語情報が少ない。
    このプラグインに関しては、使い方に関する日本語の情報がとても少ないです。
    「プラグインをインストールしてみました。」的な情報はたくさんあるのですが、突っ込んだ情報が少ないのは、上記のハードルの高さが原因だと思います。

1週間ほどネット検索しまくって集めた情報をつないで、なんとか、私が使っているWordPressテーマ「Simplicity2」と最低限の連携ができるところまできました。

別の記事では、以下の方法を具体的に紹介したいと思います。

  • メインページで、通常の投稿と並べて表示する。
  • イベントの「日時」や「場所」の情報を取得して表示する。
  • 日本語の表記やデザインや表示の気になる点をカスタマイズして変更する。

これらの方法は、以下の記事を見てください。

All-in-One Event Calendar メインページにイベントを表示する
「All-in-One Event Calendar」プラグイン 前回は、以下の記事で「All-in-One Event Calendar」の表示例や使い勝手を紹介しました。 この記事では、「All-in-One Event Calenda...
All-in-One Event Calendar データベースからイベント情報を取得する
「All-in-One Event Calendar」のイベント表示 前回は、以下の記事で「All-in-One Event Calendar」のイベントをメインページに表示する方法を紹介しました。 すると、以下のように、「All-in-O...
All-in-One Event Calendar ポップアップ画面の日時表示を修正する
「All-in-One Event Calendar」のポップアップが画面の日時表示を修正する方法を紹介します。
All-in-One Event Calendar 新しいテーマを作成する
「All-in-One Event Calendar」のカレンダーテーマを新しく作成し、作成したテーマに切り替える方法を紹介します。
All-in-One Event Calendar ポップアップ画面のサムネイル画像のアスペクト比を元画像に合わせる
「All-in-One Event Calendar」に新しく作成したカレンダーテーマのスタイルを変更し、ポップアップ画面に表示されるサムネイル画像のアスペクト比を元画像に合わせる修正をします。
All-in-One Event Calendar ポップアップ画面の本文表示をカットする
「All-in-One Event Calendar」のポップアップ画面の本文表示をカットするカスタマイズを紹介します。

カッコいいデザインと便利な機能

「All-in-One Event Calendar」の売りは、カッコいい表示と便利な機能だと思います。

"WordPress BAND"という架空のアマチュアバンドが、自分たちのライブ情報をホームページに掲載することを想定して、「All-in-One Event Calendar」の表示例と使い勝手を紹介します。

ウィジェット

まず、「ウィジェット」からです。

「All-in-One Event Calendar」をインストールすると、WordPressのウィジェット画面に[直近のイベント]という「ウィジェット」が現れます。

この「ウィジェット」をサイドバーに張り付けると、本日から指定した先までのイベントが、日めくりカレンダーのアイコンと一緒に、以下のように表示されます。

all-in-one-event-calendar-%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88

イベント情報の部分にマウスを重ねると、以下のようにポップアップ画面が表示されます。

残念なのは、イベントの日付「11月5日」の"日"の文字が表示されてないところです。
これは、「All-in-One Event Calendar」のソースコードを見て、デバッグしないといけない点です。

「月」単位の表示

「ウィジェット」の下部にある[カレンダーを見る]というボタンを押すと、イベントが「日」「週」「月」単位のカレンダー形式や「日程表」の形式で表示されます。

デフォルトとの表示形式は、WordPressのショートコード機能を使って、あらかじめ自由に設定できます。

以下は、「月」単位の表示です。

all-in-one-event-calendar-%e3%80%8c%e6%9c%88%e3%80%8d

先ほどと同じように、イベント情報の部分にマウスを重ねると、以下のようにポップアップ画面が表示されます。

all-in-one-event-calendar-%e3%80%8c%e6%9c%88%e3%80%8d-%e3%83%9d%e3%83%83%e3%83%97%e3%82%a2%e3%83%83%e3%83%97

「日程表」の表示

カレンダー上部の表示形式プルダウンメニューで「日程表」を選んでみます。

all-in-one-event-calendar-%e3%80%8c%e6%97%a5%e7%a8%8b%e8%a1%a8%e3%80%8d%e9%81%b8%e6%8a%9e

すると、カレンダーが以下のように「日程表」形式で表示されます。

all-in-one-event-calendar-%e3%80%8c%e6%97%a5%e7%a8%8b%e8%a1%a8%e3%80%8d

それぞれのイベント情報の右上の「⊕」をクリックすると、表示枠が下に広がり、そのイベントの概要を見ることができます。

all-in-one-event-calendar-%e3%80%8c%e6%97%a5%e7%a8%8b%e8%a1%a8%e3%80%8d-%e5%b1%95%e9%96%8b

「⊖」をクリックすると、広がった表示枠が元に戻ります。

「イベント」の個別ページ表示

通常の投稿のように、「イベント」も個別のページで詳細を表示できます。

以下は、イベント詳細の表示例です。

all-in-one-event-calendar-%e5%80%8b%e5%88%a5%e3%83%9a%e3%83%bc%e3%82%b8%e8%a1%a8%e7%a4%ba

特徴的なのは、イベント会場の「場所」をグーグルマップを使って表示できたり、「料金」などのカスタムフィールドに入力した情報が表示される点ですね。

その他の画像や文章も、通常の投稿と同様に追加/編集/表示できます。

他のカレンダーとの連携

ページ上部の[カレンダーに追加]プルダウンメニューをクリックすると、イベントのスケジュールが各種カレンダーに追加できます。

all-in-one-event-calendar-%e3%80%8c%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%81%ab%e8%bf%bd%e5%8a%a0%e3%80%8d

イベントのスケジュール情報を自分が普段使っているカレンダーに簡単に登録できるのは、すごく便利な機能ですね。

こんな機能、自分で実装しようと思ったら、何年かかるかわかりません。

良くできたプラグインを使う大きなメリットです。

まとめ

今回の記事では、「All-in-One Event Calendar」プラグインの機能やデザイン面の魅力を紹介しました。

次回、以下の記事では、「All-in-One Event Calendar」プラグインで入力したイベントをメインページに表示する方法を紹介します。

All-in-One Event Calendar メインページにイベントを表示する
「All-in-One Event Calendar」プラグイン 前回は、以下の記事で「All-in-One Event Calendar」の表示例や使い勝手を紹介しました。 この記事では、「All-in-One Event Calenda...

コメント

  1. […] All-in-One Event Calendar WordPressにイベントカレンダーがカッコよく追加できるプラグイン ちょいプラ素材 […]