Jetプラグインを解き明かす

おしゃれなイベントカレンダーの作り方【JetEngine】

カレンダーに画像や予定を入れてさらに自分好みのビジュアルにアレンジしたい…

JetEngineとElementorをつかえば、自由にスタイルできとても機能的でおしゃれなイベントカレンダーを作ることができます!

JetEngineで作れるオシャレなイベントカレンダーのサンプル

イベントカレンダーをクリックするとページを表示も可能で、その日の時間や場所などの詳細も見られるようなカスタムも可能です。

新商品の発売日をカレンダーに載せてもいいですし、ビジネスWebサイトでイベント告知などをカレンダーで表示させてみるのもいいですね!

JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。

【JetEngineでカレンダーを作成する簡単ステップ】

  1. JetEngineでカレンダーを作成するには設定の『Calendar』ウィジェットをオンにする
  2. Post Typesでカレンダーの『イベント』のカスタム投稿タイプを作成する
  3. Listingsで『イベント』の投稿タイプを元にカレンダーのテンプレートを作成する
  4. 固定ページにJetEngineの『Calendar』ウィジェットを挿入しカレンダーを表示・編集する

JetEngineでイベントカレンダーを作成する方法を動画でご覧になりたい方はこちらからどうぞ!

今回JetEngineで作成するイベントカレンダーに必要なプラグイン

JetEngineでイベントカレンダーを作る上で必要なプラグイン

今回紹介するイベントカレンダーの作成で必要なWordPressプラグインは以下の通りです。

JetEngineのカレンダー機能をElementorで編集していきます。

Elementor Pro(有料版)は実際に無くてもイベントカレンダーを作成できますが、Proウィジェットを使いたい場合はインストールしましょう。

JetEngineのカレンダー機能を使用していくにあたり、モジュールをオンにしていく必要がありますので以下の操作を行なってください。

JetEngineの『Calendar』モジュールをオンにする
  1. ダッシュボード左側の『JetEngine』をクリック
  2. 『Default Modules』の『Calendar』をオンにする
  3. 『Save』をクリック

これをしないとJetEngineのカレンダー機能が使えませんので注意してください!

次に今回のようなイベントカレンダーを作成するにはJetEngineのPost Types(カスタム投稿タイプ)を2つ作成する必要がありますので以下で説明していきます!

JetEngineのPost Typesでイベントカレンダーを作成するための投稿タイプを作成する

JetEngineのPost Typesで以下のカスタム投稿タイプを作成しましょう。

  • イベント:イベント情報を作成するページ

※今回のサンプルとして投稿タイプ名を『イベント』としていますが、こうでなくてはならない訳ではありませんので、自分のスタイルに合わせて自由に名称設定などしてくださいね!

JetEngineで投稿タイプを新規追加する方法は以下を参考にしてください。

カレンダーを作成するためにはJetEnginで新規投稿タイプを追加する
  1. ダッシュボード左側のJetEngineの中の『Post Types』をクリック
  2. 画面上部の『Add New』をクリック

すると投稿タイプの設定画面が表示されますので以下のように操作をしてください。

『イベント』の投稿タイプを作成する手順

JetEngineのPost Typesで『Add New』をクリックし、以下の手順で『イベント』の投稿タイプを設定してください。

『イベント』というポストタイプを作成する
  1. Post Type Nameを入力:イベント
  2. Post Type Slugを入力:event
    ※半角英数字で記入しましょう( `-` または`_`は使用可)
  3. 『Advanced Settings』をクリック

Addvanced Settingsでアイキャッチ画像を追加する

イベントの投稿タイプにサムネイル(アイキャッチ画像)を追加する方法
  1. Advanced Settingsを下にスクロールする
  2. 『Supports』で『Thumbnail(Featured Image)を追加する
  3. Meta fieldsの『New Meta Field』をクリック

もしAdvenced Settingsについてくわしく知りたい場合は»JetEngineのLabelsとAdvanced Settingsの設定方法の記事をご覧ください。

