Divi 5用のループビルダーの紹介

公開: 2025-07-26

本日、ループビルダーDivi 5を紹介します。これにより、Divi要素を使用してループ郵便ベースおよび用語ベースのコンテンツを構築できます。

Diviのループビルダーは、その自由においてユニークです。静的ループモジュールやコンテナに制限されることなく、何もループできません。ループ要素を作成し、さまざまな便利なオプションとメタクエリを使用してクエリをカスタマイズします。

WooCommerce、ACFで作成されたカスタムフィールド、さらにはACFリピーターフィールドなど、カスタムポストタイプをサポートしています。

信じられないほどの機能です!

次のビデオをチェックして、新しい機能を参照してください。

目次
  • 1つのループを何でもします
    • 1.1例#1:カスタムブログフィード
    • 1.2例#2:注目のWooCommerce製品
    • 1.3例#3:イベントカレンダー
    • 1.4例#4:LMSコーススライダー
    • 1.5例#5:WooCommerceカテゴリページ
    • 1.6例#6:ブログ著者
  • 2クエリループオプションの探索
  • 3カスタムフィールドとポストタイプのサポート
    • 3.1高度なカスタムフィールド(ACF)のサポート
    • 3.2 ACFリピーターフィールドのサポート
  • 4今日はDivi 5を試してください
  • 5 FlexBoxを試しましたか?
  • さらに6 Divi 5の更新が進行中です

何でもループします

まず最初に:ループビルダーとは何ですか?簡単に言えば、Webサイトのデータベース(投稿、製品、カテゴリ、著者など)からコンテンツのループを表示し、各アイテムのデザインをループ内のデザインをカスタマイズできるツールです。

これにより、カスタムブログフィード、製品リスト、イベントカレンダー、コースリスト、カテゴリページ、その他すべてなど、郵便局のコンテンツを作成できます。

  1. まず、Divi要素と設計設定を使用して、ループアイテムのテンプレートを作成します。
  2. 次に、ループ内のコンテンツを制御するクエリをカスタマイズします(投稿数、投稿タイプ、カテゴリなど)。
  3. 最後に、ループからテンプレートに動的コンテンツをプラグインします(投稿タイトル、特集画像、抜粋など)。

詳細に入る前に、Diviの新しいループビルダーを使用して作成できるものの例を挙げましょう。

例#1:カスタムブログフィード

以下のビデオの美しいブログフィードを見てください。 WordPressのコアであり、Diviブログモジュールが紹介するものであるため、ブログ投稿ループに精通していますが、この例はブログモジュールではありません。カスタムループです。

Divi要素と設計設定を使用して、ブログテンプレートを作成しました。次に、コンテンツ要素を含む列のループをオンにし、投稿をループすることを選択しました。列は繰り返され、各インスタンスはループ内の投稿を表します。

最後に、ポストタイルやフィーチャー画像など、ループから動的コンテンツを接続し、ループ内の各アイテムに一意のコンテンツを表示します。これを任意の投稿タイプに対して行うには、あらゆるタイプの郵便ベースのコンテンツを作成できます。

例#2:注目のWooCommerce製品

この例では、ホームページ用の注目のウコンマース製品のループを作成しました。テンプレートは、列内にループされた列内のモジュールとグループを使用して構築されました。

クエリをカスタマイズして、紹介したい特定の製品を表示しました。

例#3:イベントカレンダー

この例で、イベントカレンダープラグインから今後のイベントのループを作成しました。 Diviのループビルダーは、ループ要素を完全に自由に設計できるようになるため、特にDivi 5のFlexboxレイアウトシステムを使用して、ループのデザインでクリエイティブになります。

任意のポストタイプの任意のカスタムフィールド(POST META)をタップすることもできます。この場合、イベント価格と日付フィールドを使用できます。

例#4:LMSコーススライダー

スライダー内のスライドのようなサブアイテムをループモジュールサブアイテムもループすることもできます。

下のビデオのループスライドには、Tutor LMSの注目のコースが表示されます。

Diviには、ポストスライダーモジュールやブログモジュールなどの郵便ベースのモジュールの概念がありましたが、動的なコンテンツとDiviの新しいループビルダーを使用すると、任意の要素を動的ループに変えることができます。

例#5:WooCommerceカテゴリページ

用語やユーザーをループすることもできます。

この例では、すべてのWooCommerce製品カテゴリをループするトップレベルの製品ページを作成しました。

ループ内の各アイテムは、投稿ではなくカテゴリです。製品カテゴリのタイトルと注目の画像は、メタという用語から動的に引き出されます。

例#6:ブログ著者

以下のビデオでは、ブログのすべての著者を取り上げたページを作成しました。

著者の役割ですべてのユーザーをループし、名前、アバター、バイオを表示します。

クエリループオプションの調査

