ラッコサーバー

ラッコサーバーでサイトを管理すると売却時の価値を高く保てます!
サイト/ドメインの売却をシームレスに実現します。

ラッコサーバー詳細
オンライン事業売買
WordPressサイト売買
ドメイン売買
データを読み込み中...
データを読み込み中...
データを読み込み中...

【WordPress】イベントカレンダーを無料で設置する方法(The Events Calendar)

セミナーや店舗の営業日を、サイトの見やすいカレンダーで案内したい!

WordPressに「イベントカレンダー」を設置すれば、セミナーや店舗の営業日などの予定を訪問者に一目で伝えられます。この記事では、無料プラグイン「The Events Calendar(WordPress.org公式)」を使って以下の3つを実現する手順を解説します。

  • 無料プラグイン「The Events Calendar」のインストールと有効化
  • イベントの登録とカレンダー表示ページの作成
  • カレンダーをメニューやウィジェットでサイトに表示する方法
ラッコサーバー

ラッコサーバーでサイトを管理すると売却時の価値を高く保てます!
サイト/ドメインの売却をシームレスに実現します。

ラッコサーバー詳細
オンライン事業売買
WordPressサイト売買
ドメイン売買
データを読み込み中...
データを読み込み中...
データを読み込み中...

「イベントカレンダー」の設置に必要なもの(The Events Calendarとは)

イベントカレンダーの設置に必要なのは、専用プラグインを1つ入れることだけです。ここでは無料で使える定番プラグイン「The Events Calendar」を使います。

「The Events Calendar」は、有効インストール数70万以上の人気プラグインです(WordPress.org公式ページ)。

無料版でも、月表示・リスト表示・日表示のカレンダーに対応し、イベントごとに会場(Venue)や主催者(Organizer)を保存できます。公式ページによると35言語に翻訳済みで、日本語(Japanese)もローカライズ対応リストに明記されています。

動作環境について
The Events Calendarは WordPress 6.7以上が必要で、公式には WordPress 7.0 までテスト済みです(出典: WordPress.org公式ページ)。本番サイトの WordPress 7.0 でも問題なく動作することを確認しています。

STEP1:The Events Calendarをインストール・有効化する

まずはプラグインをインストールして有効化します。

1. プラグインを新規追加から検索する

WordPress管理画面の左メニューから「プラグイン」→「新規プラグインを追加」をクリックし、「プラグインの検索」欄に「The Events Calendar」と入力します。検索結果に表示されたプラグインの作者名や有効インストール数を確認し、同名の別プラグインと取り違えないようにしましょう。

2. インストールして有効化する

目的のプラグインが見つかったら「今すぐインストール」→「有効化」の順にクリックします。

有効化すると、左メニューに「イベント」という項目が追加されます。プラグイン一覧の「The Events Calendar」の行には「停止」「設定」「カレンダー」というリンクも表示され、「カレンダー」リンクから生成済みのカレンダーページへすぐにアクセスできます。

WordPressプラグイン一覧画面—The Events Calendar有効化後の表示
▲ 有効化後は「停止」「設定」「カレンダー」のリンクが表示される
MEMO

有効化直後に「Welcome to The Events Calendar」という英語のセットアップ画面が表示される場合があります。「Skip guided setup」をクリックすればスキップでき、あとから通常の管理画面で設定できます。

STEP2:最初のイベントを登録する

会場や日時の入力、意外とつまづきやすいんです…

プラグインを有効化したら、さっそく最初のイベントを登録してみましょう。

1. イベントの新規追加画面を開く

左メニューの「イベント」→「新規イベントを追加」をクリックします。通常の投稿とよく似た編集画面が開きます。

新規イベントを追加画面—イベントメニューとタイトル入力欄
▲ 「新規イベントを追加」の編集画面でタイトルを入力したところ

2. タイトル・日時・会場(Venue)を入力する

まず画面上部にイベントのタイトルを入力します。次に、「イベントの設定」欄で開始日時・終了日時を選びます。終日のイベントなら該当のチェック欄を有効にします。

