Divi 5のループビルダーについて知る必要があるすべて

ループビルダーは最新の機能です。カスタムブログフィード、製品グリッド、またはその他の動的コンテンツをすべてDivi 5 Visual Builder内に構築する新しい方法を提供します。この強力な新しい追加により、クリエイターは柔軟性を備えたループコンテンツを構築し、投稿、製品、その他のカスタムポストタイプを表示する方法を変換できます。

この投稿では、ループビルダーの機能を調べて、使用方法に関する段階的なガイドを提供します。始めましょう！

Divi 5のループビルダーとは何ですか？

Divi 5のループビルダーは、Diviユーザーがビジュアルビルダー内で直接動的なループデザインを作成およびカスタマイズできるようにする新機能です。ブログ投稿、WooCommerce製品、またはその他のカスタム投稿タイプを紹介する場合でも、Divi 5のループビルダーを使用すると、静的で定義されたモジュールに限定されることなく、Divi要素を使用してコンテンツループを構築できます。

YouTubeチャンネルを購読してください

Divi 5のループビルダーの利点は、その自由にあります。カスタムクエリを使用して複雑なレイアウトを設計し、Diviの完全なデザインツールでそれらをスタイリングできます。これは、洗練されたブログフィードから完全な制御を備えたダイナミック製品グリッドまで、すべてがノーコード、ドラッグアンドドロップインターフェイス内ですべてを作成できることを意味します。

ループビルダーの主要な機能

Divi 5のループビルダーには、動的でカスタマイズされたコンテンツループを作成するための傑出したツールになる強力な機能があります。これは、それを非常に用途が広くユーザーフレンドリーなものを詳しく見ています。

1。柔軟なループ作成

ループビルダーを使用すると、事前定義されたモジュールに限定されません。 Divi要素のループオプションを切り替えて、動的コンテンツループに変換できます。ループを使用すると、Visual Builderを使用してカスタムテンプレートを構築でき、Minimalistブロググリッドからポートフォリオまで、ビジョンに合ったレイアウトを自由に作成できます。

2。カスタムクエリオプション

ループビルダーは、表示するコンテンツを制御できます。ポストタイプ、カテゴリ、投稿数、または高度なメタクエリでループをカスタマイズできます。著者によってフィルタリングされたWOO製品、イベント、コンテンツなど、カスタムポストタイプ（CPTS）を完全にサポートしています。つまり、コードを作成したり、サードパーティのプラグインを使用したりせずに、サイトでほぼあらゆるコンテンツタイプのループを作成できます。

3。動的コンテンツ統合

ポストタイトル、特集画像、抜粋、カスタムフィールドなど、動的コンテンツをループテンプレートにシームレスにプルします。ループビルダーは、リピーターフィールドを含むACFのネイティブサポートを提供し、ループ内に直接データを表示できるようにします。この統合により、コンテンツは動的で高度にカスタマイズ可能になります。

4。自由を設計します

ループしたコンテンツを視覚ビルダーでスタイリングして、グリッド、カルーセル、スライダーなどのユニークで人目を引くレイアウトを作成します。すべての側面は完全にカスタマイズ可能であり、ループがブランドと一致するようにします。

ループビルダーの仕組み

Divi 5のループビルダーは、動的なコンテンツループの作成を簡素化し、初心者や上級ユーザーがアクセスできるようにします。ループを構築する前に、Divi 5のループビルダー内のすべての設定を確認しましょう。

Divi 5のループビルダー設定の理解

Divi 5のループビルダーを使用すると、特定の基準に基づいてさまざまな種類のコンテンツを取得および表示することにより、Webサイトに動的セクションを作成できます。各設定を見てみましょう。そうすれば、彼らが何をしているのか、どのように使用するかをよりよく理解してください。

クエリタイプ

これはあなたのループの基本的な選択です。 Divi 5に、レイアウトにどのコンテンツを引き込みたいかを伝えます。投稿、用語、またはユーザーを選択できます。投稿は、ブログ投稿、プロジェクト、またはサイトにあるカスタム投稿タイプなどの標準コンテンツです。用語は、カテゴリ、タグ、またはカスタム分類法を指します。最後に、ユーザーを使用すると、著者や貢献者など、サイト上のユーザーに関する情報を表示できます。

ポストタイプ

クエリタイプの投稿を選択する場合、この設定では、表示する特定の投稿を改善します。これは、レシピや証言などのブログ投稿、製品、プロジェクト、ページ、または登録したカスタム投稿タイプです。

条項

クエリタイプとして用語を選択するとき、この設定を使用すると、ループする特定のカテゴリまたはタグを選択できます。たとえば、これらはタグ、フォーマット、プロジェクトカテゴリ、プロジェクトタグ、またはカスタム分類学の用語です。

ユーザー

この設定により、ユーザーをループするときに含めるユーザーの役割をフィルタリングできます。例には、著者、貢献者、編集者、管理者が含まれます。

