All-in-One Event Calendarの使い方!カスタマイズ性抜群のイベントカレンダーが作成可能

All-in-One Event Calendarのアイキャッチ

Webサイトにイベント情報を掲載したいという方も多いのではないでしょうか。WordPressには、イベント情報をカレンダー表示できるプラグインがたくさん提供されています。

今回はその中から「All-in-One Event Calendar」を紹介します。

All-in-One Event Calendarの機能

All-in-One Event Calendarでできる機能を整理します。All-in-One Event Calendarは非常に多機能で優秀なプラグインですが、ご自身の実装イメージや要件と異なる場合は他のプラグインを検討しても良いかもしれません。

  • イベントのカレンダー表示とリスト表示(日、月、週ベース)
  • Google Mapとの連携
  • Google Calendarとの連携
  • イベントのチケット発券機能(有料プラン)
  • ショートコード埋め込み
  • レスポンシブ対応

イベントページを作成し、各イベントの日程をカレンダーで表示することができます。表示方法はカレンダー形式で表示できますが、イベントのある日だけリスト形式で表示することもできます。

各種APIとの連携も可能で、Google Mapを使ってイベントの会場の場所を指定することもできますし、Google Calendarを使用している方は連携してWebサイトに反映することもできます。

ただ、基本的にイベント用のカレンダープラグインのため、営業日や休業日を一括で設定するといったことには向いていません。

All-in-One Event Calendarの使い方

All-in-One Event Calendarの使い方を解説します。

All-in-One Event Calendarのインストール

WordPressの管理画面から「プラグイン」→「新規追加」をクリックし、「All in One Event Calendar」をインストールしてください。

All-in-One Event Calendarのインストール

インストールが完了したらそのまま有効化します。

All-in-One Event Calendarの設定

インストールしたままの状態では、プラグインを使用することができません。「イベント」のカスタム投稿のメニューが追加されますので、「有効にする」をクリックしてください。

All-in-One Event Calendarの有効化

プラグインを使用するために、TIME.LYにユーザー登録する必要があります。氏名、メールアドレス、パスワードを入力して登録してください。

All-in-One Event Calendarの会員登録

ログインができるとプラグインが使用可能になります。設定を行いますので、「イベント」→「設定」をクリックしてください。

カレンダーの表示設定

「イベントの閲覧」タブではイベントを表示するカレンダーの表示形式を設定することができます。

デフォルト設定のままでも使用できますが、一般的なカレンダーのようなデザインにしたい場合は「Available views」の「デフォルト」を「月」に設定しておきましょう。

イベントの閲覧ページ

その他の細かな設定は下記を参考にしてください。

カレンダーページ カレンダーを表示する固定ページのタイトル
Week starts on 週の始まり曜日
Available views 有効化するカレンダーの表示形式とデフォルト設定
Timezone タイムゾーン
Default calendar start date (optional) カレンダーの開始日
Agenda pages show at most 表示するイベントの最大件数
Week/Day view starts at 週/日表示の時刻の開始時間
Week/Day view ends at 週/日表示の時刻の終了時間
Google Maps API Key Google MapのAPIキー
Word-wrap event stubs in Month view 月表示で 終日イベントのみ表示
In Agenda-like views, include all events from last day shown 日程表で表示されている最終日までの全てのイベントを表示
Keep all events expanded in Agenda view 日程表ですべてのイベントを展開する
Show year in calendar date labels 日付に年度を表示する
Show location in event titles in calendar views カレンダー表示のイベントに場所を表示する
Exclude events from search results 検索結果からイベントを除外
Hide Subscribe/Add to Calendar buttons in calendar and single event views カレンダー下の[登録するボタン]を非表示
Hide Get a Timely Calendar button カレンダー下の[Timely Calendarを入手]ボタンを非表示
Hide Google Maps until clicked クリックするまでGoogleカレンダーを非表示
Affix filter menu to top of window when it scrolls out of view スクロール時にフィルターメニューを上部に固定
Strict compatibility content filtering フィルタリングを厳格に
Hide featured image from event details page イベント詳細ページのアイキャッチ 画像を非表示
Display events in calendar time zone カレンダーのタイムゾーンでイベントを表示する

イベントの追加/編集

「イベントの追加/編集」タブでは、日付などイベント作成時の入力規則を設定します。こちらはそのままの状態でも問題ありません。

イベントの閲覧/編集ページ

Input dates in this format 日付フォーマット
Use 24h time in time pickers タイムピッカーを24時間表示にする
Disable address autocomplete function 住所の自動入力機能を無効にする
Use the configured region (WordPress locale) to bias the address autocomplete function 住所の自動入力機能にWordPress l0caleを使用

詳細設定

「詳細」タブでは、システム周りのより詳細な設定が可能です。あまり変更することはないでしょう。

詳細設定ページ

