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

【New】がついたお知らせセクションの作り方 – 新着記事の表示に!JetEngine x Elementor

サイトの新着記事や情報を更新するたびに動的に『New』とつくお知らせセクションを作りたいと思いませんか?

固定ページの編集画面・過去7日以内のお知らせだけに『New』がついた

JetEngineElementorをつかえばそれを実現することができます。

しかも、Newを表示させる期間も自動でコントロールできるので、自分でいちいち更新する手間も必要ありません!

WordPress最強のプラグインJetEngineをつかい倒してオシャレで機能的なウェブ制作をしていきましょう!

JetEngineで動的に『New』を表示させるための簡単ステップは以下のとおりです。

  1. JetEngineのPost Typesで『お知らせ』のカスタム投稿タイプを作成する
  2. JetEngineの『Dynamic Visibility for Widgets and Sections』ウィジェットをオンにする
  3. Listingsでお知らせを動的に表示するためのリストのテンプレートを作成する
  4. 固定ページを新規追加し、Listing Gridウィジェットで一気にお知らせセクションを表示させる
  5. 指定した過去数日のお知らせのみに自動で『New』を表示させる設定をする

JetEngineとElementorで動的に『New』を表示するお知らせセクションの使い方を動画でご覧になりたい方はこちらから!

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

今回必要なプラグイン

サイトに動的に『New』を表示させるお知らせセクションを作成するのに必要なプラグイン

サイトに動的に『New』を表示させるお知らせセクションを作成するのに必要なプラグインは以下のとおりです。

上記のプラグインをインストールしましょう。

なおJetEngineとElementor Proは有料のプラグインになります。

JetEngineの購入方法は»Crocoblockのメンバーシップ【JetEngine】の購入からアクティベートする方法でくわしく説明しています。

JetEngineで『お知らせ』のカスタム投稿タイプを作成する

サイトに新着情報を表示させるためには、お知らせ内容を更新するためのページが必要になります。

JetEngineのカスタム投稿タイプで作成したお知らせセクション

JetEngineの『Post Types』で『お知らせ』のためのカスタム投稿タイプを作成しましょう!

JetEngineでカスタム投稿タイプを作成する方法は»JetEngineでカスタム投稿タイプとカスタムフィールドを作る方法-Crocoblockの記事を参考にしてください。

JetEngineの『Dynamic Visibility for Widgets snd Sections』ウィジェットをオンにする

JetEngineで動的なお知らせセクションを作るには、JetEngineの『Modules』にある『Dynamic Visibility for Widgets and Sections』ウィジェットをオンにする必要がありますので以下の手順に従ってください。

xJetEngineの『Dynamic Visibility for Widget snd Sections』をオンにする
  1. ダッシュボードの『JetEngine』をクリック
  2. 『Default Modules』中の『Dynamic Visibility for Widgets and Sections』をオンにする
  3. 『Save』をクリック

これでお知らせセクションを作るために必要な準備は完了です。

さっそくElementorの編集画面でお知らせセクションを設置、動的な表示ができるような設定をしていきましょう!

Listingsで『お知らせ』を動的に表示するためのリストのテンプレートを作成する

次にJetEngineの『Listings』でお知らせセクションを動的に表示するためのリストのテンプレートを作成しましょう。

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

すると『Setup Listing Item』の画面が表示されますので以下の手順に従ってください。

Setup Listing Itemの設定
  1. Listing source: Posts
  2. From post type: お知らせ
    ※Post Typesでご自身で作成したカスタム投稿タイプ名を選択してください。
  3. Listing item name: お知らせセクションアイテム
    ※自分で何のリストアイテムかが判別できる名前を設定してください。
  4. Listing view: Elementor
  5. Create Listing Itemをクリック

するとリストのテンプレートを作成するためのElementorの編集画面が表示されますので、お知らせセクションのリストテンプレートを作成していきましょう!

ちなみに今回はサンプルとして以下のようなお知らせセクションを作成していきます。

お知らせセクションアイテムで作成したいテンプレート

動的に日付を表示させる方法

お知らせセクションに、いつリリースした情報なのかを知らせるために日付を表示させたいですよね。

その場合はJetEngineのダイナミックウィジェットの『Dynamic Field』をつかいましょう。

Dynamic Fieldウィジェットを挿入

2つに分けた左のカラムに『Dynamic Field』ウィジェットを挿入すると『お知らせ⑦』と『お知らせ』のカスタム投稿タイプにあるページのタイトルが表示されました。

これはデフォルトで投稿タイプのタイトルが表示される設定になっているからです。

日付を表示させるためには以下の操作を行いましょう。

Dynamic FieldのObject Fieldで『Date』を選択

コンテンツタブの『Object Field』の『Date』をクリックすると、日付が表示されるようになります。