特定の用語の投稿を含めます

DIVI 5を使用すると、特定のカテゴリとタグを使用して投稿をループでき、投稿の選択を絞り込み、特定のカテゴリまたはタグに割り当てられたカテゴリのみを含めるようにします。

特定の用語で投稿を除外します

この設定は、上記の設定の反対です。特定のカテゴリまたはタブに割り当てられたループから投稿を削除します。特定のカテゴリのブログ投稿を除いて、すべてのブログ投稿を表示したい場合に役立ちます。

特定の投稿を含めます

投稿をループしている場合は、特定の投稿のみを含めることができます。これには、ブログの投稿や製品を紹介するのに最適です。たとえば、自宅またはランディングページに注目の投稿セクションを作成し、Diviのループビルダーを使用して、機能する投稿または製品のみを表示できます。

特定の投稿を除外します

これにより、ループから特定の個々の投稿を削除できます。これは、一般的なブログ投稿フィードに特定の投稿が表示されないようにするのに最適な方法です。これは、それらが古くなっている場合、またはサイトの他の場所に表示される特別なプロモーションの一部です。

注文

これにより、ループされたアイテムが表示されるシーケンスが決まります。公開日、なし、id、title、post name、最終変更日、ランダム、著者、またはコメント数で並べ替えることができます。

ページごとの投稿

この設定は、コンテンツの単一ページにループ内に表示されるアイテムの数を制御します。これは、着陸、ポートフォリオ、またはアーカイブページで特定の数の投稿または製品を紹介する良い方法です。

ポストオフセット

この設定を使用すると、クエリ結果の先頭からいくつかのアイテムをスキップできます。ポストオフセットは、ユニークなレイアウトを作成するのに非常に役立ちます。たとえば、上部に1つの大きな特集投稿（別のモジュールを使用）があり、2番目の投稿から始まる残りの投稿を表示するループがあります。

メタクエリ

メタクエリは、ループビルダーがカスタムコンテンツに強力になる設定です。これにより、投稿、用語、またはユーザーに追加したカスタムフィールドに基づいてコンテンツをフィルタリングできます。

メタキー

メタキーは、コンテンツに関連付けられたカスタムデータの一意の識別子です。このデータは、WordPressデータベースのpost_metaテーブルに保存されます。

メタ値

メタ値は、Metaキーフィールド内で探している特定の値です。

比較する

この設定では、メタキーのデータベースに保存されている実際の値とメタ値を比較する方法を定義します。オプションには、平等、平等ではなく、等しく、等しく、等しく、等しく、等しく、等しく、等しい、含まれる、リストにはリストに含まれていない、フィールドが存在し、フィールドが存在しないことが含まれます。

タイプ

このタイプは、比較中にメタ値を解釈する方法をDiviに伝えます。特に数字や日付との正確な比較には非常に重要です。文字、数値、バイナリ、日付、日付、10進、小数、署名、または署名から選択できます。

これらの設定を組み合わせることで、Diviサイトに非常に洗練された動的なコンテンツディスプレイを作成し、希望する順序で必要なコンテンツを正確に引き込み、必要な方法で正確にフィルタリングできます。

Divi 5でループを作成する（ブログ投稿グリッド）

新しい3列の行を追加します

視覚ビルダーのページに3列の行を追加することから始めます。

15pxの境界半径、すべての側面に25pxのパディング、1pxのソリッド＃000000ボーダーを追加して、最初の列をスタイルします。

列でループを有効にします

次に、最初の列のコンテンツ設定でループ要素をトグルすることを有効にします。

行レイアウトラッピング

次に、スペースがなくなったら要素が次の行に落ちるように、列に包むことを有効にする必要があります。行のデザインタブに移動し、レイアウトドロップダウンメニューを展開し、レイアウトラッピングの下でラップを選択します。

レイアウト>水平ギャップの下のループ要素間の水平ギャップを調整できます。

ループコンテンツを追加します

これらの設定が整ったら、ループにモジュールを追加できます。最初の列をクリックして画像モジュールを追加します。各列が画像プレースホルダーを自動的に追加することに気付くでしょう。

画像モジュールの設定の動的コンテンツアイコンをクリックします。次に、利用可能なオプションからループ機能の画像を選択します。

ドロップダウンメニューからサムネイルサイズを選択し、 [適用]をクリックします。

最初の列の画像モジュールの下に見出しモジュールを追加します。ダイナミックコンテンツアイコンをクリックして、ループ投稿タイトルを選択します。あなたが望むように見出しをスタイルします。

次に、テキストモジュールをループの最初の列に追加します。動的なコンテンツアイコンをクリックし、ループ著者を選択します。

最後に、ポスト抜粋用の別のテキストモジュールを追加します。追加したら、動的なコンテンツアイコンをクリックして、 [ループの抜粋]を選択します。