『日付』のメタフィールドを作成

『イベント』の投稿タイプに『日付』のメタフィールドを追加していきます。

イベントの投稿タイプに『日付』のメタフィールドを作成
  1. Label:日付
  2. Name/ID:event_date
  3. Object type:Field
  4. Field type:Date
  5. Save as timestamp:オン
    ※1970年の1月1日からその設定した日までの秒数を表します。
    ※Clocoblockがこのフォーマットでの保存を推奨。

『時間』のメタフィールドを作成

『イベント』の投稿タイプにさらに『時間』のメタフィールドを追加していきます。

イベントの投稿タイプに『時間』のメタフィールドを作成
  1. Label:時間
  2. Name/ID:event_time
  3. Object type:Field
  4. Field type:Time
  5. 『Add Post Type』をクリック
    ※これでイベントの投稿タイプの設定は以上です。
カレンダーを作成するためにJetEngineで作成した『イベント』と『お知らせ』の投稿タイプ

するとこのように『イベント』と『お知らせ』がCustom Post Types Listとダッシュボードにそれぞれ追加されました!

なお、メタフィールドについては»JetEngine Meta fieldsの機能説明・カスタムフィールドのレイアウトのカスタマイズの記事でくわしく説明をしています。

次に、『イベント』の投稿タイプのページを追加していきましょう。

作成したイベントの投稿タイプのページを追加する

ここで『イベント』の投稿タイプのページを追加していきます。

投稿タイプ『イベント』で作成したページがカレンダーのどの部分になるのかを表した図

ちなみにこの投稿タイプで追加するページは上記カレンダーで最終的にそのように表示されます。

イベントのページを新規追加する
  1. ダッシュボード左側の『イベント』をクリック
  2. 画面上部の『新規追加』をクリック

すると以下のWordPressのブロックエディターが表示されます。

ブロックエディターでイベントのページ作成・タイトルと本文
  1. イベントのタイトルを入力
  2. イベントの内容を本文に入力
ブロックエディターでイベントのページ作成・日付の設定

『日付』のフィールドでイベントが開催される日付を設定しましょう。

次に『時間』のフィールドでイベントが開始する時間を設定します。

ブロックエディターでイベントのページ作成・時間の設定
  1. 『Hour(時)』と『Minute(分)』のカーソルをスライドさせて時間を指定する
  2. 『Done』をクリック

次にアイキャッチ画像を挿入してページを完成させます。

ブロックエディターでイベントのページ作成・サムネイルを入れる
  1. アイキャッチ画像を挿入する
  2. 『公開』をクリック

このようにして1つのイベントに対して1ページを作成してください。

以下は今後開催予定のイベントを作成した後の『イベント』の投稿タイプ一覧画面です。

JetEnginenお投稿タイプのAdmin Coulmnで追加した一覧画面に表示されるサムネ

上記ではアイキャッチ画像も一覧画面に表示されていますが、デフォルト設定では表示されません。

JetEngineを使えばこのように簡単に自分好みのUIを作成することができます。

今回は管理者画面にアイキャッチ画像などの情報を表示させる方法は紹介しませんが»JetEngineの使い方【カスタム投稿タイプ】初心者シリーズ1の36:17あたりでやり方を説明していますのでぜひ参考にしてください!

次にJetEngineのListingsでカレンダーのテンプレートを作成していきましょう。

JetEngineのListingsでカレンダーのテンプレートを作成

Listingsで作成したカレンダーのテンプレート

ここで、このようなカレンダーにイベントを表示させるために使う動的なテンプレートをListingsで作成していきます。

Listing Itemを追加し初期設定をする

Listingsでカレンダーのテンプレートを作成する方法は以下の手順を参考にしてください。

Listing Itemを新規追加する
  1. ダッシュボード左側の『Listings』をクリック
  2. 画面上部の『Add New』をクリック

すると以下の『Setup Listing Item』が表示されますので以下のように設定を行なってください。