Skip in_the_loop() check that protects against multiple calendar output in_the_loop()チェックをスキップする(カレンダーがうまく表示されない場合に有効にする)
Disable gzip compression. gzip圧縮を無効化
Use frontend rendering. フロントエンド (ブラウザ)でカレンダーをレンダリング
Use advanced JS cache. JavaScriptキャッシュを使用
Link CSS in <head> section when file cache is unavailable. インラインではなくCSSファイルを<head>内で読み込む
Publicize, promote, and share my events marked as public on the Timely network. Timelyネットワークでイベントを宣伝

イベントページの作成

実際に設定したカレンダーをページに表示させます。「イベント」→「新しく追加」をクリックしてください。

「タイトル」と「イベントの詳細」に必要項目を入力していきます。全てを入力する必要はありません。

イベント作成ページ

「イベントの場所の詳細」の「地図を表示」させたい場合は、さきほどの「設定」→「イベントの閲覧」タブから「Google Maps API Key 」を入力する必要があります。

Google Maps API Keyを入力

「イベントの料金とチケット」を使用するには有料プランの「Ticketing plan」を購入する必要があります。

記入が完了したら「公開」ボタンをクリックしてください。

カレンダーを公開

プラグインを有効化した際に固定ページに「Calendar」というページが自動で作成されています。

Calendarの固定ページ

こちらのページに先ほど設定したカレンダーを表示されています。実際にページを開いて確認してみてください。

All-in-One Event Calendarのカレンダー表示

無事に表示されています。

カレンダーのデザインカスタマイズ

「All-in-One Event Calendar」にはいくつか「カレンダーテーマ」とその「テーマオプション」が用意されています。

ご自身の気に入ったデザインのものがあれば、「有効にする」をクリックすることでカレンダーテーマを切り替えることができます。

カレンダーテーマ

「テーマオプション」では、下記項目のデザインが設定可能です。ご自身でCSSを書き込む必要はありません。

  • 全般
  • ボタン
  • フォーム
  • カレンダー全般
  • 月/週/日 表示
  • 日程表示

All in One Event Calendarで使えるショートコード

プラグインインストール時に作成される「Calendar」ページではなく、ご自身で作成しているページにカレンダーを表示したい場合は、ショートコードを使用することができます。

表示したいページの本文にショートコード[ai1ec]を記入してください。

本文にショートコードを埋め込み

また、ショートコードにはいくつかオプションが用意されているので、必要に応じてカスタマイズすることができます。

月表示 [ai1ec view=”monthly”]
週表示 [ai1ec view=”weekly”]
日表示 [ai1ec view=”oneday”]
日程表示 [ai1ec view=”agenda”]
一般フォーム: 別な表示 [ai1ec view=”someother”]
デフォルトの表示設定に従う [ai1ec]
イベントカテゴリの名前かスラッグでフィルタ [ai1ec cat_name=”祝日”]
イベントカテゴリの名前かスラッグでフィルタ(複数はカンマで区切る) [ai1ec cat_name=”月の周期,星座の日付の範囲”]
イベントカテゴリのIDでフィルタ [ai1ec cat_id=”1″]
イベントカテゴリのIDでフィルタ (複数のIDはカンマで区切る) [ai1ec cat_id=”1,2″]
イベントタグの名前かスラッグでフィルタ [ai1ec tag_name=”Tipsとトリック”]
イベントタグの名前かスラッグでフィルタ(複数はカンマで区切る [ai1ec tag_name=”創作執筆,パフォーミングアート”]
イベントタグのIDでフィルタ [ai1ec tag_id=”1″]
イベントタグのIDでフィルタ (複数のIDはカンマで区切る) [ai1ec tag_id=”1,2″]
投稿IDでフィルタ [ai1ec post_id=”1″]
投稿IDでフィルタ (複数のIDはカンマで区切る) [ai1ec post_id=”1,2″]
ページあたりのイベントの数を制限 [ai1ec events_limit=”5″]

Googleカレンダーとの連携

Googleカレンダーと連携させたい場合は、「イベント」→「Import Feeds」をクリックします。

「Import Feeds」タブで「Feed URL:」欄にGoogleカレンダーのiCal形式の公開URLを記入します。

Google Calendarのインポート

ただ、非同期でGoogleカレンダーの内容が反映されるわけでないため、「リフレッシュ」ボタンをクリックして更新する必要があるようです。

「このページにアクセスする権限がありません。」と表示される場合

All-in-One Event Calendarプラグインの設定画面を開いても「このページにアクセスする権限がありません。」と表示される場合があるようです。

このページにアクセスする権限がありません。

多くの場合、TIME.LYにユーザー登録していないことが原因かと思われます。「イベント」→「有効にする」をクリックし、ユーザー登録を完了して再度設定画面を開いてみてください。

制作費用参考表

想定費用 想定納期
コーポレートサイト 10万円〜 1ヶ月〜
メディアサイト 10万円〜 1ヶ月〜
WordPressテンプレートプラン 5万円〜 3週間〜
ランディングページ 5万円〜 1ヶ月〜
保守運用 1万円〜 -
SEOコンサルティング 1万円〜 最低契約期間3ヶ月
その他サイト不具合等のご相談 応相談