しかし日付の表示フォーマットが『yyyy-mm-dd-xx:xx:xx』がデフォルトになりますので、『yyyy年mm月dd日』のように変更したいと思います。

日付のフォーマットを変更する方法

日付のフォーマットを変更する方法は以下の手順を参考にしてください。

Filter field outputをオンにしCallbackでFormat dateを選択
  1. コンテンツタブの『Filter field output』をオンにする
  2. 『Callback』で『Format date(localized)』を選択する

するとカラムの日付が『7月3, 2022』の並び順で年月日が表示されます。

これは『Format』で『Fj,Y』とデフォルトで設定されているためです。

コンテンツタブの『Format』に自分の好きな日付の表示ルールを記入しましょう。

Formatに年月日の表示ルールを記入

たとえば日付を『yyyy年mm月dd日』のように表示させたい場合はFormatに『Y年Fj日』と記入してください。

なお『Y年Fj日』には『月』という文字が含まれていませんが、JetEngineではなぜが『月』だけは自動で表示されるようになっていますので、Formatに『月』は記入しないようにしましょう。

動的にタイトルにを表示する方法

テンプレートにお知らせのタイトルを表示させましょう。

Dynamic Fieldを挿入しページタイトルを表示示させる

タイトルを表示させるには『Dynamic Field』を挿入するだけで完了です。
(デフォルトで投稿タイプのページが表示されるようになっているため)

※なお、カラム幅をレイアウト的に良く見えるように変更しました。

ページタイトルの手前に『New』のサインを配置する方法

『見出し』ウィジェットをDynamic Fieldで表示したタイトルの上に挿入

ページタイトルの手前に『New』のサインを表示させるために、まず『見出し』ウィジェットをさきほどDynamic Fieldウィジェットで表示させたタイトルの上(同じカラム内)に挿入しましょう。

見出しウィジェットのタイトルを『New』にしHTMLタグを変更

次に見出しウィジェットのタイトルを『New』にしHTMLタグを『span』(任意)に変更します。

『New』の幅をインラインにする

見出しウィジェットの『高度な設定』の『幅』を『インライン(auto)』にしましょう。

次に、タイトルを表示させたDynamic Fieldウィジェットも高度な設定で幅をインラインにしていきます。

お知らせのタイトルの幅をインラインにする
  1. タイトルを表示させた『Dynamic Field』ウィジェットを選択
  2. 『高度な設定』をクリック
  3. 幅を『インライン(auto)』にする

すると以下のように同じカラム内で2つのウィジェットが横並びに配置されます。

同じカラム内で2つのウィジェットが横並びに配置される

横並びになったウィジェット同士の高さが異なるようならマージンなどで高さを整えましょう。

次に自由に『New』の見出しをスタイルし更新します。

『New』をスタイルし『更新』
  1. 『New』をスタイルする
    ※文字色の変更、背景色(グラデーション)の挿入、パディング、ボーダーに丸みをつけました。
  2. 『更新』をクリック

すると以下のようにListingsの一覧画面にアイテムが追加されます。

Listingsの一覧画面に追加されたリストアイテム

これで『お知らせセクション』のリストのテンプレートの準備ができました。

JetEngineのListingsの使い方を»JetEngine【Listings】の使い方・動的な一覧ページがノーコードで作れる!の記事でくわしく説明をしていますので他にどんなことができるのかも踏まえてぜひご覧ください。

固定ページにListing Gridで作成したリストのテンプレートを表示する

次に、サイトに『お知らせセクション』を表示させるための固定ページを追加し編集していきます。

固定ページを新規追加
  1. 『固定ページ一覧』をクリック
  2. 画面上部の『新規追加』をクリック

そしてElementorの編集画面を開きカラムにJetEngineのウィジェットの『Listing Grid』を挿入しましょう。

『Listing Grid』ウィジェットを挿入

Listing Gridを挿入すると『Please select listing to show』と表示されますので、先ほどJetEngineのListingsで作成した『お知らせセクションアイテム』を表示させるために以下の操作を行なってください。

コンテンツタブの『Listings』で作成したリストアイテム名を検索

コンテンツタブの『Listings』でさきほど作成したリストのテンプレート名(お知らせセクションアイテム)を検索し選択しましょう。

すると、デフォルトで6つのお知らせセクションが3つのカラムに別れて表示されますので、次にお知らせの表示を縦一列に表示するように編集していきます。

リストの表示を変更
  1. お知らせセクションを縦一列で表示させるために『Colmun Number』を『1』に設定する
  2. 表示させるお知らせの数を変更する場合は『Posts number』で表示させたい数を設定する
    ※このサンプルでは『5』に設定しました。

これで従来のお知らせセクションのような見た目になりました。