ダイアログボックスが表示されたら、テキスト、ループの位置、単語の数を前後に設定し、テキストを読むことができます。

ループカスタムフィールドを使用します

ループにカスタムフィールドを表示するには、Divi 5のカスタムポストタイプとフィールドとの統合を使用して、高度なカスタムフィールド（ACF）で作成されたフィールドを含むことができます。たとえば、Loop Builderを使用して情報を表示できるように、ACFを使用して書籍のカスタム投稿タイプを作成しました。

Visual Builderでは、クエリタイプとして投稿タイプを選択し、投稿タイプとして[本]を選択します。

Divi 5のループビルダーを使用すると、カスタムフィールドを簡単に活用でき、動的コンテンツの柔軟性が向上します。 ACFを使用する場合、互換性のあるモジュールで動的コンテンツアイコンを選択して、ループカスタムフィールドにアクセスできます。

Divi 5のACF統合の最良の機能の1つは、コンビニエンスのためにフィールドにラベル付けされる方法です。ダイナミックコンテンツメニューでカスタムフィールドを選択するとき、DiviはMetaキーではなくACFフィールドのラベル（ACFフィールドグループで定義されています）を表示します。これにより、特に複数のカスタムフィールドを管理する場合、正しいフィールドを直感的に識別および選択できます。

たとえば、本のカスタム投稿タイプにジャンルという名前のACFフィールドがある場合、このデータをテキストモジュールに引き込み、ループ内でジャンルを動的に表示できます。

DIVI 5はACFリピーターフィールドをサポートしています

DIVI 5を使用すると、ループ内に複雑で繰り返されるデータセットを表示できます。まず、ACFリピーターフィールドがACFにセットアップされていることを確認してください。

ループ列に画像モジュールのようなモジュールを追加します。動的コンテンツ設定でループカスタムフィールドを選択し、リピーターフィールドを選択します。 Diviはリピーターのサブフィールドを表示し、画像サブフィールドなどの特定のデータを選択して、ループ内にダイナミックギャラリーを作成できます。たとえば、ループ内の各画像がグリッドとしてスタイルされたリピーターフィールドから一連の画像を表示するポートフォリオショーケースを作成できます。

ユーザーと用語ループ

Divi 5のループビルダーは、ユーザーと用語をループするためにも使用できます。ユーザーループの場合、チームメンバーのショーケースを作成できます。これを達成するには、クエリタイプをユーザーに設定し、ロールごとにフィルタリングし、ユーザーのアバター用の画像モジュールや名前のテキストモジュールなどのモジュールを追加します。

用語ループの場合、プロジェクトカテゴリショーケースを作成できます。これは、さまざまなプロジェクトとそのカテゴリを表示するカテゴリページを作成する素晴らしい方法です。クエリタイプを用語に設定し、分類法を選択し、特定の用語を含めるだけです。

ループの投稿、プロジェクト、カテゴリ、または著者であろうと、ループビルダーは、投稿を超えて多様なコンテンツタイプを処理し、無限の創造的な可能性を提供できます。

Divi 5のループビルダーを使用することの利点

Divi 5のループビルダーは単なる機能ではありません。これは、動的なレイアウトを簡単に作成できるようにする変革的なツールです。 Diviユーザーにとって必須の重要な利点は次のとおりです。

• 柔軟性：ループビルダーは創造的な自由を提供し、列からスライダーまでのDivi要素を使用して任意のコンテンツタイプをループできます。事前定義されたレイアウトにロックするモジュールとは異なり、ループビルダーは完全な設計制御を提供し、創造性を犠牲にすることなくユニークなレイアウトを可能にします。
• 効率：視覚ビルダーに直接構築された再利用可能なループテンプレートでワークフローを高めます。単一のテンプレートを作成し、クエリとスタイリングをカスタマイズし、複数のページまたは投稿タイプに適用します。
• ネイティブ統合：ループビルダーはDivi 5に組み込まれており、複雑なコンテンツディスプレイ用のシームレスなネイティブソリューションを提供します。
• 強化されたCPTサポート： Loop Builderは、WOO、ACF、およびカスタムポストタイプを完全にサポートしているため、複雑なWebサイトに最適です。

Divi 5のループビルダーを使用して動的なWebサイトを構築します

Divi 5のループビルダーは、Diviユーザーが、ブログの投稿やWoo製品からカスタムポストタイプまで、あらゆるポストタイプまたは分類に向けて柔軟で動的なコンテンツループを作成できるようにします。任意のDIVI要素をカスタマイズ可能なループに変換し、ACFなどのカスタムポストタイププラグインとシームレスに統合し、ユーザーがビジュアルビルダー内の完全な設計コントロールを提供します。ループビルダーは、動的なコンテンツの表示方法を再定義します。

Divi 5をダウンロードしてループビルダーに飛び込んで、DiviでWebサイトを構築する方法をどのように高めるかを発見することをお勧めします。