同じ「イベントの設定」欄には会場(Venue)主催者(Organizer)を入力する項目もあります。会場名や住所を入れておくと、イベント詳細ページにGoogleマップで地図を表示できます(無料版に搭載の機能です)。

新規イベント編集画面—会場名・主催者名の入力欄
▲ 「イベントの設定」欄にある会場(Venue)・主催者(Organizer)の入力項目

3. 説明とアイキャッチ画像を設定して公開する

本文欄にイベントの説明を書き、必要ならアイキャッチ画像を設定して「公開」をクリックします。

公開すると、イベント詳細ページが自動で作成されます。「詳細」「日付」「時間」といった情報と「カレンダーに追加」ボタンが表示されれば成功です。

公開済みイベント詳細ページ—タイトル・日時とカレンダーに追加ボタン
▲ 公開するとタイトル・日時・詳細・「カレンダーに追加」ボタンを含むページが自動生成される

STEP3:カレンダーをサイトに表示する

これでいよいよカレンダーがサイトに表示されます!

イベントを登録したら、カレンダーを訪問者が見られるようにサイトへ表示します。The Events Calendarは有効化した時点でカレンダーページを自動生成するため、あとはそれを案内するだけです。

1. カレンダーページのURLを確認する

The Events Calendarは、有効化するとカレンダー表示用のページを自動で用意します。URLは通常「あなたのサイトのURL/events/」の形式です。プラグイン一覧の「The Events Calendar」の行にある「カレンダー」リンクをクリックすれば、このページへ直接アクセスできます。

アクセスすると、「今後のイベント」という見出しとともに登録済みのイベント一覧が表示されます。

イベントカレンダーページ—今後のイベント一覧の表示
▲ 「/events/」にアクセスすると「今後のイベント」の一覧が表示される

2. ナビゲーションメニューに追加する

訪問者がカレンダーにたどり着けるよう、サイトのメニューにリンクを追加します。左メニューの「外観」→「メニュー」を開きます。

「メニュー項目を追加」の一覧から「カスタムリンク」を開き、先ほどのカレンダーページURLを入力します。リンク文字列に「イベントカレンダー」などと設定して「メニューに追加」をクリックします。最後に「メニューを作成」または「メニューを保存」を押せば完了です。

メニュー編集画面—メニュー項目を追加のイベント関連アコーディオン
▲ 「メニュー項目を追加」に「イベント」「カスタムリンク」などの項目がある

3. ウィジェットで「イベントリスト」をサイドバーに表示する

サイドバーに今後の予定を並べたいときは、ウィジェットを使います。「The Events Calendar」には「イベントリスト」というウィジェットが用意されており、今後のイベントの一覧を表示できます。

左メニューの「外観」→「ウィジェット」を開き、利用できるウィジェットの一覧から「イベントリスト」を選んで、サイドバーなどのウィジェットエリアに追加します。これで登録済みのイベントが日付順に自動で並びます。

ウィジェット一覧画面—イベントリストウィジェット
▲ ウィジェット一覧に「イベントリスト」が用意されている

カレンダーの表示形式を切り替える(月表示・リスト表示・日表示)

「The Events Calendar」の無料版は、公式ページによると月表示・リスト表示・日表示の3つの表示形式に対応しています。

カレンダーページの「今後のイベント」という見出し部分をクリックすると、月間カレンダー形式の日付ピッカーが表示され、日付を選んでその日の予定を確認できます。もう一度見出しをクリックすると、元の一覧表示に戻ります。

イベントカレンダーページ—月間カレンダーの日付ピッカー
▲ 見出しをクリックすると月間カレンダーの日付ピッカーが表示される

予定を俯瞰したいときは一覧表示、特定の日の予定を確認したいときは月間カレンダーの日付ピッカーというように、用途に合わせて使い分けられます。

無料版でできないこと(PRO版との違い)

無料版の範囲もあらかじめ知っておくと安心ですよ。

「The Events Calendar」はコア機能を無料で使えますが、一部の高度な機能は有料のPRO版でのみ利用できます。導入前に無料版の範囲を知っておくと安心です。