ループに表示される投稿を制御するループビルダーのクエリオプションを見てみましょう。ループするポストタイプ、カテゴリとタグごとに投稿をフィルタリングしたり、特定の投稿をフィルタリングしたり、特定のコンテンツをターゲットにしてカスタムメタクエリを構築するかを選択できます。ポストの順序とオフセットを制御することもできます。

  • クエリタイプ- 投稿、用語、またはユーザーであろうと、ループしたいものを選択します。
  • 投稿タイプ- ロープをループしている場合は、ブログ投稿、WooCommerce製品、DIVIプロジェクトなど、どの投稿タイプをループするかを選択できます。
  • 用語- ループ用語を使用している場合は、カテゴリやタグなど、ループする用語を選択できます。
  • ユーザー- ユーザーをループしている場合、著者や貢献者など、ループするユーザーの役割を選択できます。
  • 特定の用語のある投稿を含める- 投稿をループしている場合は、特定のカテゴリとタグからの投稿のみをループすることを選択できます。
  • 特定の用語で投稿を除外します- 特定のカテゴリからの投稿をループから除外することもできます。
  • 特定の投稿を含める- ループをループしている場合は、ループに特定の投稿のみを含めることができます。これは、ブログの投稿や製品を紹介するのに最適です。
  • 特定の投稿を除外します- ループから特定の投稿を除外することもできます。
  • 注文- 上昇または下降して、ループしたアイテムを注文します。
  • ページごとの投稿- 各ページにループされたアイテムの数を選択します。
  • ポストオフセット- すべてのnアイテムのみを表示します。これにより、同じクエリを介して複数のループを作成でき、それぞれに一意の投稿とデザインがあります。
  • メタクエリ- ポストメタキーを使用してループをフィルタリングするカスタムクエリを作成します。
    • Meta Key - Post_Metaテーブルのメタキー。
    • メタ値- 特定のメタキーを使用したアイテムの値。
    • 比較- 特定のメタキーをクエリしたら、クエリに影響を与えるために値を比較する方法を選択できます(等しく、等しい、など)。
    • タイプ- 数、日付、時刻など、比較される値のタイプ。

カスタムフィールドとポストタイプのサポート

Diviのループビルダーは、2つの方法でカスタムフィールドをサポートしています。まず、カスタムメタクエリを使用して、すべてのカスタムフィールドデータを含むpost_metaテーブルの投稿のデータに基づいて、ループに特定のコンテンツを表示できます。第二に、ループテンプレート内のコンテンツなど、カスタムフィールドデータなどのwp_postmetaテーブルからデータを表示できます。

高度なカスタムフィールド(ACF)のサポート

Diviのループビルダーは、高度なカスタムフィールド(ACF)を使用して作成されたカスタムフィールドをサポートしています。カスタムフィールドを選択すると、上部にすべてのACFフィールドがあり、関連するフィールド名が付いています。

ACFリピーターフィールドのサポート

Diviのループビルダーは、ACFリピーターフィールドもサポートしています。 ACFを使用してクエリループを作成すると、クエリタイプメニューから選択できれば、すべてが適切に配置されます。

今日Divi 5を試してみてください

Divi 5のループビルダーは本日利用できます。これは、今年DIVIに登場する多くの機能の1つです。

Divi 5以降の最終リリースを進むにつれて、2週間ごとに更新を進めることができます。優先順位に応じて、Divi 5を使用して新しいWebサイトを構築したり、機能を追加するまで待機したりすることができます。

Divi 5のオリジナルの多相リリーススケジュールで概説されているように、Divi 5 Public Alphaは「Divi 5 Lite」のようなものです。いくつかの機能が欠落しており、既存のWebサイトには適していない場合がありますが、Divi 4のエクスペリエンスを好む場合は、新しいWebサイトで使用する準備ができています。

私たちはあなたにそれを試してほしい、そしてあなたがそれを愛しているなら、それを使ってください。誰もがそれを愛しているとき、私たちはそれを公式にします。

FlexBoxを試しましたか?

あなたがそれを見逃した場合に備えて、私たちは最近、DIVI 5のまったく新しいFlexBoxベースのレイアウトシステムをリリースしました。

これはマイナーな更新ではありません。 Diviを再発生し、レスポンシブレイアウトの故障、カスタムモジュールの順序付け、簡単な垂直アライメント、要素の位置決めなど、レイアウト構造を構築できます。石は裏返されず、選択肢も忘れられませんでした。私たちはそれをすべてしました、そしてそれは授業で最高です。ビデオの説明には、詳細を確認するリンクがあります。

すべての詳細については、このビデオをご覧ください。

Divi 5の更新が進行中です

2025はDivi 5の年です。退屈な仕事は私たちの後ろにあります。私たちはSuper-Fast Foundationを構築しましたが、Diviがカムバックする時が来ました。

Diviのカムバックのためにここにいる場合は、このビデオが好きでコメントを残して、私たちに大きな恩恵を与えてください。あなたがDiviを応援しているのを見るのは私たちにとって多くのことを意味し、アルゴリズムを供給して言葉を広めることが不可欠です。

YouTubeでフォローし、Diviニュースレターを購読することを忘れないでください。そうすれば、更新を見逃すことはありません。もう1つのDivi 5機能の発表でお会いしましょう。