Listing Itemの設定を行う
  1. Listing source:Posts
  2. From post type:イベント
  3. Listing item name:イベントカレンダーアイテム
    ※自分でわかる名称にしてください。
  4. Listing view:Elementor
  5. Create Listing Itemをクリック

するとElementorの編集画面が表示されますので、次に以下の操作を行なってください。

Previwe Widthでテンプレートの幅を変更する
  1. 画面左下の『ギアマーク』をクリック
  2. 『Listing Settings』をクリックしタブを開く
  3. 『Preview Width』でテンプレートの幅を好みの幅に変更する

Elementorに追加されたJetEngineのウィジェットを追加しListingsの動的なテンプレートを構成する

ここからElementorでJetEnginのダイナミックウィジェットを使ってカレンダーのテンプレートを構成していきます。

アイキャッチ画像を表示させる方法

Daynamic Imageウィジェットを挿入

カレンダーのテンプレートでアイキャッチ画像を動的に表示させるには『Dynamic Image』ウィジェットを挿入します。

SourceをPost thumbnailにする

Dynamic Imageウィジェットの『Source』で『Post thumbnail』選択します。
※デフォルトですでになっているかもしれません。

すると上記画像のように『イベント』で作成したページに追加したアイキャッチ画像が表示されます。

タイトルを表示させる方法

カレンダーのテンプレートのタイトルを動的に表示させるには『Dynamic Field』ウィジェットを使いましょう。

Dynamic Fieldウィジェットを挿入

Dynamic Fieldウィジェットをカラムの中に挿入します。

すると、以下のようにおそらくデフォルトでタイトルが表示されると思います。

タイトルを表示させるための設定

タイトルが表示されている原理として以下の設定が必要になりますので覚えておきましょう。

  • Source:Post/Term/User/Object
  • Object Field:Title

時間を表示させる方法

カレンダーのテンプレートの時間を動的に表示させるには『Dynamic Field』ウィジェットを使いましょう。

以下の設定を行なってください。

時間を表示させるための設定
  • Source:Meta Data
  • Meta Field:時間

すると時間が表示されます。

しかし時間以外にも『開始時間:』などのテキストを加えたいことがあると思いますので以下でその方法を説明します。

時間の手前に『開始時間:』のテキストを加える方法

今回はDynamic Fieldウィジェットの時間の手前に『開始時間:』というテキストを加えてみたいと思います。

なお、この方法は時間に限らず使用できますので原理を覚えておきましょう!

時間の手前に『開始時間:』と表示させる方法
  1. Customize field outputを『オン』にする
  2. Field formatに『開始時間: %s』と記入する

これでテンプレートの表示が『開始時間: ○○:○○』となりました。


あとは好きなようにListing Itemのスタイルをしましょう!

スタイルが完了すれば『更新』をクリックしてください。

アイテムが追加された後のListing Items一覧

更新をクリックするとこのようにListingsの中に『イベントカレンダーアイテム』が追加されます。

次はいいよいよ、カレンダーを表示させるページを作成していきます!

固定ページにCalendarウィジェットを挿入しカレンダーを表示させる

JetEngineのカレンダーをサイトに表示させるためには、固定ページで編集をしていきます。

固定ページを新規追加
  • 左側のダッシュボードの『固定ページ一覧』をクリック
  • 『新規追加』をクリック
タイトルを入力しElementorで編集をクリックする
  1. カレンダーのページのタイトルを入力する
    ※このサンプルでは『イベントカレンダー』とします。
  2. 『Elementorで編集』をクリック
固定ページにCalendarウィジェットを挿入

Elementorの編集画面に来たら、JetEngineで新規追加されたウィジェットの『Calendar』ウィジェットを挿入しましょう。

以下はCalendarウィジェットを挿入した直後の表示画面です。

Calendarウィジェットを挿入直後の表示画面

Calendarウィジェットを挿入しただけではまだカレンダーは表示されませんので、ここからエディターを操作していきます。

