WordPressテーマで使えるシンプルイベントカレンダー(仮称)。

WordPressテーマで使えるシンプルイベントカレンダー(仮称)。

WordPressでカレンダーを使いたい目的はいくつもあります。しかし既存の方法は「帯に短し襷に長し」でした。そこでカスタムフィールド「イベント日程」の日付に投稿タイトルをカレンダー形式で表示するだけ!のシンプルなイベントカレンダーを作成しました。

こちらでご覧いただけます。Event Calendar

これまでのカレンダーは。

  1. 本来のブログ用として、投稿をした日を表示したい。
  2. できれば投稿タイトルも表示したい。
  3. 未来の予定・イベントを表示したい。

1.投稿カレンダー

これはWordPress標準のウィジェット「カレンダー」で実現できます。

ただしカレンダーを表示して、投稿がある日に印(色が変わる等)がつくだけです。・・何の意味があるのだろう?と、初めてWordPressに触った時から不思議に思っている機能です。

2.投稿のカレンダー形式一覧表示

こちらの記事で紹介している「投稿タイトルを表示できるカレンダー」です。

多分に自己満足な気もしますが、投稿内容によっては大変有用です。

  • 日記、創作物の紹介、その他時系列で見せたい記事の場合。
  • WordPressの予約投稿を解除すれば、イベントカレンダーとしても使えます。予約投稿の解除はfunctions.phpで行えます。

標準ウィジェットではできない「投稿タイトルの表示」が可能です。

3.イベントカレンダー

高機能なプラグインが多数公開されています。

  • Event Organiser
  • Modern Events Calendar Lite
  • Sugar Calendar (Lite)
  • The Events Calendar
  • WordPress Editorial Calendar
  • WP Event Manager
  • WP FullCalendar
  • XO Event Calendar

ざっと調べるだけでも出てくる出てくる!特にEvent Organiserは多機能で評判も良く、弊社でも使用しています。

ただしどれにも共通する問題があります。

  • 多機能故に設定が複雑。
  • サイトごとに細かい設定をいちいちしなければならない。CSSの読み込み等はサイトに合わせて調整せねばならず煩雑。
  • JSを使っているので他のプラグインとコンフリクトしやすい。
  • デザインテイストが独特。サイト全体に馴染ませるのが大変。
  • イベントは「カスタム投稿」として扱われるので、使い方を教えるのが難しい。
  • こんなに機能はいらない・・・・・。

シンプルイベントカレンダー(仮称)は投稿をカレンダーに表示します。

Event Calendar

ここで紹介するシンプルイベントカレンダー(仮称)は、実にシンプルです。

  • 投稿に日付カスタムフィールド(イベント日程)が設置されていて、そこで指定した日付に投稿を表示します。投稿日は関係ありません(ここが投稿のカレンダー形式一覧表示と異なります)。
  • カテゴリーから「イベント」を選びます。
  • 投稿ページにイベント日程(日付)を表示します。

以上です。

PCでの表示。

スマホでの表示。

単ページ。投稿日とは別にイベント開催日を表示します。

イベント日程設定もカレンダーをクリックするだけ。

メリット。

  • シンプルなので使い方を覚えるのがかんたんです。直感的に使えます。
  • 全て投稿として扱われるので、他のページからの呼び出しも楽です。
  • 独自のデザイン設定をする必要がありません。全体のスタイルシートに従います。
  • 細かい設定をしなくても動きます。
  • イベント終了後はそのままアーカイブとして残せます。レポート等を追加しておくのも良いでしょう。

設置時のメリット。

  • functions.phpでカスタムフィールドを設定しているので、ACF等のプラグインは不要です。
  • page-event-calendar.phpを設置します。
  • スタイルシートにカレンダー表示(スマホ/PC用)を追記します。
  • カテゴリーに「イベント(スラッグ:event)」を設定します。
  • single.phpにイベント日付を表示するよう改造します。
  • 固定ページ「イベントカレンダー(スラッグ:event-calendar)」を公開します。
  • JSはありません。
  • 既存のサイトに追加設定する場合でもコンフリクトが起きず、「動かない!」ということがないように留意しました。また既存デザインにできる限り従うように調整しています。

近日、ソースコード・設置方法詳細・解説を投稿します。

早急に設置したい方はぜひご相談ください。

この記事は2023/05/03に公開され2023/05/18に更新、408 views読まれました。

これまでのコメント

最近1ヶ月で人気の記事

WordPressテーマで使えるシンプルイベントカレンダー(仮称)。 - デザイン事務所ダウンアンダー 東京都練馬区。Wordpressはおまかせ。ホームページ・印刷など販売促進のためのデザインを提案します。

Copyright©デザイン事務所ダウンアンダー, All Rights Reserved.