カレンダーに画像や予定を入れてさらに自分好みのビジュアルにアレンジしたい…
JetEngineとElementorをつかえば、自由にスタイルできとても機能的でおしゃれなイベントカレンダーを作ることができます!
イベントカレンダーをクリックするとページを表示も可能で、その日の時間や場所などの詳細も見られるようなカスタムも可能です。
新商品の発売日をカレンダーに載せてもいいですし、ビジネスWebサイトでイベント告知などをカレンダーで表示させてみるのもいいですね!
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
【JetEngineでカレンダーを作成する簡単ステップ】
- JetEngineでカレンダーを作成するには設定の『Calendar』ウィジェットをオンにする
- Post Typesでカレンダーの『イベント』のカスタム投稿タイプを作成する
- Listingsで『イベント』の投稿タイプを元にカレンダーのテンプレートを作成する
- 固定ページにJetEngineの『Calendar』ウィジェットを挿入しカレンダーを表示・編集する
JetEngineでイベントカレンダーを作成する方法を動画でご覧になりたい方はこちらからどうぞ!
今回JetEngineで作成するイベントカレンダーに必要なプラグイン
今回紹介するイベントカレンダーの作成で必要なWordPressプラグインは以下の通りです。
- JetEngine
- Elementor
- (Elementor Pro)
JetEngineのカレンダー機能をElementorで編集していきます。
Elementor Pro(有料版)は実際に無くてもイベントカレンダーを作成できますが、Proウィジェットを使いたい場合はインストールしましょう。
JetEngineのカレンダー機能を使用していくにあたり、モジュールをオンにしていく必要がありますので以下の操作を行なってください。
- ダッシュボード左側の『JetEngine』をクリック
- 『Default Modules』の『Calendar』をオンにする
- 『Save』をクリック
これをしないとJetEngineのカレンダー機能が使えませんので注意してください!
次に今回のようなイベントカレンダーを作成するにはJetEngineのPost Types(カスタム投稿タイプ)を2つ作成する必要がありますので以下で説明していきます!
JetEngineのPost Typesでイベントカレンダーを作成するための投稿タイプを作成する
JetEngineのPost Typesで以下のカスタム投稿タイプを作成しましょう。
- イベント:イベント情報を作成するページ
※今回のサンプルとして投稿タイプ名を『イベント』としていますが、こうでなくてはならない訳ではありませんので、自分のスタイルに合わせて自由に名称設定などしてくださいね!
JetEngineで投稿タイプを新規追加する方法は以下を参考にしてください。
- ダッシュボード左側のJetEngineの中の『Post Types』をクリック
- 画面上部の『Add New』をクリック
すると投稿タイプの設定画面が表示されますので以下のように操作をしてください。
『イベント』の投稿タイプを作成する手順
JetEngineのPost Typesで『Add New』をクリックし、以下の手順で『イベント』の投稿タイプを設定してください。
- Post Type Nameを入力:イベント
- Post Type Slugを入力:event
※半角英数字で記入しましょう( `-` または`_`は使用可) - 『Advanced Settings』をクリック
Addvanced Settingsでアイキャッチ画像を追加する
- Advanced Settingsを下にスクロールする
- 『Supports』で『Thumbnail(Featured Image)を追加する
- Meta fieldsの『New Meta Field』をクリック
もしAdvenced Settingsについてくわしく知りたい場合は»JetEngineのLabelsとAdvanced Settingsの設定方法の記事をご覧ください。
『日付』のメタフィールドを作成
『イベント』の投稿タイプに『日付』のメタフィールドを追加していきます。
- Label:日付
- Name/ID:event_date
- Object type:Field
- Field type:Date
- Save as timestamp:オン
※1970年の1月1日からその設定した日までの秒数を表します。
※Clocoblockがこのフォーマットでの保存を推奨。
『時間』のメタフィールドを作成
『イベント』の投稿タイプにさらに『時間』のメタフィールドを追加していきます。
- Label:時間
- Name/ID:event_time
- Object type:Field
- Field type:Time
- 『Add Post Type』をクリック
※これでイベントの投稿タイプの設定は以上です。
するとこのように『イベント』と『お知らせ』がCustom Post Types Listとダッシュボードにそれぞれ追加されました!
なお、メタフィールドについては»JetEngine Meta fieldsの機能説明・カスタムフィールドのレイアウトのカスタマイズの記事でくわしく説明をしています。
次に、『イベント』の投稿タイプのページを追加していきましょう。
作成したイベントの投稿タイプのページを追加する
ここで『イベント』の投稿タイプのページを追加していきます。
ちなみにこの投稿タイプで追加するページは上記カレンダーで最終的にそのように表示されます。
- ダッシュボード左側の『イベント』をクリック
- 画面上部の『新規追加』をクリック
すると以下のWordPressのブロックエディターが表示されます。
- イベントのタイトルを入力
- イベントの内容を本文に入力
『日付』のフィールドでイベントが開催される日付を設定しましょう。
次に『時間』のフィールドでイベントが開始する時間を設定します。
- 『Hour(時)』と『Minute(分)』のカーソルをスライドさせて時間を指定する
- 『Done』をクリック
次にアイキャッチ画像を挿入してページを完成させます。
- アイキャッチ画像を挿入する
- 『公開』をクリック
このようにして1つのイベントに対して1ページを作成してください。
以下は今後開催予定のイベントを作成した後の『イベント』の投稿タイプ一覧画面です。
上記ではアイキャッチ画像も一覧画面に表示されていますが、デフォルト設定では表示されません。
JetEngineを使えばこのように簡単に自分好みのUIを作成することができます。
今回は管理者画面にアイキャッチ画像などの情報を表示させる方法は紹介しませんが»JetEngineの使い方【カスタム投稿タイプ】初心者シリーズ1の36:17あたりでやり方を説明していますのでぜひ参考にしてください!
次にJetEngineのListingsでカレンダーのテンプレートを作成していきましょう。
JetEngineのListingsでカレンダーのテンプレートを作成
ここで、このようなカレンダーにイベントを表示させるために使う動的なテンプレートをListingsで作成していきます。
Listing Itemを追加し初期設定をする
Listingsでカレンダーのテンプレートを作成する方法は以下の手順を参考にしてください。
- ダッシュボード左側の『Listings』をクリック
- 画面上部の『Add New』をクリック
すると以下の『Setup Listing Item』が表示されますので以下のように設定を行なってください。
- Listing source:Posts
- From post type:イベント
- Listing item name:イベントカレンダーアイテム
※自分でわかる名称にしてください。 - Listing view:Elementor
- Create Listing Itemをクリック
するとElementorの編集画面が表示されますので、次に以下の操作を行なってください。
- 画面左下の『ギアマーク』をクリック
- 『Listing Settings』をクリックしタブを開く
- 『Preview Width』でテンプレートの幅を好みの幅に変更する
Elementorに追加されたJetEngineのウィジェットを追加しListingsの動的なテンプレートを構成する
ここからElementorでJetEnginのダイナミックウィジェットを使ってカレンダーのテンプレートを構成していきます。
アイキャッチ画像を表示させる方法
カレンダーのテンプレートでアイキャッチ画像を動的に表示させるには『Dynamic Image』ウィジェットを挿入します。
Dynamic Imageウィジェットの『Source』で『Post thumbnail』選択します。
※デフォルトですでになっているかもしれません。
すると上記画像のように『イベント』で作成したページに追加したアイキャッチ画像が表示されます。
タイトルを表示させる方法
カレンダーのテンプレートのタイトルを動的に表示させるには『Dynamic Field』ウィジェットを使いましょう。
Dynamic Fieldウィジェットをカラムの中に挿入します。
すると、以下のようにおそらくデフォルトでタイトルが表示されると思います。
タイトルが表示されている原理として以下の設定が必要になりますので覚えておきましょう。
- Source:Post/Term/User/Object
- Object Field:Title
時間を表示させる方法
カレンダーのテンプレートの時間を動的に表示させるには『Dynamic Field』ウィジェットを使いましょう。
以下の設定を行なってください。
- Source:Meta Data
- Meta Field:時間
すると時間が表示されます。
しかし時間以外にも『開始時間:』などのテキストを加えたいことがあると思いますので以下でその方法を説明します。
時間の手前に『開始時間:』のテキストを加える方法
今回はDynamic Fieldウィジェットの時間の手前に『開始時間:』というテキストを加えてみたいと思います。
なお、この方法は時間に限らず使用できますので原理を覚えておきましょう!
- Customize field outputを『オン』にする
- Field formatに『開始時間: %s』と記入する
これでテンプレートの表示が『開始時間: ○○:○○』となりました。
あとは好きなようにListing Itemのスタイルをしましょう!
スタイルが完了すれば『更新』をクリックしてください。
更新をクリックするとこのようにListingsの中に『イベントカレンダーアイテム』が追加されます。
次はいいよいよ、カレンダーを表示させるページを作成していきます!
固定ページにCalendarウィジェットを挿入しカレンダーを表示させる
JetEngineのカレンダーをサイトに表示させるためには、固定ページで編集をしていきます。
- 左側のダッシュボードの『固定ページ一覧』をクリック
- 『新規追加』をクリック
- カレンダーのページのタイトルを入力する
※このサンプルでは『イベントカレンダー』とします。 - 『Elementorで編集』をクリック
Elementorの編集画面に来たら、JetEngineで新規追加されたウィジェットの『Calendar』ウィジェットを挿入しましょう。
以下はCalendarウィジェットを挿入した直後の表示画面です。
Calendarウィジェットを挿入しただけではまだカレンダーは表示されませんので、ここからエディターを操作していきます。
Calendarウィジェットのエディターの『Listings』で先ほど作成したListing Itemの『イベントカレンダーアイテム』を選択しましょう。
すると上記のようにカレンダーが表示されます!
しかし、このままではまだイベントがカレンダー内に縦一列に、同じ日付にすべてのイベントが表示されてしまっているのでさらに以下の編集を加えます。
- Group posts byを『Date from custom field』を選択する
- Meta field nameにイベントの投稿タイプで設定した『日付』のメタフィールドのName/IDを記入する
※このサンプルでは『event_date』となります。
ちなみに上記はJetEngineで作成した『イベント』の投稿タイプの編集画面で、日付のName/IDを示した画像です。
これでJetEngineのイベントカレンダーの表示設定は完了です!
以下は実際のイベントカレンダーの表示です。
イベントカレンダーのUIの編集方法
カレンダーのUIを編集する方法を一部紹介していきます。
月〜日の表記を月曜日〜日曜日にする方法
JetEngineのカレンダーのデフォルトでは曜日が『月〜日』と略されて表記されています。
曜日を略さずに『月曜日〜日曜日』までフルで表示させた場合は『Week days format』で『Full』を選択しましょう。
※デフォルトは『Shrot』に設定されています。
現在の月のカレンダーを常にデフォルトで表示させる方法
サイトに常に現在の月のカレンダーを表示させるためには『Show posts from the nearby months』を必ずオンにしましょう。
過去のイベントを非表示にする方法
カレンダーに掲載された過去のイベントを非表示にするには、『Hide past event』を『オン』にしましょう。
カレンダーのイベントをクリックしてページに飛ばす方法
カレンダーのイベントをクリックでページにリンクさせるには、Listing Itemの編集画面から行います。
以下の手順を参考にしてください!
- 画面左下のギアマーク(設定)をクリック
- 『Listing Settings』をクリックしタブを開く
- 『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.jp、Jet.nocodeweb.jp(当サイト)、Naomi SuzukiのYouTubeチャンネルで配信しています。
また、Naomiの配信する完全無料のメルマガでは、WordPressの脆弱性に関する情報やセールの情報、居住地ブダペストのノマドライフを毎週火曜日に配信しています。
ぜひ、登録してくださいね!