ここでページを『公開』しましょう。

しかし、このままではすべてのお知らせに『New』がついています。

ここからさらに過去1週間のお知らせだけに動的に『New』をつける設定の仕方を紹介していきます。

過去1週間のお知らせだけに自動で『New』を表示させる設定方法

ここからお知らせセクションの過去1週間のお知らせだけに動的に『New』をつけるための設定方法を紹介していきます。

1. ListingsのリストアイテムのElementorの編集画面に戻る

まずは『Listings』で作成したリストアイテム(お知らせセクションアイテム)のElementorの編集画面に戻りましょう。

Listingsに戻りリストアイテムの『Elementorで編集』をクリック
  1. ダッシュボード左側のJetEngineの中の『Listings』をクリック
  2. 作成したリストアイテムの『Elementorで編集』をクリック

Elementorのリストアイテムの編集画面が開いたら以下の手順に従ってください。

2. 高度な設定のDynamic VisibilityをEnableにする

『New』(見出し)の高度な設定のDynamic Visibilitの『Enable』をオンにする
  1. 『New』(見出しウィジェット)を選択する
  2. 『高度な設定』をクリック
  3. 高度な設定の中の『Dynamic Visibility』をクリックしタブを開く
  4. 『Enable』を『オン』にする

ちなみにDynamic VisibilityはJetEngineの『Modules』で『Dynamic Visibility for Widgets and Sections』をオンにしすると表示される設定です。
※JetEngineの『Dynamic Visibility for Widget snd Sections』ウィジェットをオンにするのセクションで説明をしています。

また、Dynamic Visibilityとは条件分岐でものを表示したり非表示にしたりすることのできる機能です。

3. Visibility condition typeで『Show element if condition met』を選択する

次にDynamic Visibilityをオンにすると出てくるタブの中の『Visibility condition type』の『Show element if condition met』を選択しましょう。

Visibility condition typeで『Show element if condition met』を選択

ちなみにVisibility condition typeは以下の機能設定になります。

  • Show element if condition met: 条件が合っていればこのウィジェットを表示する
  • Hide element if condition met: 条件が合っていればこのウィジェットを隠す

4. Conditionを設定する

次に『Conditions』の設定をしていきますので以下の手順に従ってください。

①『Greater than』を選択

Conditionsで『Greater than』を選択
  1. 『Condition』をクリック
  2. 『Greater than』を選択する

②Fieldで動的タグの『Post Date』を選択

『Field』の動的タグで『Post Date』を選択
  1. 『Field』の動的タグのマークをクリック
  2. 『Post Date』をクリック

③Post Dateの設定でFormatを設定する

Fieldで選択した『Post Date』の設定を開き『Format』を設定します。

Post Dateの『設定』の『Format』で『yyyy-mm-dd』を選択する
  1. Post Dateの横の設定(ツールマーク)をクリック
  2. Formatで『yyyy-mm-dd』を選択する
    ※フォーマットの表示は『2022-07-03』のように編集しているその日の日付が表示されています。

④Valueに『-7 days』と記入する

Valueに『-7 days』と記入

『Value』に『-7 days』と記入しましょう。

今回はサンプルとして過去1週間のリストに『New』の表示をするために-7 daysとしましたが、たとえば過去3日にする場合は『-3 days』のように変更しましょう。

⑤Data typeを『Datetime』を選択する

Data typeで『Datetime』を選択

『Data type』で『Datetime』を選択しましょう。

これでページを『更新』してください。


では、また固定ページのElementorの編集画面に戻ってみましょう。

固定ページの編集画面・過去7日以内のお知らせだけに『New』がついた

するとこのように、過去7日までのお知らせだけに『New』が表示されました!

まとめ

JetEngineとElementorをつかえばサイトに動的に、しかも『New』のサインも指定した過去数日の期間のみ自動で表示することができるお知らせセクションを作成することができました!

固定ページの『お知らせ』ページを更新すれば自動ですべて表示ができるので、サイト更新もとても効率的ですね。

ここで『New』を過去数日(たとえば1週間)の新着情報のみに自動で表示させる設定方法をここでしっかりとおさらいしていきましょう!

  1. ListingsのElementorの編集画面で『New』を表示させたウィジェットの高度な設定で『Dynamic Visibility』を『Enable』にする
  2. Visibility condition typeの『Show element if condition met』を選択する
  3. Conditionを『Greater than』にする
  4. Fieldの動的タグで『Post Date』を選択する
  5. Post Dateの設定にある『Format』で『yyyy-mm-dd』を選択する
  6. Valueに『-7 days』と記入する
  7. Data typeで『Datetime』を選択する

ぜひ、便利で機能的なサイト構築に役立ててくださいね!

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

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

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

目次