Calendarウィジェットのエディターの『Listings』で先ほど作成したListing Itemの『イベントカレンダーアイテム』を選択しましょう。

Listingsで『イベントカレンダーアイテム』を選択

すると上記のようにカレンダーが表示されます!

しかし、このままではまだイベントがカレンダー内に縦一列に、同じ日付にすべてのイベントが表示されてしまっているのでさらに以下の編集を加えます。

イベントカレンダーを正しく表示するための設定
  1. Group posts byを『Date from custom field』を選択する
  2. Meta field nameにイベントの投稿タイプで設定した『日付』のメタフィールドのName/IDを記入する
    ※このサンプルでは『event_date』となります。
Meta field nameのソース

ちなみに上記はJetEngineで作成した『イベント』の投稿タイプの編集画面で、日付のName/IDを示した画像です。

これでJetEngineのイベントカレンダーの表示設定は完了です!

以下は実際のイベントカレンダーの表示です。

JetEnginで作成したイベントカレンダー

イベントカレンダーのUIの編集方法

カレンダーのUIを編集する方法を一部紹介していきます。

月〜日の表記を月曜日〜日曜日にする方法

JetEngineのカレンダーのデフォルトでは曜日が『月〜日』と略されて表記されています。

曜日を略さずフルで表記する方法

曜日を略さずに『月曜日〜日曜日』までフルで表示させた場合は『Week days format』で『Full』を選択しましょう。

※デフォルトは『Shrot』に設定されています。

現在の月のカレンダーを常にデフォルトで表示させる方法

カレンダーを常に現在の月で表示させる設定

サイトに常に現在の月のカレンダーを表示させるためには『Show posts from the nearby months』を必ずオンにしましょう。

過去のイベントを非表示にする方法

過去のイベントを非表示にする設定

カレンダーに掲載された過去のイベントを非表示にするには、『Hide past event』を『オン』にしましょう。

カレンダーのイベントをクリックしてページに飛ばす方法

カレンダーのイベントをクリックでページにリンクさせるには、Listing Itemの編集画面から行います。

以下の手順を参考にしてください!

カレンダーをクリックでページにリンクさせる方法
  1. 画面左下のギアマーク(設定)をクリック
  2. 『Listing Settings』をクリックしタブを開く
  3. 『Make listing item clickable』を『オン』にする
    ※Link sourceが『Permalink』になっていることを確認してください。

これでカレンダーのイベントをクリックすると各ページにリンクさせる設定の完了です!

まとめ

JetEngineでおしゃれなイベントカレンダーを作ってサイトで表示させることができました!

自分でカレンダーを好きなようにスタイルができ、さらにクリックでページの詳細を閲覧できたりととても見やすく機能的ですね。

JetEngineにはこのようにまだまだ隠された便利な機能がたくさんあります。

ぜひ、JetEngineのCalendarウィジェットを使ってカレンダーを作成してみてくださいね!

この他にも、JetEngineで何でもQRコードにする方法を紹介した記事などもありますのでぜひ参考にしてください。

【JetEngineでカレンダーを作成するメリット!】

  • カレンダーは自分好みにElementorの編集機能を使って自由にスタイルできる!
  • JetEngineのListingsで動的に表示できるテンプレートを作成しているので、投稿タイプにページさえ追加すれば自動的にカレンダーに表示される!
  • カレンダーをクリックして詳細ページに飛ばすこともでき機能的!

JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。

TOFUラボ主催のNaomi SuzukiはElementor、Divi、CrocoblockのノーコードWeb制作を初め、WordPressに関わる有益な情報をNocodeweb.jpJet.nocodeweb.jp(当サイト)Naomi SuzukiのYouTubeチャンネルで配信しています。

また、Naomiの配信する完全無料のメルマガでは、WordPressの脆弱性に関する情報やセールの情報、居住地ブダペストのノマドライフを毎週火曜日に配信しています。

ぜひ、登録してくださいね!

目次