公式ページによると、無料版では次の機能が使えません。

  • ショートコードでのカレンダー埋め込みは非対応(PRO版で利用可能)
  • 繰り返しイベント(recurring events)の自動生成は非対応(PRO版限定)

このほかPRO版では、追加のカレンダー表示形式(additional calendar views)、カレンダー用ショートコード、高度なウィジェット(advanced widgets)、カスタムイベント項目(custom event fields)などが提供されます。

注意

「毎週◯曜日のイベントを自動で作りたい」といった繰り返しイベントは無料版では自動生成できません。無料版で対応するには、1件ずつ手動で登録する必要があります。

逆に言えば、単発のイベントを登録してカレンダー表示する基本的な用途であれば、無料版だけで十分に運用できます。

💡 増えるイベント情報も高速表示で快適に
イベントが増えるとアイキャッチ画像や会場情報のデータ量も増え、サイトの表示速度に影響が出てくることがあります。
訪問者がイベント情報をストレスなく確認できるよう、サイト表示の快適さにこだわるなら、高速表示に強いラッコサーバーがおすすめです。
月額330円〜で利用でき、10日間の無料お試し期間も用意されています。

よくある質問

WordPressでカレンダーを作るプラグインのおすすめは?

「The Events Calendar」が定番です。WordPress.org公式ページによると有効インストール数は70万以上で、無料版でも月表示・リスト表示・日表示に対応しています。まず試すなら有力な選択肢です。

カレンダーにイベントを作成するにはどうすればいいですか?

左メニューの「イベント」→「新規イベントを追加」から登録します。タイトル・日時・会場を入力して公開するだけです。詳しい手順は「STEP2:最初のイベントを登録する」で解説しています。

WordPressでカレンダーを埋め込む方法は?

方法は主に2通りです。1つは有効化時に自動生成されるカレンダーページのURLをナビゲーションメニューに追加する方法、もう1つは「イベントリスト」ウィジェットをサイドバーなどに配置する方法です。用途に合わせて選べます。

WordPressでカレンダーブロックを作るには?

「The Events Calendar」の無料版は、ブロックエディタ専用のカレンダー表示ブロックを使う仕組みではありません。自動生成される固定のカレンダーページと、ウィジェットを使ってサイトに表示します。

WordPressでイベントカレンダーを表示するには?

プラグインを有効化すると、カレンダー表示用の「イベント」ページが自動で公開されます。このページにアクセスすれば、月表示・リスト表示・日表示でイベントを確認できます。

The Events Calendarは無料で使えますか?

コア機能は無料で使えます。イベント登録やカレンダー表示は無料版で完結します。ただし繰り返しイベントの自動生成などPRO限定機能は有料アドオンが必要です。詳しくは「無料版でできないこと(PRO版との違い)」をご覧ください。

スマホでもカレンダーは見やすく表示されますか?

「The Events Calendar」のカレンダーはレスポンシブ表示に対応しており、スマホの画面幅に合わせて表示が調整されます。実際の見え方はお使いのテーマにも左右されるため、公開前に自分の端末でも確認しておくと安心です。

無料版でできないことはありますか?

ショートコードによるカレンダー埋め込みと、繰り返しイベントの自動生成はPRO版限定です。単発イベントの登録・表示は無料版で問題なく行えます。詳細は「無料版でできないこと(PRO版との違い)」で解説しています。

まとめ

WordPressへの「イベントカレンダー」設置は、無料プラグイン「The Events Calendar」を使えば手軽に実現できます。プラグインを有効化し、イベントを登録し、カレンダーページをメニューやウィジェットで案内するという流れです。

無料版でも月表示・リスト表示・日表示に対応し、会場のGoogleマップ表示までカバーできます。単発イベントの告知であれば、無料版だけで十分に運用できます。

繰り返しイベントの自動生成やショートコード埋め込みが必要になったら、PRO版への移行を検討するとよいでしょう。まずは無料版でカレンダー運用を始めてみてください。

関連記事